writing mode と 4 大文字システム

はじめに

writing-mode は強力な CSS 属性で、文字を縦書きにできます（実際には何でも縦書きにできます。デフォルトのレイアウトフローを変更できるため）。例えば：

小池

泉眼无声惜细流
樹陰照水愛晴柔
小荷才露尖尖角
早有蜻蜓立上頭

Demo は：http://ayqy.net/temp/writing-mode.html

重要な役割を果たす CSS ルールは：

/* 竖直 - 从右向左 */
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;

writing-mode をデフォルトの horizontal top-to-bottom mode から vertical right-to-left mode に変更します。一見すると特殊な文字組版シーン以外では役に立たないように見えますが、実際にははるかに強力で、html 要素にこのルールを適用すると、ページ全体が右から左への縦書きモードに切り替わり、スクロール方向、ドロップダウンリストの方向なども影響を受けます

強力ですが、なぜこのものを理解する必要があるのでしょうか？

世界の言語は多様で、英語、中国語などの横書きの他に、アラビア語、ヘブライ語などの縦書きもあり、一部のシーン（例えば多言語混在）では双方向配列（bidi）が必要です
writing-mode は「CSS 世界の縦横ルールを変更でき、最も逆天な CSS 属性と言える」、「理論的には、writing-mode があれば、以前より 50% 多くのことができる」。これは無限の創造力を持つ属性で、既存のものを変更できるだけでなく、将来のものも影響を受けます。例えば margin-start/end
Flexbox と CSS Grid の理解に役立ちます

一.属性値および互換性

現在（2017-1-21）の草案から見ると、属性の選択値は以下の通り：

/* 默认 horizontal-tb */
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

デフォルトは horizontal-tb 横方向で上から下への配列で、CSS で最も基本的なルールです。要素は左から右へ、上から下へ順に配列されます。vertical-rl/lr はそれぞれ縦方向で右から左への配列、縦方向で左から右への配列を表します。残りの 2 つは、あるかないか分かりません：

This value is at-risk and may be dropped during CR.
sideways-rl：縦方向で右から左への配列、但し印刷方式（typographic mode）は横向き
sideways-lr：縦方向で左から右への配列、但し印刷方式は横向き

writing-mode 属性はまだ草案段階ですが、IE が早くからこのものを提案し、後に他のブラウザが追随したため、現在の互換性は非常に良好です：

sideways-rl | sideways-lr 現在はサポートなし
horizontal-tb | vertical-rl | vertical-lr 広くサポート、Android[3+]、iOS[5.1+]、すべて-webkit-が必要
IE[6-10] は古いバージョン値のみサポート：lr-tb | rl-tb | tb-rl | tb-lr、その中で上記 3 つの広くサポートされているものに対応するのは lr-tb | tb-rl | tb-lr

モバイル端末はプレフィックス付きで安心して使用可能。互換性の詳細情報は Can I use writing-mode ? を参照

P.S.IE の古いバージョン値は CSS3 Text Module W3C Candidate Recommendation 14 May 2003 を参照

二.インライン方向、ブロック方向および文字方向

インライン方向：デフォルト writing-mode で、ブロックはページトップから縦方向に配列

インライン方向とはテキストフローの各行の配列方向を指し、デフォルトは左から右への配列で、タイプライター効果を想像すると、文字が一つ一つ出てくるのがインライン方向です

文字方向は文字がどちらを指すかと言うことで、大きな A を入力すると（この指し方はあまりにも明白で、矢印のよう）、文字はページトップを指しますが、異なる言語は異なる方向を指します

[caption id="attachment_1295" align="alignnone" width="625"] three concepts[/caption]

図中で、ブロック方向は上から下へ、インライン方向は左から右へ、文字方向はページトップを指します

三.4 大文字システム

CSS Writing Mode は設計上 4 大主要文字システムを満たしています：ラテン文字、アラビア文字、漢字およびモンゴル文字

1. ラテン文字システム

世界最大の文字システムで、70% の人がこれを使用してい��す。文字は左から右へ配列され、ブロック方向は上から下へ（上図参照）

ラテン文字システムは非常に大きく、ラテン文字を使用するすべての他の言語を含みます。例えば英語、スペイン語、ドイツ語、フランス語など。さらに、ラテン文字を使用しない多くの言語もラテン文字システムに属し、ギリシャ文字、キリル（Cyrillic）文字を使用するものを含みます。例えばロシア語、ウクライナ語、ブルガリア語、セルビア語など、およびブラーフミー系文字（Brahmic scripts）、例えばサンスクリット語、タイ語、チベット語など

このモードをトリガーするために CSS を通じる必要はありません。デフォルトがこうなっています。しかし、言語と配列方向を宣言するのが最善です。例えば：

<html lang='en-gb' dir='ltr'>

ブラウザに内容が英国版英語で、左から右へ配列されることを知らせます

2. アラビア文字システム

アラビア語、ヘブライ語はインライン方向が右から左への少数派で、RTL と呼ばれます

インライン方向は依然として横向きで、ブロック方向は上から下へ、文字方向は上向きです：

[caption id="attachment_1296" align="alignnone" width="625"] arabic system[/caption]

テキストフローが右から左へなだけでなく、レイアウト関連のすべてのものが右から左へで、右上から始まり、目は右から左へ閲覧するため、一般に RTL サイトのレイアウトは LTR と類似しており、水平方向に反転するだけです

RTL 下の CSS レイアウト

一般に RTL をサポートするには、多くの準備作業が必要です。例えばすべての margin-left/right, padding-left/right, float: left/right を見つけ、マークを付け、左右を逆にするスタイルシートをもう 1 つ作成します。この作業は退屈でエラーが発生しやすく、CSS はレイアウトコードを 1 回だけ書き、簡単な命令で言語方向を簡単に切り替えられる方法を提供する必要があります

新しい CSS レイアウトシステムはこれを行っています。Flexbox、Grid および Alignment は start と end を使用して left と right を置き換えます。これで文字システムに基づいてレイアウトを定義でき、方向を簡単に切り替えられます。例えば justify-content: flex-start; justify-items: end; margin-inline-start: 1rem はもう動かす必要がありません。この方式の方が良く、start と end で left と right を置き換えるのは混乱しますが、多言語プロジェクトに有益で、web 大環境にも有益です

したがって、インライン方向、ブロック方向を理解し、start と end を使用するのに少し時間をかければ、すぐに慣れます

方向の宣言方法

HTML で方向を宣言すべきで、CSS 内ではありません。こうすれば CSS の読み込みが完了していなくても、ブラウザは内容を正しく表示できます。主に html 要素を通じて完了し、同時に言語も宣言すべきです。例えば：

<html lang='ar' dir='rtl'>

ページ内容がアラビア語で、RTL レイアウトを使用することを表します

ラテン文字システムでもアラビア文字システムでも、writing-mode 属性は同じを使用すべきです：

writing-mode: horizontal-tb;

インラインテキストフローはすべて横向きで、ブロック方向もすべて上から下へで、CSS で表すと horizontal-tb で、デフォルトの writing-mode なので、手動で宣言する必要はありません。他のものをオーバーライドしたい場合またはより高いカスケード優先度を欲しい場合を除きます。したがって、以前作成したすべてのページに 1 行があると想像できます：

html {
    writing-mode: horizontal-tb;
}

3. 漢字システム

漢字システムは CJK 言語を含み、中国語、日本語、韓国語などで、2 つのレイアウト方式があり、時々一緒に現れます

多くの CJK 文字レイアウトはラテン言語と同じで、ブロック方向は上から下へ、インライン方向は左から右へです。レイアウトに必要な CSS は上記と同じ：

section {
    writing-mode: horizontal-tb;
}

または何も書かないで、デフォルトがこうなっています

さらに、漢字システムは縦方向に配列することもでき、インライン方向は縦向きで、ブロック方向は右から左へです。図の通り：

[caption id="attachment_1297" align="alignnone" width="625"] han system[/caption]

横向きテキストフローは左から右へ、縦向きテキストフローは右から左へであることに注意

ページ全体のデフォルト設定はシーンに依存しますが、各要素、各行の見出し、各セクション、各記事はデフォルトと逆に設定できます。例えば、デフォルト設定を horizontal-tb にし、縦向き要素に設定：

div.articletext {
    writing-mode: vertical-rl;
}

またはページのデフォルトを縦方向配列に設定し、一部の要素に horizontal-tb を設定：

html { 
    writing-mode: vertical-rl;
}
h2, .photocaptions, section {
    writing-mode: horizontal-tb;
}

ページに横向きスクロールがある場合、writing-mode はページレイアウトを左上から開始し、右へスクロール（horizontal-tb）、またはページレイアウトを右上から開始し、左へスクロールして溢れた部分を表示

writing-mode を切り替える例があります：文字の物語、面白いのは切り替えがセレクターを通じて実現されていることです（日常的に猥褻にコードを扒ぐ）：

.c-switcher:not(:checked)~main figure {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center
}

.c-switcher:checked~main figure {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

4. モンゴル文字システム

モンゴル文字も縦向き文字言語で、テキストはページ上で縦方向に配列され、漢字システムと同じです。2 つの主要な違いがあります

まずブロック方向が異なり、モンゴル文字ブロック要素は左から右へ配列さ��ます。ブロック方向は画面左から開始し、右へ配列。インライン方向は上から下へで、RTL テキストと非常によく似ており、このページを反時計回りに 90 度回転した様子を想像します。

もう 1 つの違いは、文字方向が上下逆で、モンゴル文字のトップは左を指すのではなく（ブロック方向の開始辺を指す）、右を指します。図の通り：

[caption id="attachment_1298" align="alignnone" width="625"] mongolian system[/caption]

writing-mode: vertical-lr はこの状況を処理するためで、モンゴル文字のために量身定做されたので、writing-mode: vertical-lr の実際効果は想像と異なる可能性があります：

[caption id="attachment_1299" align="alignnone" width="625"] vertical actual[/caption]

vertical-rl は確かにページを時計回りに 90 度回転した結果で、vertical-lr は反時計回りに 90 度回転した後、さらに文字方向を反転します。属性値の意味は文字システムの表現に基づいて定義され、字面通りではありません

例外状況もあり、writing-mode: vertical-rl/lr で、ラテン文字はすべて時計回りに回転し、writing-mode では反時計回りに回転できません

モンゴル文字内容を組版する場合、CSS 適用方式は漢字システムと同じで、html 要素上でページ全体を設定するか、指定要素を宣言：

section {
    writing-mode: vertical-lr;
}

writing-mode を横向き言語ではない平面设计効果に使用する場合、writing-mode: vertical-lr は役に立たない可能性があります。テキストが改行されると、配列方式が非常に奇妙になります。したがって、vertical-rl を頻繁に使用し、vertical-lr はあまり使用しない可能性があります

四.Writing Mode と平面设计

では、writing-mode を使用して英語タイトル行を横向きにするには？transform: rotate() で搞定できます（vertical-rl/lr は文字方向を反転するため、vertical-rl + rotate で模擬が必要）

/* 顺时针旋转 90 度效果 */
h1 {
    writing-mode: vertical-rl;
}

/* 逆时针旋转 90 度效果 */
h1 {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: right;
}

ここで writing-mode: vertical-lr を使用しないのは、前述の改行時にテキスト配列が非常に奇妙になるため（実際にテストして奇妙なところを発見せず、何を指すのか分からない）、したがって vertical-rl + rotate で実現し、text-align: right; はテキストをコンテナトップに貼り付けるためで、ここでは vertical-rl に対するもので、hack と算是します

さらに、text-orientation: upright; と組み合わせて文字方向を上向きのままに保てます

これでセクションタイトルをサイドに縦書きにでき、読書体験は「おそらく」より良くなります

五.Writing Mode テクニック

Writing Mode を利用して横向きルールを縦向きに移し、例えば margin: auto 0; で縦方向中央揃えを実現：

/* 容器 */
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
/* 要素 */
height: 100px;
margin: auto 0;

またはより乱暴に：

/* 容器 */
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
text-align: center;
/* 要素 */
display: inline-block;
text-align: left;

しかし、transfrom のある時代で、一部のテクニックはあまり実用的ではありません。例えば：

縦向き text-indent でボタン押下時に文字下沉を実現
縦向き iconfont で展開/収納矢印を実現

text-indent は多字の場合に改行し、縦向きフォントは時計回りに回転しかできず、反時計回りに回転できません

transform がなければ、writing-mode はレイアウト効果で大放光彩します。例えば [IE6+] 環境で、writing-mode は魔法のようです

しかし、writing-mode は確かに 50% の可能性を増やし、もう 1 つの扉です