Nov. 29th,2020
プロパティについて
概要
| 初期値 | “text-orientation: mixed;” |
| 適用対象 | テーブルの列グループ、行グループ、列、行を除くすべての要素 |
| 継承 | Yes |
| パーセント値 | パーセント値は指定できません |
| 計算値 | 指定した値 |
| アニメーション | 不可 |
“text-orientation”プロパティは要素内のテキストの文字の向きを指定します。
“text-orientation”プロパティは垂直書字モード(縦書き)でのみ効果があり、水平書字モード(横書き)では効果はありません。
“writing-mode: vertical-rl;”もしくは“writing-mode: vertical-lr;”の垂直書字モードでは文字の持つ固有の向きが横書きのみの文字、例えばラテン文字や数字は横倒しで表示されますが、“text-orientation”プロパティによって設定を変更することができます。
サンプルコード
p { text-orientation: vertical-rl;}
値
| 値 | 説明 |
|---|---|
| mixed | 垂直書字モードの場合、横書きのみの文字は本来の向きから時計回りに90°回転して配置され、縦書きできる文字は本来の向きで表示されます (ラテン文字や数字は横倒しで配置されます。) |
| upright | 垂直書字モードの場合、横書きのみの文字も縦書きできる文字も本来の向きで配置されます (ラテン文字や数字も漢字や仮名と同様に直立した向きで配置されます。“direction: ltr;”として扱われます。) |
| sideways | 垂直書字モードの場合、すべての文字が本来の向きから時計回りに90°回転して配置されます |
| 共通キーワード |
ブラウザは後方互換性を考慮して“text-orientation: sideways-right;”は“text-orientation: sideways;”として扱うことができます。
文字の向きを指定する
p {
writing-mode: vertical-rl;
text-orientation: mixed;
}
ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。
p {
writing-mode: vertical-rl;
text-orientation: upright;
}
ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。
p {
writing-mode: vertical-rl;
text-orientation: sideways;
}
ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。
