From 058a39e619c4d318dec269b96a81903fbf915022 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 4 Oct 2021 12:24:10 +0900 Subject: Web/CSS/text-orientation を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/08/13 時点の英語版に同期 --- files/ja/web/css/text-orientation/index.md | 109 +++++++++++++---------------- 1 file changed, 49 insertions(+), 60 deletions(-) diff --git a/files/ja/web/css/text-orientation/index.md b/files/ja/web/css/text-orientation/index.md index 268ca05408..d8d66906d0 100644 --- a/files/ja/web/css/text-orientation/index.md +++ b/files/ja/web/css/text-orientation/index.md @@ -4,22 +4,23 @@ slug: Web/CSS/text-orientation tags: - CSS - CSS プロパティ - - CSS 書字方向 + - CSS Writing Modes - Reference + - recipe:css-property - 日本語処理 +browser-compat: css.properties.text-orientation translation_of: Web/CSS/text-orientation --- -
{{CSSRef}}
+{{CSSRef}} -

text-orientation は CSS のプロパティで、行内のテキストの向きを設定します。このプロパティは縦書きのテキスト ({{cssxref("writing-mode")}} が horizontal-tb 以外の場合) でのみ効果があります。これは縦書きを使用する言語の表示を制御したり、縦書きの表見出しを作成したりするのに有用です。

+**`text-orientation`** は [CSS](/ja/docs/Web/CSS) のプロパティで、行内のテキストの向きを設定します。このプロパティは縦書きのテキスト ({{cssxref("writing-mode")}} が `horizontal-tb` 以外の場合) でのみ効果があります。これは縦書きを使用する言語の表示を制御したり、縦書きの表見出しを作成したりするのに有用です。 -
{{EmbedInteractiveExample("pages/css/text-orientation.html")}}
+{{EmbedInteractiveExample("pages/css/text-orientation.html")}} - +## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 text-orientation: mixed;
 text-orientation: upright;
 text-orientation: sideways-right;
@@ -29,77 +30,65 @@ text-orientation: use-glyph-orientation;
 /* グローバル値 */
 text-orientation: inherit;
 text-orientation: initial;
+text-orientation: initial;
 text-orientation: unset;
-
+``` + +`text-orientation` プロパティは、以下のリストから単一のキーワードとして指定されます。 -

text-orientation プロパティは、以下のリストから単一のキーワードとして指定されます。

+### 値 -

値

+- `mixed` + - : 横書き用の文字を右に 90° 回転させ、縦書き用の文字は自然に配置します。既定値です。 +- `upright` + - : 横書き用の文字を、縦書き用の字形と同様に自然に (正立で) 配置します。なお、このキーワードはすべての文字を左書きと見なします。 {{cssxref("direction")}} の使用値は `ltr` に強制されます。 +- `sideways` + - : 全行を横書きで書いて 90° 回転したように配置します。 +- `sideways-right` + - : `sideways` の別名です。これは互換性のために維持されています。 +- `use-glyph-orientation` + - : SVG 要素上で、非推奨の SVG プロパティ `glyph-orientation-vertical` と `glyph-orientation-horizontal` の値を使用します。 -
-
mixed
-
このキーワードは、横書きのみの文字を右に 90°回転させ、縦書き文字のグリフは自然にレイアウトされます。
-
upright
-
このキーワードは、横書きのみの文字を、縦書き文字と同様に自然にレイアウト (正立) させます。このキーワードは、すべての文字が ltr (左から右へ) で書かれているものとみなすので注意してください。これは、ユーザ側でどのように設定されていても、対象のテキストの {{cssxref("direction")}} に ltr が指定されているものとします。
-
sideways
-
このキーワードは、全行を横書きで書いて 90°回転したようにレイアウトします。{{cssxref("writing-mode")}} が vertical-rl の場合は右へ回転、vertical-lr の場合は左へ回転します。
-
sideways-right
-
これは、互換性を維持するためのキーワードであり、sideways の別名です。
-
use-glyph-orientation
-
SVG 要素上で、このキーワードは、非推奨の SVG プロパティ glyph-orientation-vertical と glyph-orientation-horizontal の値を使用します。
-
+## 公式定義 -

形式文法

+{{CSSInfo}} + +## 形式文法 {{csssyntax}} -

例

+

例

-

HTML

+### HTML -
<p>Lorem ipsum dolet semper quisquam.</p>
+```html +

Lorem ipsum dolet semper quisquam.

+``` -

CSS

+### CSS -
p {
+```css
+p {
   writing-mode: vertical-rl;
   text-orientation: upright;
-}
- -

結果

+} +``` -

{{EmbedLiveSample('Examples')}}

+### 結果 -

仕様書

+{{EmbedLiveSample('Examples')}} - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Writing Modes', '#text-orientation', 'text-orientation')}}{{Spec2('CSS3 Writing Modes')}}初回定義
+## 仕様書 -

{{cssinfo}}

+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

{{Compat("css.properties.text-orientation")}}

+{{Compat}} -

関連情報

+## 関連情報 - +- 他の縦書きに関連する CSS プロパティ: {{cssxref("writing-mode")}}, {{cssxref("text-combine-upright")}}, {{cssxref("unicode-bidi")}} +- [CSS 論理的プロパティ](/ja/docs/Web/CSS/CSS_Logical_Properties) +- [縦書きテキストのスタイル付け (中国語、日本語、韓国語、モンゴル語)](https://www.w3.org/International/articles/vertical-text/) +- 広範なブラウザーの対応状況のテスト結果:  -- cgit v1.2.3-54-g00ecf