> CSS > pixiv小説のように縦書きの文章の中でCSSで縦中横に表示してみる。

pixiv小説のように縦書きの文章の中でCSSで縦中横に表示してみる。

「縦中横(たてちゅうよこ)」とは、縦組みの文書の中で横組みで表示することです。

CSSで縦書きにした文章中に、半角英数や記号が含まれる場合は、下図のように横倒しで表示されてしまいます。

2015110601.png

 

「!」や「?」などの全角記号や「a~Z」、「0~9」の全角英数は読める方向で表示されますが、「!」や「?」などの半角記号、「a~Z」・「0~9」の半角英数は倒れてしまっています。
これを読める向きに直すのが、「縦中横」です。

HTML例

<p>縦書き文章の中で横組みに表示したい記号や半角英数に「<span class="tcy">!?</span>」のようにtcyクラスのspanタグで囲んでいます。</p>

CSS例

.tcy{
    text-combine: horizontal;
    -webkit-text-combine: horizontal;
    -epub-text-combine: horizontal;
    line-height: 1;
    letter-spacing: 1;
    -ms-writing-mode: lr-tb;
    -webkit-writing-mode: horizontal-tb;
    -o-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
}

text-combine: horizontal;で、縦中横を指定しています。
ブラウザのバージョンによってはそれでも効かない場合があるので、writing-modeで横組みを設定しています。

このクラスを利用すると、

2015110602.png

上記のように半角英数の記号を横組みで表示することができます。

※freoで登録された値に縦中横クラスを自動的に付与して表示するには、「縦中横クラス付与smarty用プラグイン」を利用してください。

関連記事

この記事が気に入ったらシェアしてください

関連記事

コピペで使えるCSSだけでつくる矢印・三角形

コピペで使えるCSSだけでつくる矢印・三角形

CSSだけで 電話番号のリンクを PC・タブレット時には無効化し スマートフォン時にのみ発信させる方法

CSSだけで 電話番号のリンクを PC・タブレット時には無効化し スマートフォン時にのみ発信させる方法

同じSVGを画面内で複数回使用してCSSで色やサイズを変更する方法

同じSVGを画面内で複数回使用してCSSで色やサイズを変更する方法

orderでflexブロック内のアイテムの並び順を任意に変更する方法

orderでflexブロック内のアイテムの並び順を任意に変更する方法

flex-directionでflexブロック内のアイテムの並び方を変更する方法

flex-directionでflexブロック内のアイテムの並び方を変更する方法

Youtubeの埋め込み用タグをレスポンシブに対応させる方法

Youtubeの埋め込み用タグをレスポンシブに対応させる方法

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)