【縦書き h2vR.js】久々に少しだけ修正を加えました。

PC版へ 2017年05月04日

さて、しばらく放置気味だった、ウェブページで縦書きレイアウトを実現するJavaScript・ h2vR.js です。

いろいろと細かい不具合が溜まっていたので、修正してみました。

【ダウンロード】

修正点は以下のとおりです。

  1. Chrome などの Blink/Webkit系ブラウザで、「云々」の「々」など、いわゆる "踊り字" が行の右側にはみ出して表示される不具合の解消。
    　　→ こちらの記事を参照ください
  2. 縦書き領域内の要素に、スタイル box-sizing: border-box; が適用されている場合に縦書きレイアウトが崩れる不具合の解消。
  3. 表示フォントの指定（ゴシック体/明朝体のどちらで表示するか）が上手く適用されない場合があったのを修正。
  4. 表示フォントに、Noto Sans CJK JP（ゴシック体）および Noto Serif CJK JP（明朝体）の指定を追加。

今回は、すべてスタイルシート（h2vR.css）のみの修正です。

ですので、これまで h2vR.js ver4.2.3 をお使いならば、スタイルシート（h2vR.css）の差し替えだけで大丈夫です。

※最新版の h2vR.css だけをダウンロードしたい場合は
　　　→ こちら（h2vR424.css.zip）

修正点の 4 番目について補足です。

h2vR.js では、縦書き領域内で使用するフォントについて、スタイルシートで指定しています。

これらのフォントは、Windows / MacOS / iOS / Android / Linux の各システムに標準でインストールされていて、且つ、縦書きにした場合にレイアウトが崩れないようなものを選んでいます。

で今回、最近の Android や Ubuntu に標準で含まれるようになったゴシック体フォント・Noto Sans CJK JP と、これから標準搭載される可能性のある明朝体フォント・Noto Serif CJK JP を追加してみたのです。

実際の設定は h2vR.css の末尾近く、以下のような具合。

.h2v{
font-family:'ヒラギノ角ゴ ProN','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ Pro','Hiragino Kaku Gothic Pro','Noto Sans CJK JP','メイリオ','Meiryo','ＭＳ ゴシック','MS Gothic','SimHei','HiraKakuProN-W3','STHeitiJ-Medium','TakaoExゴシック','TakaoExGothic','MotoyaLCedar','Droid Sans Japanese','Droid Sans Fallback',monospace;
}

.h2vr_mincho,
.h2vr_mincho .h2v{
font-family:'ヒラギノ明朝 ProN','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','Noto Serif CJK JP','ＭＳ 明朝','MS Mincho','SimSun','HiraMinProN-W3','STHeitiJ-Medium','TakaoEx明朝','TakaoExMincho','MotoyaLCedar','Droid Sans Japanese','Droid Sans Fallback',monospace; }

つまり、「まずはヒラギノ。無ければ Noto、それも無ければ メイリオ、MSなんちゃら、Takao ...」と、ページ閲覧者のシステム内にあるフォントを探ってゆくわけです。

このフォントの並び順は、お好みで変更しても大丈夫です。h2vR.js 自体の動作には影響ありません。

また、Noto Sans のウェブフォント版が Google によって公開されています。

なので、このウェブフォントを読み込む設定にしてやれば、ページ閲覧者の端末にフォントがインストールされていようがいまいが、縦書き領域を半ば強制的に Noto Sans で表示させることも、多分できます。

方法は、上記ページを参考にして…

ページの <head> 〜 </head> 内で、h2vR.css を読み込む前に

<style>
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
</style>

を記述。

更に、h2vR.css のフォント指定部分（ファイルの最後のほうです）を以下のように改変。

.h2v{
font-family: 'Noto Sans Japanese', monospace;
}

いまのところ、Noto Serif Japanese のウェブフォント版は（公式ページでは）公開されていないので、明朝体のほうは自力でどうにかするか、ちょっと保留にしておくか、というところ。

ということで。よろしくどうぞ。

関連記事

コメント

現在、コメント機能は停止しています。