From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/text-combine-upright/index.html | 115 +++++++++++++++++++++++ 1 file changed, 115 insertions(+) create mode 100644 files/ja/web/css/text-combine-upright/index.html (limited to 'files/ja/web/css/text-combine-upright/index.html') diff --git a/files/ja/web/css/text-combine-upright/index.html b/files/ja/web/css/text-combine-upright/index.html new file mode 100644 index 0000000000..907fb4de0b --- /dev/null +++ b/files/ja/web/css/text-combine-upright/index.html @@ -0,0 +1,115 @@ +--- +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")}}

+ +

関連情報

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