2024/09/12 時点の英語版に基づき更新

mdn · Oct 8, 2024 · 7259a7d · 7259a7d
1 parent 39429ef
commit 7259a7d
Showing 1 changed file with 89 additions and 29 deletions.
diff --git a/files/ja/web/css/text-transform/index.md b/files/ja/web/css/text-transform/index.md
@@ -2,12 +2,12 @@
 title: text-transform
 slug: Web/CSS/text-transform
 l10n:
-  sourceCommit: abf155210d826c2584d23433eb2eac45a6669d23
+  sourceCommit: dad91b2a7c51b05d98cd79e436f61565810a42a5
 ---
 
 {{CSSRef}}
 
-**`text-transform`** は CSS のプロパティで、要素のテキストを大文字表記する方法を指定します。テキストをすべて大文字にしたり、すべて小文字にしたり、各単語の先頭を大文字にしたりすることを指定します。フリガナの読みやすさを向上するのにも役立ちます。
+**`text-transform`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素のテキストを大文字表記する方法を指定します。テキストをすべて大文字にしたり、すべて小文字にしたり、各単語の先頭を大文字にしたりすることを指定します。フリガナの読みやすさを向上するのにも役立ちます。
 
 {{EmbedInteractiveExample("pages/css/text-transform.html")}}
 
@@ -35,6 +35,7 @@ text-transform: uppercase;
 text-transform: lowercase;
 text-transform: full-width;
 text-transform: full-size-kana;
+text-transform: math-auto;
 
 /* グローバル値 */
 text-transform: inherit;
@@ -46,11 +47,11 @@ text-transform: unset;
 
 - `capitalize`
 
-  - : それぞれの単語の最初の*文字*を強制的に大文字に変換させるキーワードです。ほかの文字は変更しません。すなわち、要素のテキストで記載した元の表記を維持します。文字とは、文字または数字の一般カテゴリーの一部である任意の Unicode 文字です {{experimental_inline}}。単語の先頭にある句読点や記号は無視されます。
+  - : それぞれの単語の最初の*文字*を強制的に大文字に変換させるキーワードです。ほかの文字は変更しません。すなわち、要素のテキストで記載した元の表記を維持します。文字とは、文字または数字の一般カテゴリーの一部である任意の Unicode 文字です。単語の先頭にある句読点や記号は無視されます。
 
     > **メモ:** `capitalize` が言語固有の先頭文字を大文字にする慣習 (英語で冠詞を除外するなど) に従うと期待するべきではありません。
 
-    > **メモ:** `capitalize` キーワードは CSS 1 および CSS 2.1 で定義されていたものでした。この結果、最初の文字を計算する方法は、ブラウザーによって異なっていました (Firefox は `-` および `_` を文字として捉えていましたが、他はそうではありませんでした。 Webkit 及び Gecko は `ⓐ` のような文字から作られた記号を、誤って文字として認識していました。 Internet Explorer 9 は最も CSS 2 の定義に近かったのですが、いくつかおかしいものがありました)。正しいふるまいを詳細に定義したので、 CSS Text Level 3 ではこれを一掃しました。ブラウザーの互換性表の `capitalize` の行は、それぞれのエンジンがこの詳細に定義された振る舞いに対応し始めたバージョンを記載しています。
+    > **メモ:** `capitalize` キーワードは CSS 1 および CSS 2.1 で定義されていたものでした。この結果、最初の文字を計算する方法は、ブラウザーによって異なっていました（Firefox は `-` および `_` を文字として捉えていましたが、他はそうではありませんでした。 Webkit 及び Gecko は `ⓐ` のような文字から作られた記号を、誤って文字として認識していました）。正しいふるまいを詳細に定義したので、 CSS Text Level 3 ではこれを一掃しました。ブラウザーの互換性表の `capitalize` の行は、それぞれのエンジンがこの詳細に定義された振る舞いに対応し始めたバージョンを記載しています。
 
 - `uppercase`
   - : すべての文字を大文字に変換させるキーワードです。
@@ -59,11 +60,14 @@ text-transform: unset;
 - `none`
   - : すべての文字を変換させないキーワードです。
 - `full-width`
-  - : 一般的な東アジアの文字 (中国語や日本語など) において、強制的に文字 — 主に記号やラテン文字 — を正方形の枠内に (全角で) 表記して、揃えて表示するキーワードです。
+  - : 一般的な東アジアの文字（中国語や日本語など）において、強制的に文字 — 主に記号やラテン文字 — を正方形の枠内に（全角で）表記して、揃えて表示するキーワードです。
 - `full-size-kana`
   - : このキーワードは一般に {{htmlelement("ruby")}} によるフリガナで使用され、すべての小文字の仮名文字を同等の大文字の仮名文字に変換することで、ルビで使われるフォントの大きさによる読みやすさの問題を解消します。
+- `math-auto`
+  - : 数学のイタリック体でテキストを適切に自動的にレンダリングするために使用されます。 これは、ラテン文字やギリシャ文字、他にもいくつか数学関連の記号を、[イタリック体の数学記号](https://www.unicode.org/charts/PDF/U1D400.pdf)に変換しますが、適用されるのは、1 文字を含むテキストノードの場合のみです。 例えば、"x" は "𝑥" (U+1D465) になりますが、"exp" は "exp" のままです。
+    主に、MathML の {{mathmlelement("mi")}} 要素の動作を指定するために使用されます。通常は、正しいスタイル設定が自動的に適用される MathML マークアップを使用しましょう。
 
-## アクセシビリティの考慮
+## アクセシビリティ
 
 テキストの長い区間に `text-transform` の値を `uppercase` で設定すると、失読症のような認知障碍を持つ人にとって読むのが難しくなることがあります。
 
@@ -80,18 +84,18 @@ text-transform: unset;
 
 ## 例
 
-### `none`
+### "none" の使用例
 
 ```html
 <p>
   Initial String
-  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
 </p>
 <p>
   text-transform: none
   <strong
     ><span
-      >Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span
+      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
     ></strong
   >
 </p>
@@ -110,18 +114,18 @@ strong {
 
 {{ EmbedLiveSample('Example using "none"', '100%', '100px') }}
 
-### capitalize (一般的)
+### "capitalize" の使用例（一般的）
 
 ```html
 <p>
   Initial String
-  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
 </p>
 <p>
   text-transform: capitalize
   <strong
     ><span
-      >Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span
+      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
     ></strong
   >
 </p>
@@ -140,7 +144,7 @@ strong {
 
 {{ EmbedLiveSample('Example using "capitalize" (general)', '100%', '100px') }}
 
-### capitalize (句読点)
+### "capitalize" の使用例（区切り文字）
 
 ```html
 <p>
@@ -174,7 +178,7 @@ strong {
 
 {{ EmbedLiveSample('Example using "capitalize" (punctuation)', '100%', '100px') }}
 
-### capitalize (記号)
+### "capitalize" の使用例（記号）
 
 ```html
 <p>
@@ -200,7 +204,7 @@ strong {
 
 {{ EmbedLiveSample('Example using "capitalize" (symbols)', '100%', '100px') }}
 
-### capitalize (オランダ語の二重音字 ij)
+### "capitalize" の使用例 (オランダ語の二重音字 ij)
 
 ```html
 <p>
@@ -230,18 +234,18 @@ strong {
 
 {{ EmbedLiveSample('Example using "capitalize" (Dutch ij digraph)', '100%', '100px') }}
 
-### uppercase (一般的)
+### "uppercase" の使用例（一般的）
 
 ```html
 <p>
   Initial String
-  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
 </p>
 <p>
   text-transform: uppercase
   <strong
     ><span
-      >Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span
+      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
     ></strong
   >
 </p>
@@ -260,7 +264,7 @@ strong {
 
 {{ EmbedLiveSample('Example using "uppercase" (general)', '100%', '100px') }}
 
-### uppercase (ギリシャ語の母音字)
+### "uppercase" の使用例（ギリシャ語の母音字）
 
 ```html
 <p>
@@ -288,18 +292,18 @@ strong {
 
 {{ EmbedLiveSample('Example using "uppercase" (Greek vowels)', '100%', '100px') }}
 
-### lowercase (一般的)
+### "lowercase" の使用例（一般的）
 
 ```html
 <p>
   Initial String
-  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
 </p>
 <p>
   text-transform: lowercase
   <strong
     ><span
-      >Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span
+      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
     ></strong
   >
 </p>
@@ -318,7 +322,7 @@ strong {
 
 {{ EmbedLiveSample('Example using "lowercase" (general)', '100%', '100px') }}
 
-### lowercase (ギリシャ文字 Σ)
+### "lowercase" の使用例（ギリシャ文字 Σ）
 
 ```html
 <p>
@@ -348,7 +352,7 @@ strong {
 
 {{ EmbedLiveSample('Example using "lowercase" (Greek Σ)', '100%', '100px') }}
 
-### lowercase (リヒテンシュタイン語)
+### "lowercase" の使用例（リヒテンシュタイン語）
 
 ```html
 <p>
@@ -374,7 +378,7 @@ strong {
 
 {{ EmbedLiveSample('Example using "lowercase" (Lithuanian)', '100%', '100px') }}
 
-### full-width (一般)
+### "full-width"（一般）
 
 ```html
 <p>
@@ -407,7 +411,7 @@ strong {
 
 {{ EmbedLiveSample('Example using "full-width" (general)', '100%', '175px') }}
 
-### full-width (日本語の半角カタカナ)
+### "full-width"（日本語の半角カタカナ）
 
 ```html
 <p>
@@ -430,16 +434,15 @@ strong {
 }
 ```
 
-日本語の半角カタカナは、8 ビットの文字コードでカタカナを表現するために使われていました。通常の (全角の) カタカナ文字とは異なり、濁点の付いた文字は、文字本体と濁点の 2 つのコードポイントで表現されます。 `full-width` は、これらの文字を全角に変換する際に、1 つのコードポイントにまとめます。
+日本語の半角カタカナは、8 ビットの文字コードでカタカナを表現するために使われていました。通常の（全角の）カタカナ文字とは異なり、濁点の付いた文字は、文字本体と濁点の 2 つのコードポイントで表現されます。 `full-width` は、これらの文字を全角に変換する際に、1 つのコードポイントにまとめます。
 
 {{ EmbedLiveSample('Example using "full-width" (Japanese half-width katakana)', '100%', '175px') }}
 
-### full-size-kana
+### "full-size-kana" の使用例
 
 ```html
 <p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
 <p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
-</p>
 ```
 
 ```css
@@ -450,6 +453,63 @@ p:nth-of-type(2) {
 
 {{ EmbedLiveSample('Example using "full-size-kana"', '100%', '175px') }}
 
+### "math-auto" の使用例
+
+例えば、純粋な HTML マークアップを使用して数式を作成します。
+
+```html
+<div>
+  (<span class="math-id">sin</span>&#8198;<span class="math-id">x</span>)<sup
+    >2</sup
+  >
+  + (<span class="math-id">cos</span>&#8198;<span class="math-id">x</span>)<sup
+    >2</sup
+  >
+  = 1
+</div>
+```
+
+すべての `.math-id` 要素に `text-transform: math-auto` を指定しています。しかし、`x` の文字だけがイタリック体になり、`sin` や `cos` は変化しないことに注目してください。
+
+```css
+.math-id {
+  text-transform: math-auto;
+}
+```
+
+{{ EmbedLiveSample('Example using "math-auto"', '', '100px') }}
+
+ただし、数式には [MathML](/ja/docs/Web/MathML) を使用することをお勧めします。これは、数式コンテンツをより堅牢でアクセシビリティの高い方法で表します。以下は、同じ数式を MathML を使用して記述したものです。
+
+```xml
+<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
+  <semantics>
+    <mrow>
+      <mo stretchy="false">(</mo>
+      <mo lspace="0em" rspace="0em">sin</mo>
+      <mspace width="0.16666666666666666em"></mspace>
+      <mi>x</mi>
+      <msup>
+        <mo stretchy="false">)</mo>
+        <mn>2</mn>
+      </msup>
+      <mo>+</mo>
+      <mo stretchy="false">(</mo>
+      <mo lspace="0em" rspace="0em">cos</mo>
+      <mspace width="0.16666666666666666em"></mspace>
+      <mi>x</mi>
+      <msup>
+        <mo stretchy="false">)</mo>
+        <mn>2</mn>
+      </msup>
+      <mo>=</mo>
+      <mn>1</mn>
+    </mrow>
+    <annotation encoding="TeX">(\sin\,x)^2+(\cos\,x)^2=1</annotation>
+  </semantics>
+</math>
+```
+
 ## 仕様書
 
 {{Specifications}}