Nov. 29th,2020
プロパティについて
概要
| 初期値 | “writing-mode: horizontal-tb;” |
| 適用対象 | テーブルの列グループ、行グループ、列、行、ルビ・ベース・コンテナ、ルビ・アノテーション・コンテナを除くすべての要素 |
| 継承 | Yes |
| パーセント値 | パーセント値は指定できません |
| 計算値 | 指定した値 |
| アニメーション | 不可 |
“writing-mode”プロパティは要素の書字モードを指定します。
書字モードは要素内のテキストの書字方向が横書きか縦書きかに加えてブロック・フロー方向(ブロック・レベルのボックスや行ボックスが並べられる方向)を変更します。
“writing-mode”プロパティによって書字モードを変更すると一部のレイアウトの規則は適用される方向が変更されます。
“writing-mode”プロパティをルート要素(HTMLでは“body”要素でも可)に適用すると文書全体の書字モードが変更され、ビューポートのスクロールする方向にも影響します。
サンプルコード
p { writing-mode: vertical-rl;}
値
| 値 | 説明 |
|---|---|
| horizontal-tb | ブロックのフロー方向は上から下で、テキストは水平に流れます (横書き。) |
| vertical-rl | ブロックのフロー方向は右から左で、テキストは垂直に流れます (右縦書き。英数字などの縦書きしない字は横倒しになります。) |
| vertical-lr | ブロックのフロー方向は左から右で、テキストは垂直に流れます (左縦書き。英数字などの縦書きしない字は横倒しになります。) |
sideways-rl |
ブロックのフロー方向は右から左で、テキストは横倒しで垂直に流れます (縦書き可能な字も横倒しになります。) |
| sideways-lr |
ブロックのフロー方向は左から右で、テキストは横倒しで垂直に流れます (縦書き可能な字も横倒しになります。) |
| 共通キーワード |
縦書き
p {
writing-mode: vertical-rl;
}
ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。
p {
writing-mode: vertical-lr;
}
ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。
p {
writing-mode: sideways-rl;
}
ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。
p {
writing-mode: sideways-lr;
}
ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。
