diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-12-31 11:56:22 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-07 10:13:24 +0900 |
commit | 46c5830e37ec4d70f5a9331ef8878c155636a612 (patch) | |
tree | 6ca685c176aeb3e93fd460e942f8b2cb262fd611 /files/ja/web/css | |
parent | 72e17b31f45f8fd2973b9baf3d6d01e766a07296 (diff) | |
download | translated-content-46c5830e37ec4d70f5a9331ef8878c155636a612.tar.gz translated-content-46c5830e37ec4d70f5a9331ef8878c155636a612.tar.bz2 translated-content-46c5830e37ec4d70f5a9331ef8878c155636a612.zip |
2021/08/13 時点の英語版に同期
Diffstat (limited to 'files/ja/web/css')
-rw-r--r-- | files/ja/web/css/text-combine-upright/index.md | 141 |
1 files changed, 71 insertions, 70 deletions
diff --git a/files/ja/web/css/text-combine-upright/index.md b/files/ja/web/css/text-combine-upright/index.md index c7d8790ecd..d5af954139 100644 --- a/files/ja/web/css/text-combine-upright/index.md +++ b/files/ja/web/css/text-combine-upright/index.md @@ -5,17 +5,20 @@ tags: - CSS - CSS プロパティ - CSS 書字方向 - - Experimental - - Reference + - 実験的 + - リファレンス + - recipe:css-property +browser-compat: css.properties.text-combine-upright translation_of: Web/CSS/text-combine-upright --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>text-combine-upright</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、一文字分の空間に挿入する文字の組み合わせを設定します。</span>組み合わせたテキストが 1em の幅より広い場合、ユーザーエージェントはコンテンツを 1em の幅に収める必要があります。合成結果は、レイアウトおよび装飾においてグリフ一文字として扱われます。このプロパティは、縦書きモードでのみ効果があります。</p> +**`text-combine-upright`** は [CSS](/ja/docs/Web/CSS) のプロパティで、一文字分の空間に挿入する文字の組み合わせを設定します。組み合わせたテキストが 1em の幅より広い場合、ユーザーエージェントはコンテンツを 1em の幅に収めなければなりません。合成結果は、レイアウトおよび装飾においてグリフ一文字として扱われます。このプロパティは、縦書きモードでのみ効果があります。 -<p>これは、日本語の縦中横 (tate-chū-yoko)、中国語の <span lang="zh-Hant">直書橫向</span> として知られる効果をもたらすために使用されます。</p> +これは、日本語の縦中横、中国語の <span lang="zh-Hant">直書橫向</span> として知られる効果をもたらすために使用されます。 -<pre class="brush:css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ text-combine-upright: none; text-combine-upright: all; @@ -26,88 +29,86 @@ text-combine-upright: digits 4; /* 4 桁までの数字を垂直テキスト /* グローバル値 */ text-combine-upright: inherit; text-combine-upright: initial; +text-combine-upright: revert; text-combine-upright: unset; -</pre> +``` -<p>{{cssinfo}}</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> +### 値 -<h3 id="Values" name="Values">値</h3> +- `none` + - : 何も特別な処理をしません。 +- `all` + - : タイプセットのすべての文字を水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。 +- `digits <integer>?` + - : 指定した桁数 (整数値) までの連続した ASCII 数字 (U+0030–U+0039) を水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。整数値を省略した場合の値は 2 になります。2 ~ 4 までの範囲外の整数値は不正です。 -<dl> - <dt><code>none</code></dt> - <dd>何も特別な処理をしません。</dd> - <dt><code>all</code></dt> - <dd>タイプセットのすべての文字を水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。</dd> - <dt><code>digits <integer>?</code></dt> - <dd>指定した桁数 (整数値) までの連続した ASCII 数字 (U+0030–U+0039) を水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。整数値を省略した場合の値は 2 になります。2 ~ 4 までの範囲外の整数値は不正です。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example_digits" name="Example_digits">例 (digits)</h2> +## 例 + +### digits + +digits 値は、数字の桁を組み合わせる際に all の値よりもマークアップが少なくてすみますが、対応しているブラウザーはあまり多くありません。 + +#### HTML -<p>digits 値は、数字の桁だけを組み合わせる場合に使用し、all 値よりも必要なマークアップが少なくてすみます。現在、これをサポートしているブラウザーはあまりありません。</p> +```html +<p lang="ja" class="exampleText">平成20年4月16日に</p> +``` -<pre class="brush: html"><p lang="ja" class="exampleText">平成20年4月16日に</p> -</pre> +#### CSS -<pre class="brush: css">.exampleText { +```css +.exampleText { writing-mode: vertical-lr; text-combine-upright: digits 2; font: 36px serif; -}</pre> +} +``` -<p>{{EmbedLiveSample("Example_digits", 100, 350, "https://mdn.mozillademos.org/files/12127/tate-chu-yoko.png")}}</p> +#### 結果 -<h2 id="Example_all" name="Example_all">例 (all)</h2> +{{EmbedLiveSample("Digits", 100, 350, "tate-chu-yoko.png")}} -<p>all 値は、水平テキストにするすべての部分にマークアップする必要があります。現在、これは digits 値よりも多くのブラウザーでサポートされています。</p> +### all -<pre class="brush: html"><p lang="zh-Hant">民國<span class="num">105</span ->年<span class="num">4</span ->月<span class="num">29</span>日</p> -</pre> +all の値は、水平テキストにするすべての部分にマークアップする必要があります。現在、これは digits 値よりも多くのブラウザーが対応しています。 -<pre class="brush: css">html { writing-mode: vertical-rl; font: 24px serif } +#### HTML + +```html +<p lang="zh-Hant">民國<span class="num">105</span +>年<span class="num">4</span +>月<span class="num">29</span>日</p> +``` + +#### CSS + +```css +html { writing-mode: vertical-rl; font: 24px serif } .num { text-combine-upright: all } -</pre> - -<p>{{EmbedLiveSample("Example_all", 250, 300, "https://mdn.mozillademos.org/files/13096/text-combine-upright-all.png")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS4 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}}</td> - <td>{{Spec2("CSS4 Writing Modes")}}</td> - <td><code>digits</code> 値の追加</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}}</td> - <td>{{Spec2("CSS3 Writing Modes")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.text-combine-upright")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("writing-mode")}}, {{cssxref("text-orientation")}}</li> -</ul> +``` + +#### 結果 + +{{EmbedLiveSample("All", 250, 300, "text-combine-upright-all.png")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("writing-mode")}}, {{cssxref("text-orientation")}} |