縦書き変換機能について

疑似的に縦書き表示を実現する機能について解説します。

縦書き変換を利用する方法

 [縦書き化する部分] 

以下のオプションを指定できます。「縦書き」フィールドタイプでは「詳細設定」で設定できます。

fontsize="16": 文字の大きさをピクセルで指定します。この例では 16px。デフォルトで 14px。
height="336": 一段の高さをピクセルで指定します。この例では 336px。デフォルトで21文字分。
margin="8": 行間隔をピクセルで指定します。この例では 8px。デフォルトで1/2文字分。
colmargin="32": 段間隔をピクセルで指定します。この例では 32px。デフォルトで1文字分。
width="640": 一段横幅をピクセルで指定します。この例では 640px。デフォルトでは幅の指定なし。
clear="1": 文末で回り込みを解除する場合設定します。
rotatedisabled="1": 長音符を横書き長音符の回転で表示せず「｜」で代用する場合設定します。長音符を横書き長音符の回転+左右に反転(transform: rotate(90deg) scale(1.0,-1.0);)で表示できるのは、Safari3.1以降、Firefox3.1以降、Opera10.5以降です。InternetExplorer5.5以降では「writing-mode:tb-rl;」で縦書き表示にします。これら以外の環境でも長音符を疑似縦書き化する場合このオプションを有効にします。
ltrnum="1": 数字は横書きにする場合設定します。
blockenabled="1": すべてのブロック要素を保持する場合設定しします。ブロック要素ごとに改段します。

縦書き化すると、「すべてのブロック要素を保持する」よう指定しない限り、見出し <h1-6> 以外のブロック要素は、ブロックの枠を外され文字列として扱われます。

縦書き化対象外の要素

常に保持されるブロック要素

<h1-6>

縦中横にする class 名

<span class="ltr"> (ブロック要素に設定するとそのブロックは縦書き化対象外となります)

傍点

<strong> 要素中の日本語文字列には傍点がつきます。

点線

<em> 要素には右側に点線がつきます。

リンクの下線

<a> 要素に下線が設定されていても無視されます。

くの字点

「／＼」または「＼／」、濁点がつく場合は「／"＼」または「＼"／」とします。縦書き変換時にくの字点に変換されます。

2文字以内の日本語に挟まれた英字または数字

縦中横で表示されます。

ルビ・ふりがな

閉じタグを省略することはできません。: <ruby><rb>振り仮名</rb><rp>(</rp><rt>ふりがな</rt><rp>)</rp></ruby>
正しくルビを振るには、文字ごとに区切ります。区切らない場合、この例では「のは・ら」とルビが振られます。: <ruby><rb>野</rb><rb>原</rb><rp>(</rp><rt>の</rt><rt>はら</rt><rp>)</rp></ruby>

1.5文字分字下げされる要素

<ul>, <ol> では style 属性で「list-style-type」を設定するか、type 属性を設定することで、マーカーを指定することができます。

style 属性で指定されたスタイルはある程度縦書き表示に反映されます。

float: left | right: 幅と高さが指定された <img> および <object> のみスタイルが反映されます。「left」で上寄せ、「right」で下寄せとなります。
text-align: left | center | right: ブロック要素に指定することができます。「left」で上寄せ、「center」で中央揃え、「right」で下寄せとなります。
text-decoration: underline;: 右側に直線がつきます。
text-decoration: overline;: 左側に直線がつきます。
margin, padding, border: インライン要素に指定できます。設定が時計回りに90度回転します。top→right、right→bottom、bottom→left、left→top
font-size: px | em;: px または em で指定します。「font」でまとめて指定することはできません。
clear: right;: ブロック要素（<div>,<hr> 等）に設定すると改段します。