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-emphasis-position/index.html | 144 +++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 files/ja/web/css/text-emphasis-position/index.html (limited to 'files/ja/web/css/text-emphasis-position') diff --git a/files/ja/web/css/text-emphasis-position/index.html b/files/ja/web/css/text-emphasis-position/index.html new file mode 100644 index 0000000000..2a0ee36975 --- /dev/null +++ b/files/ja/web/css/text-emphasis-position/index.html @@ -0,0 +1,144 @@ +--- +title: text-emphasis-position +slug: Web/CSS/text-emphasis-position +tags: + - CSS + - CSS テキスト装飾 + - CSS プロパティ + - Reference +translation_of: Web/CSS/text-emphasis-position +--- +
{{CSSRef}}
+ +

CSS の text-emphasis-position プロパティは、圏点が描かれる位置を設定します。ルビテキストと同様、圏点のために十分な空間がない場合は、行の高さが広げられます。

+ +
/* 初期値 */
+text-emphasis-position: over right;
+
+/* キーワード値 */
+text-emphasis-position: over left;
+text-emphasis-position: under right;
+text-emphasis-position: under left;
+
+text-emphasis-position: left over;
+text-emphasis-position: right under;
+text-emphasis-position: left under;
+
+/* グローバル値 */
+text-emphasis-position: inherit;
+text-emphasis-position: initial;
+text-emphasis-position: unset;
+
+ +

{{cssinfo}}

+ +

望ましい位置

+ +

圏点の望ましい位置は言語に依存します。例えば日本語では、望ましい位置は over right です。一方中国語では、望ましい位置は under right となります。下記の情報の表は、日本語、モンゴル語、中国語における望ましい圏点の位置を要約するものです。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
望ましい圏点とルビの位置
言語望ましい位置説明
横書き縦書き
日本語overright日本語の横書きテキストでは、圏点は強調される各文字の上に表示されます。日本語の縦書きテキストでは、圏点が強調される各文字の右に表示されます。
モンゴル語
中国語underright中国語簡体字の横書きテキストでは、圏点は強調される各文字の下に表示されます。
+ +
+

メモ: {{cssxref("text-emphasis")}} 一括指定プロパティを使用して、 text-emphasis-position を設定することはできず、また初期化されることもありません。

+
+ +

構文

+ +

値

+ +
+
over
+
横書きモードでテキストの上に圏点を描きます。
+
under
+
横書きモードでテキストの下に圏点を描きます。
+
right
+
縦書きモードでテキストの右に圏点を描きます。
+
left
+
縦書きモードでテキストの左に圏点を描きます。
+
+ +

形式文法

+ +
{{csssyntax}}
+
+ +

例

+ +

編集者によっては、ルビと競合する場合に圏点を隠すことを好みます。 HTML では、これは次のスタイル規則で実現できます。

+ +
ruby {
+  text-emphasis: none;
+}
+
+ +

編集者によっては、圏点と競合する場合にルビを隠すことを好みます。 HTML では、これは次のパターンで実現できます。

+ +
em {
+  text-emphasis: dot; /* <em> 要素に text-emphasis を設定 */
+}
+
+em rt {
+  display: none; /* <em> 要素内のルビを隠す */
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Text Decoration', '#text-emphasis-position-property', 'text-emphasis')}}{{Spec2('CSS3 Text Decoration')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.text-emphasis-position")}}

+ +

関連情報

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