縦書き設定
スタイルシートでの縦書き対応
- 縦書きを指定するスタイルシートのプロパティ
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;（Safari用ベンダープレフィックス）
-ms-writing-mode: tb-rl;（IE用ベンダープレフィックス）
- 縦書き中の半角英数字の回転。
text-orientation: mixed;
text-orientation: upright;
-webkit-text-orientation: mixed;（Safari用ベンダープレフィックス）
初期設定では、90度寝かした状態（mixed）で並ぶ。→ 0123456789abcDEF
-90度回転させて１文字づつ縦に並べる（upright）ことも出来る。→ 0123456789abcDEF
- ４ケタ以内の数字を全角１文字におさめる
text-combine-upright: all;
-ms-text-combine-horizontal: all;（ベンダープレフィックス）
→ 2021年05月01日
※このプロパティは、対応しているブラウザが少ないため動作が安定していないです。ちなみに、chromeでは効きますが、Safariでは表示されません。将来の対応拡充に期待したいです。
英文中の改行ルール
- 行末に来た単語すべてに対して単語途中で改行するかどうかを制御する
word-break: break-all;（単語途中でも強制改行）
word-break: normal;（強制改行なし）
日本語の場合は、word-break: normal; にしておかないと、句読点の直前で改行されてしまうので注意。（Safari）
- 単語ごとに改行
overflow-wrap: normal;
行長より長い単語があっても、途中で改行しない
overflow-wrap: anywhere;
単語ごとの改行を優先するが、行長より長い単語があると、単語途中で改行させる
overflow-wrap: break-word;
（anywhereと同じ動作と思われる）
- 単語途中で改行し、ハイフンを挿入する（いわゆるハイフネーション）
hyphens: auto;
欧文指定（lang="en",lang="de"）にたいして使われるもので、このブログは日本語主体で考えているので、使っていません。
