縦書するCSS

https://i.gyazo.com/6d8b63468d7c9828848d5894dc85b17c.png

https://gyazo.com/37abd98475eeff158f99e2ae5a087dd2

CSSの理解度が足りません。

縦中横には未対応です。

参考

により、　明朝体を使います。　なんとなく気分で。

例：

[,| 縦書きのテキスト・ブロックです。　　　　　　　　　　　　　　　　Noto Serif JP などのフォントの使用を想定しています。　　　　　　　　　　　　　　　ブロックサイズはページ幅に合わせて固定で、インデントは無視されます。テキストはブロック内で右詰めされ、行数がページ幅を超えると左側にあふれます。ブロック内で文字修飾は指定できません。　　　　　　　　　　　　　　　　改行コードを書き入れることはできませんが、空白文字（タブを含む）は行末にぶら下がって詰められるので、行の長さ以上の空白文字を挿入すれば、自動送りで改行したかのように表示されます。　　　　　　　　　　　　　　　　　自動送りされた次行の先頭で字下げを行うことはできません。段落が変わったことを明示するためには、▼などを配して新聞のコラムのような書き方にするのが良いかも知れません。]

テキストブロックのインデントにビュレットマークを出さないように！

code:style.css

.line .dot {

display: none !important;

}

code:style.css

font-family: 'Noto Serif JP','Noto Serif CJK JP','Hiragino Mincho ProN','Times New Roman','YuMincho','Yu Mincho','MS PMincho',serif;

}

.line:not(.cursor-line) .deco-\| {

-ms-writing-mode: tb-rl;

writing-mode: vertical-rl;

/* text-orientation: upright; 英数字の混成をどうするか...お好みで！　*/

text-orientation: mixed;

letter-spacing: -0.02em; /*　文字間隔をやや狭く */

white-space: pre-wrap;

font-size: 1.0em;

font-weight: 500;

line-height: 2.3em; /* 行間は広めで */

height: 20.0em; /* ブロックの高さ */

position: absolute;

right: 0;

width: 100%;

max-width: 100%;

min-width: 100%;

z-index: 1000; /* イメージなどより前に出す設定　*/

border-style: solid;

border-width: 1px;

padding: 1.2em 2.0em 1.2em 2.0em;

}

UserCSS.icon