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/writing-mode/index.md | 223 +++++++++++++++++++++++++++++++++ 1 file changed, 223 insertions(+) create mode 100644 files/ja/web/css/writing-mode/index.md (limited to 'files/ja/web/css/writing-mode/index.md') 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