CSS Text モジュールの文書を更新

- 2021/08/13 時点の英語版に同期
- Web/CSS/CSS_Text/Wrapping_Text を新規翻訳

1 files changed, 59 insertions, 88 deletions

diff --git a/files/ja/web/css/letter-spacing/index.md b/files/ja/web/css/letter-spacing/index.md
index f16840257e..f354a9fcba 100644
--- a/files/ja/web/css/letter-spacing/index.md
+++ b/files/ja/web/css/letter-spacing/index.md
@@ -4,23 +4,22 @@ slug: Web/CSS/letter-spacing
 tags:
   - CSS
   - CSS Property
-  - CSS Text
+  - CSS テキスト
   - Reference
   - SVG
-  - 'recipe:css-property'
-translation_of: Web/CSS/letter-spacing
+  - recipe:css-property
+browser-compat: css.properties.letter-spacing
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>letter-spacing</code></strong> は<a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、テキストの水平方向の字間のスペースに関する挙動を設定します。この値はテキストを描画する際に文字間の自然な空間に追加されます。 <code>letter-spacing</code> が正の値であった場合は、文字と文字の間が開き、 <code>letter-spacing</code> が負の値であった場合は、文字と文字が互いに近づきます。</p>
+**`letter-spacing`** は [CSS](/ja/docs/Web/CSS) のプロパティで、テキストの水平方向の字間のスペースに関する挙動を設定します。この値はテキストを描画する際に文字間の自然な空間に追加されます。 `letter-spacing` が正の値であった場合は、文字と文字の間が開き、 `letter-spacing` が負の値であった場合は、文字と文字が互いに近づきます。
 
-<div>{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}</div>
+{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+```css
+/* キーワード値 */
 letter-spacing: normal;
 
 /* &lt;length&gt; 値 */
@@ -32,102 +31,74 @@ letter-spacing: .3px;
 letter-spacing: inherit;
 letter-spacing: initial;
 letter-spacing: unset;
-</pre>
+```
+
+### 値
+
+- `normal`
+  - : 現在のフォントでの通常の字間になります。 `0` の値とは異なり、この値は{{glossary("user agent", "ユーザーエージェント")}}が文字列を両端揃えするために字間を変えることを許可します。
+- {{cssxref("&lt;length&gt;")}}
+  - : 既定の字間に*加える*字間のスペースを指定します。負の値も指定可能ですが、実装に依存した制限があるかもしれません。ユーザーエージェントは文字列を両端揃えするために、字間スペースをさらに増減させることはありません。
 
-<h3 id="Values" name="Values">値</h3>
+## アクセシビリティの考慮
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>現在のフォントでの通常の字間になります。 <code>0</code> の値とは異なり、この値は{{glossary("user agent", "ユーザーエージェント")}}が文字列を両端揃えするために字間を変えることを許可します。</dd>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd>既定の字間に<em>加える</em>字間のスペースを指定します。負の値も指定可能ですが、実装に依存した制限があるかもしれません。ユーザーエージェントは文字列を両端揃えするために、字間スペースをさらに増減させることはありません。</dd>
-</dl>
+正と負のどちらでも、大きすぎる値を `letter-spacing` に指定すると読みづらくなってしまいます。正の値として大きすぎる場合、文字と文字が離れすぎるせいでひとつの単語ではなくバラバラの文字に見えてしまいます。負の値として大きすぎる場合、文字と文字が重なり合うために何が書いてあるのか分からなくなってしまいます。
 
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティへの配慮</h2>
+フォントの文字幅は種類ごとに異なるため、読みやすい letter-spacing もそれぞれ異なります。すべてのフォントで読みやすさを提供してくれる単一の設定値というものはありません。
 
-<p>正と負のどちらでも、大きすぎる値を <code>letter-spacing</code> に指定すると読みづらくなってしまいます。正の値として大きすぎる場合、文字と文字が離れすぎるせいでひとつの単語ではなくバラバラの文字に見えてしまいます。負の値として大きすぎる場合、文字と文字が重なり合うために何が書いてあるのか分からなくなってしまいます。</p>
+- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
 
-<p>フォントの文字幅は種類ごとに異なるため、読みやすい letter-spacing もそれぞれ異なります。すべてのフォントで読みやすさを提供してくれる単一の設定値というものはありません。</p>
+## 国際化の考慮
 
-<ul>
- <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a></li>
-</ul>
+書き言葉の中には、字間のスペースを適用してはいけないものがあります。例えば、アラビア文字を使用する言語では、次の例のように、つながった文字が視覚的につながったままであることが求められます。字間スペースを適用すると、テキストが壊れたように見えてしまいます。
 
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+> <p lang="ar" dir="rtl">شسيبتنمك</p>
 
-<p>{{cssinfo}}</p>
+## 公式定義
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Setting_letter_spacing" name="Setting_letter_spacing">字間の設定</h3>
+<h3 id="Setting_letter_spacing">字間の設定</h3>
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html notranslate">&lt;p class="normal"&gt;letter spacing&lt;/p&gt;
-&lt;p class="em-wide"&gt;letter spacing&lt;/p&gt;
-&lt;p class="em-wider"&gt;letter spacing&lt;/p&gt;
-&lt;p class="em-tight"&gt;letter spacing&lt;/p&gt;
-&lt;p class="px-wide"&gt;letter spacing&lt;/p&gt;
-</pre>
+```html
+<p class="normal">letter spacing</p>
+<p class="em-wide">letter spacing</p>
+<p class="em-wider">letter spacing</p>
+<p class="em-tight">letter spacing</p>
+<p class="px-wide">letter spacing</p>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css notranslate">.normal   { letter-spacing: normal; }
+```css
+.normal   { letter-spacing: normal; }
 .em-wide  { letter-spacing: 0.4em; }
 .em-wider { letter-spacing: 1em; }
 .em-tight { letter-spacing: -0.05em; }
 .px-wide  { letter-spacing: 6px; }
-</pre>
-
-<h4 id="Result" name="Result">結果</h4>
-
-<p>{{ EmbedLiveSample('Setting_letter_spacing', 440, 185) }}</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('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}</td>
-   <td>{{Spec2('CSS3 Text')}}</td>
-   <td>変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}</td>
-   <td>{{Spec2('SVG1.1')}}</td>
-   <td>SVG での初回定義</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.letter-spacing")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{cssxref("font-kerning")}}</li>
-</ul>
+```
+
+#### 結果
+
+{{ EmbedLiveSample('Setting_letter_spacing', 440, 185) }}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{cssxref("font-kerning")}}