From 15794207e9497086ce2f74dc801d0935c3fc12b1 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 31 Dec 2021 10:52:02 +0900 Subject: CSS Writing Modes のプロパティを変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/direction/index.html | 99 ---------- files/ja/web/css/direction/index.md | 99 ++++++++++ files/ja/web/css/text-combine-upright/index.html | 113 ------------ files/ja/web/css/text-combine-upright/index.md | 113 ++++++++++++ files/ja/web/css/unicode-bidi/index.html | 115 ------------ files/ja/web/css/unicode-bidi/index.md | 115 ++++++++++++ files/ja/web/css/writing-mode/index.html | 223 ----------------------- files/ja/web/css/writing-mode/index.md | 223 +++++++++++++++++++++++ 8 files changed, 550 insertions(+), 550 deletions(-) delete mode 100644 files/ja/web/css/direction/index.html create mode 100644 files/ja/web/css/direction/index.md delete mode 100644 files/ja/web/css/text-combine-upright/index.html create mode 100644 files/ja/web/css/text-combine-upright/index.md delete mode 100644 files/ja/web/css/unicode-bidi/index.html create mode 100644 files/ja/web/css/unicode-bidi/index.md delete mode 100644 files/ja/web/css/writing-mode/index.html create mode 100644 files/ja/web/css/writing-mode/index.md (limited to 'files/ja') diff --git a/files/ja/web/css/direction/index.html b/files/ja/web/css/direction/index.html deleted file mode 100644 index 025c3ed6c2..0000000000 --- a/files/ja/web/css/direction/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: direction -slug: Web/CSS/direction -tags: - - CSS - - CSS Reference -translation_of: Web/CSS/direction ---- -
{{CSSRef}}
- -

CSS の direction プロパティは文章の記述方向にあわせて設定されるべきです。ヘブライ語やアラビア語のテキストでは rtl を、それ以外では ltr を使います。

- -
{{EmbedInteractiveExample("pages/css/direction.html")}}
- - - -

通常、この設定は CSS から直接行うのではなく、文書の一部として HTML の dir 属性を使うなどして行うほうがよいでしょう。

- -

このプロパティは基本的な文章の方向と {{Cssxref("unicode-bidi")}} プロパティで作られた 埋め込み (embeddings) の方向を設定します。また、テキストやブロックレベル要素のデフォルトの文字揃えや、テーブルの行内にセルが流し込まれる方向を決めます。

- -

HTML の dir 属性と違って、direction プロパティはテーブルの列からテーブルのセルに継承されません。これは CSS の継承が文書木に従うためで、テーブルセルはテーブルの列の中ではなく、行の中にあるからです。

- -

direction プロパティと {{cssxref("unicode-bidi")}} プロパティは、 {{cssxref("all")}} 短縮プロパティの影響を受けない唯一のプロパティです。

- -

{{cssinfo}}

- -

構文

- -
/* Keyword values */
-direction: ltr;
-direction: rtl;
-
-/* Global values */
-direction: inherit;
-direction: initial;
-direction: unset;
- -

値

- -
-
ltr
-
デフォルト値です。テキストと他の要素は左から右に進みます
-
rtl
-
テキストと他の要素は右から左に進みます
-
- -

インラインレベル要素で direction プロパティに効果を持たせたいときは、{{Cssxref("unicode-bidi")}} プロパティの値が embed もしくは override である必要があります。

- -

形式文法

- -{{csssyntax("direction")}} - -

例

- -
blockquote {
-  direction: rtl;
-}
-
- -

仕様

- - - - - - - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('CSS3 Writing Modes', '#direction', 'direction')}}{{Spec2('CSS3 Writing Modes')}}変更なし
{{SpecName('CSS2.1', 'visuren.html#direction', 'direction')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザ実装状況

- -
-
- - -

{{Compat("css.properties.direction")}}

-
-
- -

関連情報

- - diff --git a/files/ja/web/css/direction/index.md b/files/ja/web/css/direction/index.md new file mode 100644 index 0000000000..025c3ed6c2 --- /dev/null +++ b/files/ja/web/css/direction/index.md @@ -0,0 +1,99 @@ +--- +title: direction +slug: Web/CSS/direction +tags: + - CSS + - CSS Reference +translation_of: Web/CSS/direction +--- +
{{CSSRef}}
+ +

CSS の direction プロパティは文章の記述方向にあわせて設定されるべきです。ヘブライ語やアラビア語のテキストでは rtl を、それ以外では ltr を使います。

+ +
{{EmbedInteractiveExample("pages/css/direction.html")}}
+ + + +

通常、この設定は CSS から直接行うのではなく、文書の一部として HTML の dir 属性を使うなどして行うほうがよいでしょう。

+ +

このプロパティは基本的な文章の方向と {{Cssxref("unicode-bidi")}} プロパティで作られた 埋め込み (embeddings) の方向を設定します。また、テキストやブロックレベル要素のデフォルトの文字揃えや、テーブルの行内にセルが流し込まれる方向を決めます。

+ +

HTML の dir 属性と違って、direction プロパティはテーブルの列からテーブルのセルに継承されません。これは CSS の継承が文書木に従うためで、テーブルセルはテーブルの列の中ではなく、行の中にあるからです。

+ +

direction プロパティと {{cssxref("unicode-bidi")}} プロパティは、 {{cssxref("all")}} 短縮プロパティの影響を受けない唯一のプロパティです。

+ +

{{cssinfo}}

+ +

構文

+ +
/* Keyword values */
+direction: ltr;
+direction: rtl;
+
+/* Global values */
+direction: inherit;
+direction: initial;
+direction: unset;
+ +

値

+ +
+
ltr
+
デフォルト値です。テキストと他の要素は左から右に進みます
+
rtl
+
テキストと他の要素は右から左に進みます
+
+ +

インラインレベル要素で direction プロパティに効果を持たせたいときは、{{Cssxref("unicode-bidi")}} プロパティの値が embed もしくは override である必要があります。

+ +

形式文法

+ +{{csssyntax("direction")}} + +

例

+ +
blockquote {
+  direction: rtl;
+}
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS3 Writing Modes', '#direction', 'direction')}}{{Spec2('CSS3 Writing Modes')}}変更なし
{{SpecName('CSS2.1', 'visuren.html#direction', 'direction')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザ実装状況

+ +
+
+ + +

{{Compat("css.properties.direction")}}

+
+
+ +

関連情報

+ + diff --git a/files/ja/web/css/text-combine-upright/index.html b/files/ja/web/css/text-combine-upright/index.html deleted file mode 100644 index c7d8790ecd..0000000000 --- a/files/ja/web/css/text-combine-upright/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: text-combine-upright -slug: Web/CSS/text-combine-upright -tags: - - CSS - - CSS プロパティ - - CSS 書字方向 - - Experimental - - Reference -translation_of: Web/CSS/text-combine-upright ---- -
{{CSSRef}}
- -

text-combine-upright は CSS のプロパティで、一文字分の空間に挿入する文字の組み合わせを設定します。組み合わせたテキストが 1em の幅より広い場合、ユーザーエージェントはコンテンツを 1em の幅に収める必要があります。合成結果は、レイアウトおよび装飾においてグリフ一文字として扱われます。このプロパティは、縦書きモードでのみ効果があります。

- -

これは、日本語の縦中横 (tate-chū-yoko)、中国語の 直書橫向 として知られる効果をもたらすために使用されます。

- -
/* キーワード値 */
-text-combine-upright: none;
-text-combine-upright: all;
-
-/* Digits 値 */
-text-combine-upright: digits;     /* 2 桁の数字を垂直テキスト内に水平に収めます */
-text-combine-upright: digits 4;   /* 4 桁までの数字を垂直テキスト内に水平に収めます */
-
-/* グローバル値 */
-text-combine-upright: inherit;
-text-combine-upright: initial;
-text-combine-upright: unset;
-
- -

{{cssinfo}}

- -

構文

- -

値

- -
-
none
-
何も特別な処理をしません。
-
all
-
タイプセットのすべての文字を水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。
-
digits <integer>?
-
指定した桁数 (整数値) までの連続した ASCII 数字 (U+0030–U+0039) を水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。整数値を省略した場合の値は 2 になります。2 ～ 4 までの範囲外の整数値は不正です。
-
- -

形式文法

- -{{csssyntax}} - -

例 (digits)

- -

digits 値は、数字の桁だけを組み合わせる場合に使用し、all 値よりも必要なマークアップが少なくてすみます。現在、これをサポートしているブラウザーはあまりありません。

- -
<p lang="ja" class="exampleText">平成20年4月16日に</p>
-
- -
.exampleText {
-  writing-mode: vertical-lr;
-  text-combine-upright: digits 2;
-  font: 36px serif;
-}
- -

{{EmbedLiveSample("Example_digits", 100, 350, "https://mdn.mozillademos.org/files/12127/tate-chu-yoko.png")}}

- -

例 (all)

- -

all 値は、水平テキストにするすべての部分にマークアップする必要があります。現在、これは digits 値よりも多くのブラウザーでサポートされています。

- -
<p lang="zh-Hant">民國<span class="num">105</span
->年<span class="num">4</span
->月<span class="num">29</span>日</p>
-
- -
html { writing-mode: vertical-rl; font: 24px serif }
-.num { text-combine-upright: all }
-
- -

{{EmbedLiveSample("Example_all", 250, 300, "https://mdn.mozillademos.org/files/13096/text-combine-upright-all.png")}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}}{{Spec2("CSS4 Writing Modes")}}digits 値の追加
{{SpecName("CSS3 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}}{{Spec2("CSS3 Writing Modes")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.text-combine-upright")}}

- -

関連情報

- - diff --git a/files/ja/web/css/text-combine-upright/index.md b/files/ja/web/css/text-combine-upright/index.md new file mode 100644 index 0000000000..c7d8790ecd --- /dev/null +++ b/files/ja/web/css/text-combine-upright/index.md @@ -0,0 +1,113 @@ +--- +title: text-combine-upright +slug: Web/CSS/text-combine-upright +tags: + - CSS + - CSS プロパティ + - CSS 書字方向 + - Experimental + - Reference +translation_of: Web/CSS/text-combine-upright +--- +
{{CSSRef}}
+ +

text-combine-upright は CSS のプロパティで、一文字分の空間に挿入する文字の組み合わせを設定します。組み合わせたテキストが 1em の幅より広い場合、ユーザーエージェントはコンテンツを 1em の幅に収める必要があります。合成結果は、レイアウトおよび装飾においてグリフ一文字として扱われます。このプロパティは、縦書きモードでのみ効果があります。

+ +

これは、日本語の縦中横 (tate-chū-yoko)、中国語の 直書橫向 として知られる効果をもたらすために使用されます。

+ +
/* キーワード値 */
+text-combine-upright: none;
+text-combine-upright: all;
+
+/* Digits 値 */
+text-combine-upright: digits;     /* 2 桁の数字を垂直テキスト内に水平に収めます */
+text-combine-upright: digits 4;   /* 4 桁までの数字を垂直テキスト内に水平に収めます */
+
+/* グローバル値 */
+text-combine-upright: inherit;
+text-combine-upright: initial;
+text-combine-upright: unset;
+
+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
none
+
何も特別な処理をしません。
+
all
+
タイプセットのすべての文字を水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。
+
digits <integer>?
+
指定した桁数 (整数値) までの連続した ASCII 数字 (U+0030–U+0039) を水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。整数値を省略した場合の値は 2 になります。2 ～ 4 までの範囲外の整数値は不正です。
+
+ +

形式文法

+ +{{csssyntax}} + +

例 (digits)

+ +

digits 値は、数字の桁だけを組み合わせる場合に使用し、all 値よりも必要なマークアップが少なくてすみます。現在、これをサポートしているブラウザーはあまりありません。

+ +
<p lang="ja" class="exampleText">平成20年4月16日に</p>
+
+ +
.exampleText {
+  writing-mode: vertical-lr;
+  text-combine-upright: digits 2;
+  font: 36px serif;
+}
+ +

{{EmbedLiveSample("Example_digits", 100, 350, "https://mdn.mozillademos.org/files/12127/tate-chu-yoko.png")}}

+ +

例 (all)

+ +

all 値は、水平テキストにするすべての部分にマークアップする必要があります。現在、これは digits 値よりも多くのブラウザーでサポートされています。

+ +
<p lang="zh-Hant">民國<span class="num">105</span
+>年<span class="num">4</span
+>月<span class="num">29</span>日</p>
+
+ +
html { writing-mode: vertical-rl; font: 24px serif }
+.num { text-combine-upright: all }
+
+ +

{{EmbedLiveSample("Example_all", 250, 300, "https://mdn.mozillademos.org/files/13096/text-combine-upright-all.png")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}}{{Spec2("CSS4 Writing Modes")}}digits 値の追加
{{SpecName("CSS3 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}}{{Spec2("CSS3 Writing Modes")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.text-combine-upright")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/unicode-bidi/index.html b/files/ja/web/css/unicode-bidi/index.html deleted file mode 100644 index 1883e219b1..0000000000 --- a/files/ja/web/css/unicode-bidi/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: unicode-bidi -slug: Web/CSS/unicode-bidi -tags: - - BiDi - - CSS - - CSS プロパティ - - CSS 書字方向 - - Reference - - リファレンス -translation_of: Web/CSS/unicode-bidi ---- -
{{CSSRef}}
- -

unicode-bidi は CSS のプロパティで、 {{Cssxref("direction")}} プロパティと共に、文書内の双方向テキストの扱いを指定します。例えば、テキストブロックに左から右 (LTR) 方向と右から左 (RTL) 方向へ記述されるテキストの両方が含まれる場合、ユーザエージェントは、複雑な Unicode アルゴリズムを用いてテキストの表示方法を決定します。 unicode-bidi プロパティは、このアルゴリズムを上書きして開発者がテキストの埋め込みを制御できるようにします。

- -

unicode-bidi と {{cssxref("direction")}} プロパティだけは、 {{cssxref("all")}} 一括指定プロパティによる影響を受けません。

- -

メモ: このプロパティは文書型定義 (DTD) デザイナー向けです。ウェブデザイナー等の作者は、このアルゴリズムを上書きすべきではありません。

- -
/* キーワード値 */
-unicode-bidi: normal;
-unicode-bidi: embed;
-unicode-bidi: isolate;
-unicode-bidi: bidi-override;
-unicode-bidi: isolate-override;
-unicode-bidi: plaintext;
-/* グローバル値 */
-unicode-bidi: inherit;
-unicode-bidi: initial;
-unicode-bidi: unset;
- -

{{cssinfo}}

- -

構文

- -

値

- -
-
normal
-
要素は、双方向アルゴリズムを尊重し、追加の埋め込みのレベルを提供しません。インライン要素に対しては、要素の境界に渡って、並べ替え作業を省略します。
-
embed
-
要素がインラインの場合、この値は双方向アルゴリズムを尊重し、追加の埋め込みのレベルを開きます。この埋め込みレベルの方向は、{{Cssxref("direction")}} プロパティにより与えられます。
-
bidi-override
-
インライン要素に対しては、この値で上書きされます。ブロックコンテナ要素に対しては、この値でインラインレベルの子孫を上書きし、別のブロックコンテナ要素は上書きしません。これは、要素内部に作用することを意味し、並べ替えは {{Cssxref("direction")}} による順序に従います。双方向アルゴリズムの省略された部分は無視されます。
-
isolate
-
このキーワードは、要素のコンテナの記述方向が、要素の内容を考慮せずに計算されることを示します。要素はその兄弟から 隔離 (isolated) されます。双方向解決アルゴリズムが適用される時、そのコンテナ要素は、対象の要素を 1 個またはいくつかの U+FFFC Object Replacement Character として処理します。つまり、画像要素のように扱います。
-
isolate-override
-
このキーワードは、周囲のコンテンツに isolate キーワードの隔離処理を適用し、内部のコンテンツに bidi-override キーワードの上書き処理を適用します。
-
plaintext
-
このキーワードは、要素の記述方向を、その親要素の双方向状態や {{cssxref("direction")}} プロパティの値を考慮せずに計算します。記述方向は、Unicode Bidirectional Algorithm の P2 および P3 規則を用いて計算されます。
- この値により、Unicode Bidirectional Algorithm に従うツールを用いてすでに整形されたデータを表示できます。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

CSS

- -
.bible-quote {
-  direction: rtl;
-  unicode-bidi: embed;
-}
-
- -

HTML

- -
<div class="bible-quote">
-  A line of text
-</div>
-<div>
-  Another line of text
-</div>
-
- -

結果

- -

{{EmbedLiveSample('Examples')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Writing Modes', '#unicode-bidi', 'unicode-bidi')}}{{Spec2('CSS3 Writing Modes')}}plaintext および isolate、isolate-override キーワードを追加
{{SpecName('CSS2.1', 'visuren.html#propdef-unicode-bidi', 'unicode-bidi')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.unicode-bidi")}}

- -

関連情報

- - diff --git a/files/ja/web/css/unicode-bidi/index.md b/files/ja/web/css/unicode-bidi/index.md new file mode 100644 index 0000000000..1883e219b1 --- /dev/null +++ b/files/ja/web/css/unicode-bidi/index.md @@ -0,0 +1,115 @@ +--- +title: unicode-bidi +slug: Web/CSS/unicode-bidi +tags: + - BiDi + - CSS + - CSS プロパティ + - CSS 書字方向 + - Reference + - リファレンス +translation_of: Web/CSS/unicode-bidi +--- +
{{CSSRef}}
+ +

unicode-bidi は CSS のプロパティで、 {{Cssxref("direction")}} プロパティと共に、文書内の双方向テキストの扱いを指定します。例えば、テキストブロックに左から右 (LTR) 方向と右から左 (RTL) 方向へ記述されるテキストの両方が含まれる場合、ユーザエージェントは、複雑な Unicode アルゴリズムを用いてテキストの表示方法を決定します。 unicode-bidi プロパティは、このアルゴリズムを上書きして開発者がテキストの埋め込みを制御できるようにします。

+ +

unicode-bidi と {{cssxref("direction")}} プロパティだけは、 {{cssxref("all")}} 一括指定プロパティによる影響を受けません。

+ +

メモ: このプロパティは文書型定義 (DTD) デザイナー向けです。ウェブデザイナー等の作者は、このアルゴリズムを上書きすべきではありません。

+ +
/* キーワード値 */
+unicode-bidi: normal;
+unicode-bidi: embed;
+unicode-bidi: isolate;
+unicode-bidi: bidi-override;
+unicode-bidi: isolate-override;
+unicode-bidi: plaintext;
+/* グローバル値 */
+unicode-bidi: inherit;
+unicode-bidi: initial;
+unicode-bidi: unset;
+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
normal
+
要素は、双方向アルゴリズムを尊重し、追加の埋め込みのレベルを提供しません。インライン要素に対しては、要素の境界に渡って、並べ替え作業を省略します。
+
embed
+
要素がインラインの場合、この値は双方向アルゴリズムを尊重し、追加の埋め込みのレベルを開きます。この埋め込みレベルの方向は、{{Cssxref("direction")}} プロパティにより与えられます。
+
bidi-override
+
インライン要素に対しては、この値で上書きされます。ブロックコンテナ要素に対しては、この値でインラインレベルの子孫を上書きし、別のブロックコンテナ要素は上書きしません。これは、要素内部に作用することを意味し、並べ替えは {{Cssxref("direction")}} による順序に従います。双方向アルゴリズムの省略された部分は無視されます。
+
isolate
+
このキーワードは、要素のコンテナの記述方向が、要素の内容を考慮せずに計算されることを示します。要素はその兄弟から 隔離 (isolated) されます。双方向解決アルゴリズムが適用される時、そのコンテナ要素は、対象の要素を 1 個またはいくつかの U+FFFC Object Replacement Character として処理します。つまり、画像要素のように扱います。
+
isolate-override
+
このキーワードは、周囲のコンテンツに isolate キーワードの隔離処理を適用し、内部のコンテンツに bidi-override キーワードの上書き処理を適用します。
+
plaintext
+
このキーワードは、要素の記述方向を、その親要素の双方向状態や {{cssxref("direction")}} プロパティの値を考慮せずに計算します。記述方向は、Unicode Bidirectional Algorithm の P2 および P3 規則を用いて計算されます。
+ この値により、Unicode Bidirectional Algorithm に従うツールを用いてすでに整形されたデータを表示できます。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

CSS

+ +
.bible-quote {
+  direction: rtl;
+  unicode-bidi: embed;
+}
+
+ +

HTML

+ +
<div class="bible-quote">
+  A line of text
+</div>
+<div>
+  Another line of text
+</div>
+
+ +

結果

+ +

{{EmbedLiveSample('Examples')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Writing Modes', '#unicode-bidi', 'unicode-bidi')}}{{Spec2('CSS3 Writing Modes')}}plaintext および isolate、isolate-override キーワードを追加
{{SpecName('CSS2.1', 'visuren.html#propdef-unicode-bidi', 'unicode-bidi')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.unicode-bidi")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/writing-mode/index.html b/files/ja/web/css/writing-mode/index.html deleted file mode 100644 index a93f090c81..0000000000 --- a/files/ja/web/css/writing-mode/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: writing-mode -slug: Web/CSS/writing-mode -tags: - - CSS - - CSS プロパティ - - CSS 書字方向 - - Reference - - リファレンス - - レイアウト - - 日本語処理 -translation_of: Web/CSS/writing-mode ---- -
{{CSSRef}}
- -

writing-mode は CSS のプロパティで、テキストの行のレイアウトを横書きにするか縦書きにするか、ブロックのフロー方向を左向きにするか右向きにするかを設定します。文書全体に設定する場合は、ルート要素 (HTML 文書の場合は html 要素) に設定してください。

- -
{{EmbedInteractiveExample("pages/css/writing-mode.html")}}
- - - -

このプロパティは、ブロックのフロー方向を指定します。これは、ブロックレベルコンテナが積まれる方向と、インラインレベルのコンテンツがブロックコンテナ内でフローする方向です。このように、 writing-mode プロパティはブロックレベルのコンテンツの順序も決定します。

- -

構文

- -
/* キーワードの値 */
-writing-mode: horizontal-tb;
-writing-mode: vertical-rl;
-writing-mode: vertical-lr;
-
-/* グローバルの値 */
-writing-mode: inherit;
-writing-mode: initial;
-writing-mode: unset;
- -

writing-mode プロパティは、以下のいずれかの値として指定されます。横書きの場合はその言葉の書字方向も影響し、左書き (ltr、英語やその他の多くの言葉) や右書き (rtl、ヘブライ語やアラビア語) のどちらかになります。

- -

値

- -
-
horizontal-tb
-
ltr の言語では、コンテンツは左から右へ水平に流れます。 rtl の言語では、コンテンツは右から左へ水平に流れます。次の水平の行は、前の行の下に配置されます。
-
vertical-rl
-
ltr の言語では、コンテンツは上から下へ垂直に流れ、次の垂直の行は、前の行の左に配置されます。 rtl の言語では、コンテンツは下から上へ垂直に流れ、次の垂直の行は前の行の右に配置されます。
-
vertical-lr
-
ltr の言語では、コンテンツは上から下へ垂直に流れ、次の垂直の行は、前の行の右に配置されます。 rtl の言語では、コンテンツは下から上へ垂直に流れ、次の垂直の行は前の行の左に配置されます。
-
sideways-rl {{experimental_inline}}
-
ltr の言語では、コンテンツは下から上へ垂直に流れます。 rtl の言語では、コンテンツは上から下へ垂直に流れます。垂直方向に並べられる書体を含むすべてのグリフを右へ横倒しにします。
-
sideways-lr {{experimental_inline}}
-
ltr の言語では、コンテンツは上から下へ垂直に流れます。 rtl の言語では、コンテンツは下から上へ垂直に流れます。垂直方向に並べられる書体を含むすべてのグリフを左へ横倒しにします。
-
lr {{deprecated_inline}}
-
SVG1 文書を除き、非推奨です。CSS では、horizontal-tb を代わりに使用してください。
-
lr-tb {{deprecated_inline}}
-
SVG1 文書を除き、非推奨です。CSS では、horizontal-tb を代わりに使用してください。
-
rl {{deprecated_inline}}
-
SVG1 文書を除き、非推奨です。CSS では、horizontal-tb を代わりに使用してください。
-
tb {{deprecated_inline}}
-
SVG1 文書を除き、非推奨です。CSS では、vertical-rl を代わりに使用してください。
-
tb-rl {{deprecated_inline}}
-
SVG1 文書を除き、非推奨です。CSS では、vertical-rl を代わりに使用してください。
-
- -

正式な構文

- -{{csssyntax}} - -

例

- -

この例では、すべての書字方向を示し、各モードでさまざまな言語のテキストを表示します。

- -

HTML

- -

HTML は単純な {{HTMLElement("table")}} であり、行方向に書字方向を、列方向にその書字方向を使用して、さまざまな種類のテキストが表示される様子を表します。

- -
<table>
-  <tr>
-    <th>Value</th>
-    <th>Vertical script</th>
-    <th>Horizontal (LTR) script</th>
-    <th>Horizontal (RTL) script</th>
-    <th>Mixed script</th>
-  </tr>
-  <tr>
-    <td>horizontal-tb</td>
-    <td class="example Text1"><span>我家没有电脑。</span></td>
-    <td class="example Text1"><span>Example text</span></td>
-    <td class="example Text1"><span>מלל ארוך לדוגמא</span></td>
-    <td class="example Text1"><span>1994年に至っては</span></td>
-  </tr>
-  <tr>
-    <td>vertical-lr</td>
-    <td class="example Text2"><span>我家没有电脑。</span></td>
-    <td class="example Text2"><span>Example text</span></td>
-    <td class="example Text2"><span>מלל ארוך לדוגמא</span></td>
-    <td class="example Text2"><span>1994年に至っては</span></td>
-  </tr>
-  <tr>
-    <td>vertical-rl</td>
-    <td class="example Text3"><span>我家没有电脑。</span></td>
-    <td class="example Text3"><span>Example text</span></td>
-    <td class="example Text3"><span>מלל ארוך לדוגמא</span></td>
-    <td class="example Text3"><span>1994年に至っては</span></td>
-  </tr>
-  <tr>
-    <td>sideways-lr</td>
-    <td class="example Text4"><span>我家没有电脑。</span></td>
-    <td class="example Text4"><span>Example text</span></td>
-    <td class="example Text4"><span>מלל ארוך לדוגמא</span></td>
-    <td class="example Text4"><span>1994年に至っては</span></td>
-  </tr>
-  <tr>
-    <td>sideways-rl</td>
-    <td class="example Text5"><span>我家没有电脑。</span></td>
-    <td class="example Text5"><span>Example text</span></td>
-    <td class="example Text5"><span>מלל ארוך לדוגמא</span></td>
-    <td class="example Text5"><span>1994年に至っては</span></td>
-  </tr>
-</table>
-
- -

CSS

- - - -

コンテンツの方向を調整する CSS は次のようになります。

- -
.example.Text1 span, .example.Text1 {
-  writing-mode: horizontal-tb;
-  -webkit-writing-mode: horizontal-tb;
-  -ms-writing-mode: horizontal-tb;
-}
-
-.example.Text2 span, .example.Text2 {
-  writing-mode: vertical-lr;
-  -webkit-writing-mode: vertical-lr;
-  -ms-writing-mode: vertical-lr;
-}
-
-.example.Text3 span, .example.Text3 {
-  writing-mode: vertical-rl;
-  -webkit-writing-mode: vertical-rl;
-  -ms-writing-mode: vertical-rl;
-}
-
-.example.Text4 span, .example.Text4 {
-  writing-mode: sideways-lr;
-  -webkit-writing-mode: sideways-lr;
-  -ms-writing-mode: sideways-lr;
-}
-
-.example.Text5 span, .example.Text5 {
-  writing-mode: sideways-rl;
-  -webkit-writing-mode: sideways-rl;
-  -ms-writing-mode: sideways-rl;
-}
-
- -

結果

- -

{{EmbedLiveSample("Example", 400, 500)}}

- -

以下の画像は、ブラウザーの writing-mode の対応が不完全な場合のために、出力結果がどのように見えるかを示したものです。

- -

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Writing Modes", "#block-flow", "writing-mode")}}{{Spec2("CSS4 Writing Modes")}}sideways-lr および sideways-rl を追加
{{SpecName("CSS3 Writing Modes", "#block-flow", "writing-mode")}}{{Spec2("CSS3 Writing Modes")}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.writing-mode")}}

- -

関連情報

- - diff --git a/files/ja/web/css/writing-mode/index.md b/files/ja/web/css/writing-mode/index.md new file mode 100644 index 0000000000..a93f090c81 --- /dev/null +++ b/files/ja/web/css/writing-mode/index.md @@ -0,0 +1,223 @@ +--- +title: writing-mode +slug: Web/CSS/writing-mode +tags: + - CSS + - CSS プロパティ + - CSS 書字方向 + - Reference + - リファレンス + - レイアウト + - 日本語処理 +translation_of: Web/CSS/writing-mode +--- +
{{CSSRef}}
+ +

writing-mode は CSS のプロパティで、テキストの行のレイアウトを横書きにするか縦書きにするか、ブロックのフロー方向を左向きにするか右向きにするかを設定します。文書全体に設定する場合は、ルート要素 (HTML 文書の場合は html 要素) に設定してください。

+ +
{{EmbedInteractiveExample("pages/css/writing-mode.html")}}
+ + + +

このプロパティは、ブロックのフロー方向を指定します。これは、ブロックレベルコンテナが積まれる方向と、インラインレベルのコンテンツがブロックコンテナ内でフローする方向です。このように、 writing-mode プロパティはブロックレベルのコンテンツの順序も決定します。

+ +

構文

+ +
/* キーワードの値 */
+writing-mode: horizontal-tb;
+writing-mode: vertical-rl;
+writing-mode: vertical-lr;
+
+/* グローバルの値 */
+writing-mode: inherit;
+writing-mode: initial;
+writing-mode: unset;
+ +

writing-mode プロパティは、以下のいずれかの値として指定されます。横書きの場合はその言葉の書字方向も影響し、左書き (ltr、英語やその他の多くの言葉) や右書き (rtl、ヘブライ語やアラビア語) のどちらかになります。

+ +

値

+ +
+
horizontal-tb
+
ltr の言語では、コンテンツは左から右へ水平に流れます。 rtl の言語では、コンテンツは右から左へ水平に流れます。次の水平の行は、前の行の下に配置されます。
+
vertical-rl
+
ltr の言語では、コンテンツは上から下へ垂直に流れ、次の垂直の行は、前の行の左に配置されます。 rtl の言語では、コンテンツは下から上へ垂直に流れ、次の垂直の行は前の行の右に配置されます。
+
vertical-lr
+
ltr の言語では、コンテンツは上から下へ垂直に流れ、次の垂直の行は、前の行の右に配置されます。 rtl の言語では、コンテンツは下から上へ垂直に流れ、次の垂直の行は前の行の左に配置されます。
+
sideways-rl {{experimental_inline}}
+
ltr の言語では、コンテンツは下から上へ垂直に流れます。 rtl の言語では、コンテンツは上から下へ垂直に流れます。垂直方向に並べられる書体を含むすべてのグリフを右へ横倒しにします。
+
sideways-lr {{experimental_inline}}
+
ltr の言語では、コンテンツは上から下へ垂直に流れます。 rtl の言語では、コンテンツは下から上へ垂直に流れます。垂直方向に並べられる書体を含むすべてのグリフを左へ横倒しにします。
+
lr {{deprecated_inline}}
+
SVG1 文書を除き、非推奨です。CSS では、horizontal-tb を代わりに使用してください。
+
lr-tb {{deprecated_inline}}
+
SVG1 文書を除き、非推奨です。CSS では、horizontal-tb を代わりに使用してください。
+
rl {{deprecated_inline}}
+
SVG1 文書を除き、非推奨です。CSS では、horizontal-tb を代わりに使用してください。
+
tb {{deprecated_inline}}
+
SVG1 文書を除き、非推奨です。CSS では、vertical-rl を代わりに使用してください。
+
tb-rl {{deprecated_inline}}
+
SVG1 文書を除き、非推奨です。CSS では、vertical-rl を代わりに使用してください。
+
+ +

正式な構文

+ +{{csssyntax}} + +

例

+ +

この例では、すべての書字方向を示し、各モードでさまざまな言語のテキストを表示します。

+ +

HTML

+ +

HTML は単純な {{HTMLElement("table")}} であり、行方向に書字方向を、列方向にその書字方向を使用して、さまざまな種類のテキストが表示される様子を表します。

+ +
<table>
+  <tr>
+    <th>Value</th>
+    <th>Vertical script</th>
+    <th>Horizontal (LTR) script</th>
+    <th>Horizontal (RTL) script</th>
+    <th>Mixed script</th>
+  </tr>
+  <tr>
+    <td>horizontal-tb</td>
+    <td class="example Text1"><span>我家没有电脑。</span></td>
+    <td class="example Text1"><span>Example text</span></td>
+    <td class="example Text1"><span>מלל ארוך לדוגמא</span></td>
+    <td class="example Text1"><span>1994年に至っては</span></td>
+  </tr>
+  <tr>
+    <td>vertical-lr</td>
+    <td class="example Text2"><span>我家没有电脑。</span></td>
+    <td class="example Text2"><span>Example text</span></td>
+    <td class="example Text2"><span>מלל ארוך לדוגמא</span></td>
+    <td class="example Text2"><span>1994年に至っては</span></td>
+  </tr>
+  <tr>
+    <td>vertical-rl</td>
+    <td class="example Text3"><span>我家没有电脑。</span></td>
+    <td class="example Text3"><span>Example text</span></td>
+    <td class="example Text3"><span>מלל ארוך לדוגמא</span></td>
+    <td class="example Text3"><span>1994年に至っては</span></td>
+  </tr>
+  <tr>
+    <td>sideways-lr</td>
+    <td class="example Text4"><span>我家没有电脑。</span></td>
+    <td class="example Text4"><span>Example text</span></td>
+    <td class="example Text4"><span>מלל ארוך לדוגמא</span></td>
+    <td class="example Text4"><span>1994年に至っては</span></td>
+  </tr>
+  <tr>
+    <td>sideways-rl</td>
+    <td class="example Text5"><span>我家没有电脑。</span></td>
+    <td class="example Text5"><span>Example text</span></td>
+    <td class="example Text5"><span>מלל ארוך לדוגמא</span></td>
+    <td class="example Text5"><span>1994年に至っては</span></td>
+  </tr>
+</table>
+
+ +

CSS

+ + + +

コンテンツの方向を調整する CSS は次のようになります。

+ +
.example.Text1 span, .example.Text1 {
+  writing-mode: horizontal-tb;
+  -webkit-writing-mode: horizontal-tb;
+  -ms-writing-mode: horizontal-tb;
+}
+
+.example.Text2 span, .example.Text2 {
+  writing-mode: vertical-lr;
+  -webkit-writing-mode: vertical-lr;
+  -ms-writing-mode: vertical-lr;
+}
+
+.example.Text3 span, .example.Text3 {
+  writing-mode: vertical-rl;
+  -webkit-writing-mode: vertical-rl;
+  -ms-writing-mode: vertical-rl;
+}
+
+.example.Text4 span, .example.Text4 {
+  writing-mode: sideways-lr;
+  -webkit-writing-mode: sideways-lr;
+  -ms-writing-mode: sideways-lr;
+}
+
+.example.Text5 span, .example.Text5 {
+  writing-mode: sideways-rl;
+  -webkit-writing-mode: sideways-rl;
+  -ms-writing-mode: sideways-rl;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Example", 400, 500)}}

+ +

以下の画像は、ブラウザーの writing-mode の対応が不完全な場合のために、出力結果がどのように見えるかを示したものです。

+ +

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Writing Modes", "#block-flow", "writing-mode")}}{{Spec2("CSS4 Writing Modes")}}sideways-lr および sideways-rl を追加
{{SpecName("CSS3 Writing Modes", "#block-flow", "writing-mode")}}{{Spec2("CSS3 Writing Modes")}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.writing-mode")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf