オペラ対訳プロジェクト広報室

アクセスカウンタ

zoom RSS 10周年にしてプチ・リニューアルしてみる(2)

<<   作成日時 : 2018/08/11 22:00   >>

ブログ気持玉 0 / トラックバック 0 / コメント 0

オペラ対訳ページのメイリオ化作業を実際やってみると、フォントの選択がMacOSやタブレットにもよい影響を与えることがわかってきました。思い切ってヴァーダナ・メイリオ化を推進することにしました。

ヴァーダナ・メイリオ化完了作品

「Verdana」(ヴァーダナあるいはベルダナ)は欧文フォントです。タイトルページ、対訳ページどちらにも、これまでは「Arial」を使ってきました。対訳ページの和文フォントを「メイリオ」に置き換えると同時に、欧文フォントも「Verdana」に変更することにしました。


「Verdana」フォントとは

WinOS、MacOS、それにできればタブレット、それぞれに標準で搭載されているフォントの中で、よさげなのを探してみました。

Arial Il Trovatore La Traviata

Verdana Il Trovatore La Traviata

Georgia Il Trovatore La Traviata

テストページで表示させてみると「Verdana」と「Georgia」が優秀でした。マルチブラウザに強い。どういうことかというと、IE、Chrome、Firefox それぞれで表示したときの違いが少ない。

「そんなのあたりまえじゃないか」と思われるかもしれませんが、実はそうでもない。ブラウザのレンダリング・エンジンの癖によって、同じテキストを同じフォントで表示しても、ブラウザによって全く異なる位置で折返しが入ってしまうことがあり、対訳ページではこれが行ズレの原因になってしいました。

推奨ブラウザをIEとFirefox としているので、これまでは両方のブラウザで欧文を表示してみては行ズレが生じないように調整していました。

「Georgia」はセリフ体でウェブよりも紙媒体向きのフォントのため却下、サンセリフ体の「Verdana」のほうを採用です。「トロヴァトーレ」の「Il」が判別しやすいのも好印象です。

また「Verdana」は「Arial」に比べてフォントピッチが広めなのも都合がいい。和文に幅広の「メイリオ」を使うとどうしても和文が長めに配置されます。欧文のほうが短すぎると、欧文領域にカラ改行を入れてギャップを埋める必要があります。ところがウィキで実際編集してみると、このカラ改行を入れるために、欧文の該当箇所まで移動するのが結構めんどうなんです。

「Verdana」の広めのフォントピッチのおかげで、欧文領域にカラ改行を入れる可能性は「Arial」よりも低くなるはずです。


「メイリオ」vs「游ゴシック」

前回記事で「游ゴシック」を少し紹介しました。最新のWin・Macならどちらにも標準搭載されているフォントです。「MS Pゴシック」や「メイリオ」は基本Winのみに搭載です。「游ゴシック」を採用すれば Mac工作員はいらなくなるのですが……。

MS Pゴシック トロヴァトーレ 椿姫

メイリオ トロヴァトーレ 椿姫

游ゴシック トロヴァトーレ 椿姫

実際の対訳ページで表示してみた例がこちら。


一部では「神フォント」とも称される「游ゴシック」でありますが、私にはあまり美しいとは思えない。WinOSで見たときに少し滲んでいるというか霞んでいるように見えるのは、表示設定が甘いからかもしれません。(いやそれはおまえの老眼のせい)

これを回避するための CSS設定がなんだかものすごくややこしい。「游ゴシック」はWindows 8.1以降に標準搭載(私のWin7にはなぜか入っているが)ということもあり、却下するしかなさそうです。

MacOSユーザさんから「おいおい!」と怒りの声が飛んできそうです。でもちょっと待った。上の《ゲロ夢》をふたつのタブで開いて、切り替えて返す返す眺めてみてほしいんですよ。(両方のフォントがパソコンに入ってないと意味ないけど)

和文の配置が全く変化しませんよね。

どうやら「メイリオ」と「游ゴシック」はフォントピッチ(フォントの幅)が同じらしいんですわ。もちろんどちらも固定ピッチフォントなので、どこまでいってもズレません。

ということは、WinOSユーザには「メイリオ」を、MacOSユーザには「游ゴシック」を見せるようにCSSで指定すれば、WinOSで編集したテキストを、MacOSでもズレなく表示できるのでは……。

こんな風に指定してみました。

.jpn400 {
width:400px;
font-family:'Verdana','メイリオ',Meiryo,"游ゴシック Medium",YuGothic,'Yu Gothic',sans-serif;
float:right;
color:#FFFF80;
padding:0px 0px 0px 10px
}

私はMacOS持ってないので確認できないんですが、たぶん行ズレを起こさずに表示できているのではないでしょうか。多少確信があるのは、タブレットで表示したときにズレないからなんです。


MacOSでもタブレットでも「オペ対」が読める時代到来か?

タブレット・スマホによる閲覧はスマホ版ページで日本語訳のみの閲覧を推奨しています。パソコン版のページも表示できますが、対訳はズレます。私が使っている安物タブレット「Amazon Fire7」で、「Arial・MS Pゴシック」表示の対訳はズレまくってます。たぶん「Fire7」には、どちらのフォントも入っていないからだと思います。

ところが「Verdana・メイリオ」の対訳は見事にズレません。行の折返しが頻出する《エレクトラ》が全くズレなく表示できるのには感動しました。

表示されているフォントを見ると、欧文フォントは「Verdana」のようです。和文フォントは何かはわからないけど「メイリオ」ではない。しかし固定ピッチフォントで、しかもフォントピッチが「メイリオ」と同じなのでズレないのでしょう。

同じ理屈でMacOSで表示してもズレてないといいのですが。

こちらに、ヴァーダナ・メイリオ化完了したタイトルを一覧にして表示する臨時ページを作りました。

ヴァーダナ・メイリオ化完了作品

MacOSやタブレット・スマホでズレずに表示できるか確認してみてください。


Firefox は見捨てるしかないのか

メイリオ化のおかげで和文領域に起因する行ズレはほとんどなくなりました。たぶん「MS Pゴシック」のようなプロポーショナルフォント(文字によってフォントピッチが異なる)より、「メイリオ」のような固定ピッチフォントのほうが、上述の「レンダリング・エンジンの癖」の影響が出にくいということなのでしょう。

欧文に採用した「Verdana」はマルチブラウザに強いと上に書きましたが、癖による影響がゼロというわけではない。Firefox でその癖が強く出るようです。ブラウザの違いによって行ズレが出るときは、「IEと Chrome ではズレないのに、 Firefox ではズレる」という例がほとんどです。どうもIEと Chrome のレンダリング・エンジンは「Verdana」を同じように表示する傾向があり、Firefox はそこから外れている。

firefoxそして近年、Chrome に押されて、Firefox の利用者はどんどん減っています。オペ対訪問者のユーザ分布はこちらのグラフの通り。Firefox 利用者はわずか 3.5% です。一方 Chrome は 26.5% まで伸ばして、実質 WinOSユーザのデフォルト・ブラウザとなりつつあり、無視できなくなっています。(直近1カ月の統計)

ヴァーダナ・メイリオ化の作業は今後1年ほどかかると思われます。160タイトル分のページを全部マニュアルで調整することになります。3種類のブラウザすべてでズレなく調整するのは手間がかかりすぎるし、3.5% のユーザのためにそこまでするのは効率が悪すぎます。

私は90年代にパソコンでネットに初めて接続してからこのかた、ずっとMozzilla系ブラウザを愛用してきました。今はもちろん Firefox Quantum です。Chrome よりも遥かに優れていると思うのですが、世間一般の評価はそうではないようです。10年間推奨ブラウザとして Firefox を指定してきましたが、指定解除するしかなさそうです。(推奨ブラウザについては明日あらためて広報します)

ランキングを見る(にほんブログ村 オペラ 人気ランキング)
ランキングを見る(クラシック情報サイトボーダレスミュージック)

にほんブログ村 英語ブログ 英語 通訳・翻訳へ

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
オペラ

オペラ

オペラ




オペラ対訳プロジェクト


オペラ対訳完成


その他対訳完成


オペラ配役プロジェクト


リンク


10周年にしてプチ・リニューアルしてみる(2) オペラ対訳プロジェクト広報室/BIGLOBEウェブリブログ
文字サイズ:       閉じる