I'll be NET 】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > 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用プラグイン」を利用してください。

関連記事

記事移動

関連記事

iphone の safari でアドレスバーや標準メニューが消えない時に確認した方がいいCSSの設定

【CSS3】word-wrap:break-word;とword-break:break-allで文字を折り返して表示する方法

pixiv小説のようにCSS3だけでHTMLを縦書き表示してみる。

欲しいアイコンだけ選んでWEBフォント化してくれる便利サイト【Fontello】

WEBデザイナー必見!CSSジェネレータ集

CSS3でマウスオン(:hover)時に画像を拡大・縮小する方法

Comment Form

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

ユーティリティ

創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)【I'll be NET】

プロフィール

author:I'll be NET

since:2014.01.01

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。

more

Feed