From 368d89d1bdea3c110e894ae2157ea7680ca5e3f7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 31 Dec 2021 12:38:19 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/writing-mode/index.md | 283 ++++++++++----------- .../screenshot_2020-02-05_21-04-30.png | Bin 0 -> 18178 bytes 2 files changed, 133 insertions(+), 150 deletions(-) create mode 100644 files/ja/web/css/writing-mode/screenshot_2020-02-05_21-04-30.png (limited to 'files') diff --git a/files/ja/web/css/writing-mode/index.md b/files/ja/web/css/writing-mode/index.md index a93f090c81..cf56f7bdfb 100644 --- a/files/ja/web/css/writing-mode/index.md +++ b/files/ja/web/css/writing-mode/index.md @@ -4,26 +4,25 @@ slug: Web/CSS/writing-mode tags: - CSS - CSS プロパティ - - CSS 書字方向 - - Reference - - リファレンス - レイアウト + - リファレンス + - recipe:css-property - 日本語処理 +browser-compat: css.properties.writing-mode translation_of: Web/CSS/writing-mode --- -
{{CSSRef}}
- -

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

+{{CSSRef}} -
{{EmbedInteractiveExample("pages/css/writing-mode.html")}}
+**`writing-mode`** は [CSS](/ja/docs/Web/CSS) のプロパティで、テキストの行のレイアウトを横書きにするか縦書きにするか、ブロックのフロー方向を左向きにするか右向きにするかを設定します。文書全体に設定する場合は、ルート要素 (HTML 文書の場合は `html` 要素) に設定してください。 - +{{EmbedInteractiveExample("pages/css/writing-mode.html")}} -

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

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

構文

+## 構文 -
/* キーワードの値 */
+```css
+/* キーワードの値 */
 writing-mode: horizontal-tb;
 writing-mode: vertical-rl;
 writing-mode: vertical-lr;
@@ -31,99 +30,106 @@ 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 は次のようになります。

+内容物の方向を調整する CSS は次のようになります。 -
.example.Text1 span, .example.Text1 {
+```css
+.example.Text1 span, .example.Text1 {
   writing-mode: horizontal-tb;
   -webkit-writing-mode: horizontal-tb;
   -ms-writing-mode: horizontal-tb;
@@ -169,55 +176,31 @@ th {
   -webkit-writing-mode: sideways-rl;
   -ms-writing-mode: sideways-rl;
 }
-
- -

結果

+``` -

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

+#### 結果 -

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

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

+![](screenshot_2020-02-05_21-04-30.png) -

仕様書

+{{EmbedLiveSample("Using_multiple_writing_modes", 400, 500)}} - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{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}}

+{{Specifications}} -

ブラウザーの互換性

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

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

+{{Compat}} -

関連情報

+## 関連情報 - +- SVG の [`writing-mode`](/ja/docs/Web/SVG/Attribute/writing-mode) 属性 +- {{Cssxref("direction")}} +- {{Cssxref("unicode-bidi")}} +- {{Cssxref("text-orientation")}} +- {{Cssxref("text-combine-upright")}} +- [CSS 論理的プロパティ](/ja/docs/Web/CSS/CSS_Logical_Properties) +- [Styling vertical text (Chinse, Japanese, Korean and Mongolian)](https://www.w3.org/International/articles/vertical-text/) +- 広範なブラウザーの対応試験結果: [https://w3c.github.io/i18n-tests/results/writing-mode-vertical](https://w3c.github.io/i18n-tests/results/writing-mode-vertical) diff --git a/files/ja/web/css/writing-mode/screenshot_2020-02-05_21-04-30.png b/files/ja/web/css/writing-mode/screenshot_2020-02-05_21-04-30.png new file mode 100644 index 0000000000..6ece3399a9 Binary files /dev/null and b/files/ja/web/css/writing-mode/screenshot_2020-02-05_21-04-30.png differ -- cgit v1.2.3-54-g00ecf