縦書きのカスタマイズ

行間の調整

吾輩わがはいは猫である。名前はまだ無い。

　どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

カスタマイズ / 追加CSSに追加

.writing-mode-mix .entry-content .d-tate{
 line-height:3;
}

フォント

わがはいはねこである。なまえはまだない

　どこでうまれたかとんとけんとうがつかぬ。なんでもうすぐらいじめじめしたところでニャーニャーないていたことだけはきおくしている。

ヘッダーでフォントの読み込み

<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet" />

カスタマイズ / 追加CSSに追加

.writing-mode-mix .entry-content .wf-hannari {
 font-family: "Hannari",serif;
 font-size:24px;
}

短い縦書きの中央揃え

わがはいはねこである。なまえはまだない

<div class="centered">

<p class="d-tate wf-hannari">わがはいはねこである。なまえはまだない</p>

</div>

テキストモードで　centeredクラスで、縦書き文字列をラップしてください。

段落内での位置指定（1.483予定)

ポジショニング位置

<p class="d-tate position-bottom">ポジショニング<span class="line-bottom">位置</span></p>

.position-bottom{
 position:relative;
}
.writing-mode-standard-article .position-bottom{
 width:100%;
}
.writing-mode-mix-article .line-bottom{
 position:absolute;
}
.writing-mode-mix-article .line-bottom{
 bottom:0;
}
.writing-mode-standard-article .line-bottom{
 right:0;
}

縦書き時のスタイル、横書き時のスタイルの書き分け（1.483予定)

.writing-mode-mix-article .hello-world{
 color:red;
}
.writing-mode-standard-article .hello-world{
 color:green;
}

CSS note