• 目次
  • h2vR.js

    チュートリアル

    いろいろな表現

    「縦中横」表示

    縦書き時に、例えば !! を横に並べて表示したい場合(いわゆる "縦中横" 表示を行いたい場合)、その文字列を

    • <span class="h2vr_tcy"> 〜 </span>

    で囲みます。

    ルビ

    h2vR.jsは、縦書き時のルビ表示にも対応しています。

    rubyタグ周りのHTMLコーディングなどについては 各ウェブブラウザでのルビ実装状況 - freefielder.jp を参照してください。

    傍点

    文字(列)に傍点を打ちたい場合は、rubyタグを使用するのが手っ取り早い方法です。

    傍線

    スタイルシートで text-decoration:underline; を用いて文字列に下線(傍線)を引くと、縦書きに変換された場合に意図しない表示となります。

    そこで、縦書き時に文字(列)に傍線を引くために、h2vR.js ではいくつかのクラスを定義しています。

    • クラス:bousen_solid_h2vr … 通常の傍線
    • クラス:bousen_double_h2vr … 二重傍線
    • クラス:bousen_dashed_h2vr … 破線の傍線
    • クラス:bousen_dotted_h2vr … 点線の傍線
    【HTML】
    <div class="h2vr_20" style="font-size:16px;line-height:1.5em;">
    <p>以上のサンプルをまとめて見てみましょう。</p>
    <p>「縦中横」は、例えば半角数字などを縦書き内で横並びに表示したい場合に使用します。</p>
    <div class="sample">
    それでは<span class="h2vr_tcy">23</span>日にお会いできますか<span class="h2v_tcy">!?</span>
    </div>
    <p>ルビ表示や、ルビを流用した傍点の打ちかたです。</p>
    <div class="sample">
    ルビは<ruby><rb>普</rb><rt>ふ</rt><rb>通</rb><rt>つう</rt></ruby>にHTMLコーディングすればよろし。<br />
    ルビテキストの代わりに ﹅ を打てば、<ruby><rb>傍</rb><rt>﹅</rt><rb>点</rb><rt>﹅</rt></ruby>っぽくなります。<br />
    </div>
    <p>様々な傍線のサンプル。</p>
    <div class="sample">
    まずは<span class="bousen_solid_h2vr">通常の傍線</span>です。<br />
    続いて<span class="bousen_double_h2vr">二重傍線</span>や<span class="bousen_dashed_h2vr">破線のやつ</span>や<span class="bousen_dotted_h2vr">点線のもの</span>。<br />
    </div>
    </div>
    【表示】

    以上のサンプルをまとめて見てみましょう。

    「縦中横」は、例えば半角数字などを縦書き内で横並びに表示したい場合に使用します。

    それでは23日にお会いできますか!?

    ルビ表示や、ルビを流用した傍点の打ちかたです。

    ルビはつうにHTMLコーディングすればよろし。
    ルビテキストの代わりに ﹅ を打てば、っぽくなります。

    様々な傍線のサンプル。

    まずは通常の傍線です。
    続いて二重傍線破線のやつ点線のもの

    最終更新:2015.05.31