読みやすい日本語のSafariにしておく

些細なことなのだが、前々から気になっていたことがある。この日記をSafariで見たとき、以下のように表示されることがある。

ホームベーカリー観察日記 - ザリガニが見ていた...。

気になるのは→の部分。句読点や小さな「っ」が行頭に表示されてしまっている。普段何気なく読んでいる本や雑誌では、決してこのような表示になることはないはず。紙媒体では、当たり前のルールとして、さり気なく、でも徹底されている禁則処理。なのに、日本語のWebページをSafariで見ると「あれれ？」な表示になってしまうことがよくある。

ちなみに、Firefoxでは禁則処理が正常に働いて、以下のような表示になった。

ホームベーカリー観察日記 - ザリガニが見ていた...。

しかし、Google Chromeでは、Safariと同様に句読点や小さな「っ」が行頭に表示されてしまっている。
WebKit系ブラウザの問題なのだろうか？
面白いのは、はてなダイアリーのテーマによっても、禁則処理が有効・無効な場合があること。
自分が利用しているdeltaベースのテーマだと、Safariの禁則処理は無効になる。
一方、CSSを全く設定せずに日本語テキストを書いた場合は、Safariの禁則処理は有効になる。
deltaテーマは、禁則処理を無効にするCSSを設定しているのだろうか？

対策1：自分の日記にスタイルシートを追加する

自分の日記について、日本語の禁則処理を有効にするには、管理 >> デザイン >> スタイルシートに以下の設定を追記すれば良さそう。

 * {word-break: normal;}

対策2：ユーザースタイルを設定する

しかし、Safariで日本語の禁則処理が無効になるデザインは、はてなや他のブログにもある。
すべてのページでFirefoxのように、しっかり禁則処理を有効にして、見栄えよく表示したい。
そんな時は、Safari >> 環境設定... >> 詳細 >> スタイルシート：を設定すれば良さそう。

~/書類/myStyle.css として保存したテキストファイルを、スタイルシートとして指定している。

 * {word-break: normal !important;}

!importantルールを追記している。

対策3：長いURLも適切に表示する

さらに、英数字が羅列するような長いURLや英単語の表示が、指定された横幅をオーバーしてしまう対策もしてみる。
サンプルページ：http://builder.japan.zdnet.com/story_media/20382786/samp01.html

現状バージョン

 * {word-break: normal !important;}

対策バージョン（word-wrap: break-wordを追記）

 * {word-break: normal !important; word-wrap: break-word;}

対策4：テキストエリアの表示

はてなダイアリーの編集モードでは、入力した文字が大き過ぎて、全体を見渡す時に不便を感じる。
特に、自分のページは箇条書きが多いので、できることなら改行無しの1行で読めた方が見通しが良くなる。

こんな状況の時も、ユーザースタイルは大活躍する。
~/書類/myStyle.css に以下のスタイル設定を追記した。

textarea {
  font-family:"Hiragino Kaku Gothic ProN" !important;
  color:#444 !important;
  font-size:9pt !important;
  line-height:1.5em !important;
}

対策5：特定のページのみユーザースタイルを適用する

対策4のユーザースタイルを適用すると、すべてのページのテキストエリアに影響する。
しかし、それではテキストエリアを丁寧にデザインしているページでは、見栄えが悪くなってしまう可能性もある。
とりあえず、はてなダイアリーに限定してスタイル設定をしたい。
そんな要望は、SafariStand がシンプルに叶えてくれる。

Safariで、はてなダイアリーの編集ページを開いて...
Stand >> SafariStand Setting >> Site Alteration を開く。
[追加]ボタンを押して、以下のように設定した。

事前に、対策4のスタイル設定を~/Library/Safari/Stand/UserStyleSheets/hatenaStyle.cssとして保存しておいた。

これで、はてなダイアリーの編集モードだけが小さめのヒラギノ角ゴシックで、適度な行間を保って表示された。

対策6：Gmailをヒラギノ角ゴシックに統一する

現在のGmailが指定するフォントは、Araiのようだ。すると、実際の表示では、英数字がArai、日本語（2バイト）文字がヒラギノ角ゴシックで表示される。
好みもあると思うが、メールでやり取りする内容については、英数字も含めてヒラギノ角ゴシックで表示された方が統一感があって読みやすい気がする。

body.cP, body.cP td, body.cP input, body.cP div, body.cP h1, span.v1 { 
  font-family:"Hiragino Kaku Gothic ProN", sans-serif !important;
}

上記スタイル設定を~/Library/Safari/Stand/UserStyleSheets/gmailStyle.cssとして保存した。
そして、対策5と同様の手順で、今度はgmail専用の設定とした。
- クラス属性にcPが指定されているので、Safari標準のユーザースタイルとしてもOKだと思う。

以上で、Safariの表示が多少也とも読みやすくなった！