[css-content-3] Add an example explaining how to use counters in alt text w3c/csswg-drafts@aa8f239

Author: triple-underscore

css-content-ja.html

@@ -120,8 +120,8 @@
 ●●options
 
 spec_title:CSS Generated Content Module Level 3
-spec_date:2024-02-05
-trans_update:2024-02-08
+spec_date:2025-07-21
+trans_update:2025-07-22
 source_checked:2019-08-09
 page_state_key:CSS
 original_url:https://drafts.csswg.org/css-content-3/
@@ -130,7 +130,7 @@
 ref_id_lowercase:true
 site_nav:css-gnerated,css
 conformance:css
-copyright:2024,permissive
+copyright:2025,permissive
 trans_1st_pub:2018-08-18
 
 ●●class_map
@@ -162,6 +162,9 @@
 
 ●●original_id_map
 
+valdef-content-content-list:typedef-content-content-list
+typedef-content-list:
+
 ●●mdn_urls
 propdef-bookmark-label:CSS/bookmark-label
 propdef-bookmark-level:CSS/bookmark-level
@@ -177,20 +180,18 @@
 
 ●●link_map
 
+	●css
 pe.after:~CSSPSEUDO#selectordef-after
 pe.before:~CSSPSEUDO#selectordef-before
 pe.first-letter:~CSSPSEUDO#selectordef-first-letter
 pe.marker:~CSSPSEUDO#selectordef-marker
-pe.placeholder:~CSSPSEUDO#selectordef-placeholder
-pe.file-selector-button:~CSSPSEUDO#selectordef-file-selector-button
+pe.placeholder:~CSSFORMS#selectordef-placeholder
+pe.file-selector-button:~CSSFORMS#selectordef-file-selector-button
 ps.target:~SELECTORS4#target-pseudo
 	~HTMLselectors#selector-target
 ps.left:~CSSPAGE#valdef-page-left
 ps.right:~CSSPAGE#valdef-page-right
 
-e.img:~HEimages#the-img-element
-e.q:~HEtextlevel#the-q-element
-
 p.bookmark-label:#propdef-bookmark-label
 p.bookmark-level:#propdef-bookmark-level
 p.bookmark-state:#propdef-bookmark-state
@@ -202,14 +203,15 @@
 
 f.leader:#funcdef-leader
 t.leader():#funcdef-leader
+	#funcdef-content-leader
 f.target-counter:#funcdef-target-counter
 t.target-counter():#funcdef-target-counter
 f.target-counters:#funcdef-target-counters
 t.target-counters():#funcdef-target-counters
 
 	f.leader( <leader-type> ):#funcdef-content-leader
 
-t.content-list:#_typedef-content-list
+t.content-list:#typedef-content-list
 t.content-replacement:#typedef-content-content-replacement
 t.leader-type:#typedef-leader-type
 t.quote:#typedef-quote
@@ -237,7 +239,7 @@
 v.normal:#valdef-content-normal
 v.~noneC:#valdef-content-none
 	vt.image:#valdef-content-list-image
-	vt.content-list:#typedef-content-content-list
+	vt.content-list:#valdef-content-content-list
 	vt.string:#valdef-content-string
 	/ `string$t:#valdef-content---string--counter--attr
 	t.attr():#valdef-content-attr
@@ -249,6 +251,7 @@
 	vt.integer:#valdef-bookmark-level-integer
 	vt.content-list:#valdef-bookmark-label-content-list
 
+
 v.dotted:#valdef-leader-dotted
 v.solid:#valdef-leader-solid
 v.space:#valdef-leader-space
@@ -260,7 +263,7 @@
 
 t.qname:~CSSNS#qname
 
-	●§2.7
+	●css §2.7
 p.string-set:#propdef-string-set
 
 at.page:~CSSPAGE#at-ruledef-page
@@ -286,6 +289,9 @@
 v.first-letter:#valdef-content-first-letter
 v.marker:#valdef-content-marker
 
+	●code
+e.img:~HEimages#the-img-element
+e.q:~HEtextlevel#the-q-element
 
 	●用語
 
@@ -388,7 +394,7 @@
 改行:line break::~
 収まら:fitし::~
 	より幅広:wider
-	右寄せされ:right-aligned
+	（左横書きなら右へ寄せられ:right-aligned
 
 	●CSS
 出自の:originating:~
@@ -468,7 +474,6 @@
 	諸々の:Lots of miscellaneous
 
 	させなくする:prevent
-	種類別にとりあげる:enumerate
 	併用:in conjunction with
 	見受けられ:appears to
 	とも呼ばれる:known
@@ -536,7 +541,7 @@
 	重複:duplicate
 	局所的に:localized
 	目次:tables of contents
-	代替:alt
+	“代替~text”:"alt text"
 	CSS Images:Images
 	章:chapter
 	著者:author
@@ -579,6 +584,7 @@
 	まで:and including
 	であり続け:stay
 	1 だけずれていた:off-by-one
+	同じ〜:itself (〜)
 
 ●●images
 ＠css-content/
@@ -598,23 +604,25 @@
 [CSS-COUNTER-STYLES-3]
     Tab Atkins Jr.. ＜CSS Counter Styles Level 3＞. URL: https://drafts.csswg.org/css-counter-styles/
 [CSS-DISPLAY-4]
-    ＜CSS Display Module Level 4＞. Editor's Draft. URL: https://drafts.csswg.org/css-display-4/
+    Elika Etemad; Tab Atkins Jr.. ＜CSS Display Module Level 4＞. URL: https://drafts.csswg.org/css-display/
+[CSS-FORMS-1]
+    Tim Nguyen. ＜CSS Form Control Styling Level 1＞. URL: https://drafts.csswg.org/css-forms-1/
 [CSS-IMAGES-3]
     Tab Atkins Jr.; Elika Etemad; Lea Verou. ＜CSS Images Module Level 3＞. URL: https://drafts.csswg.org/css-images-3/
 [CSS-IMAGES-4]
     Tab Atkins Jr.; Elika Etemad; Lea Verou. ＜CSS Images Module Level 4＞. URL: https://drafts.csswg.org/css-images-4/
 [CSS-LISTS-3]
     Elika Etemad; Tab Atkins Jr.. ＜CSS Lists and Counters Module Level 3＞. URL: https://drafts.csswg.org/css-lists-3/
 [CSS-PSEUDO-4]
-    Daniel Glazman; Elika Etemad; Alan Stearns. ＜CSS Pseudo-Elements Module Level 4＞. URL: https://drafts.csswg.org/css-pseudo-4/
+    Elika Etemad; Alan Stearns. ＜CSS Pseudo-Elements Module Level 4＞. URL: https://drafts.csswg.org/css-pseudo-4/
 [CSS-TEXT-4]
     Elika Etemad; et al. ＜CSS Text Module Level 4＞. URL: https://drafts.csswg.org/css-text-4/
 [CSS-VALUES-3]
     Tab Atkins Jr.; Elika Etemad. ＜CSS Values and Units Module Level 3＞. URL: https://drafts.csswg.org/css-values-3/
 [CSS-VALUES-4]
     Tab Atkins Jr.; Elika Etemad. ＜CSS Values and Units Module Level 4＞. URL: https://drafts.csswg.org/css-values-4/
 [CSS-VALUES-5]
-    ＜CSS Values and Units Module Level 5＞. Editor's Draft. URL: https://drafts.csswg.org/css-values-5/
+    Tab Atkins Jr.; Elika Etemad; Miriam Suzanne. ＜CSS Values and Units Module Level 5＞. URL: https://drafts.csswg.org/css-values-5/
 [CSS2]
     Bert Bos; et al. ＜Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification＞. URL: https://drafts.csswg.org/css2/
 [CSS3-NAMESPACE]
@@ -752,7 +760,7 @@ <h2 title="Introduction">序論</h2>
 
 <p>
 要素を画像~その他の~multimedia内容で置換する効果も，共通的にある。
-すべての~UAがすべての~multimedia形式を~supportするわけではないので、
+すべての~UAがすべての~multimedia形式を~supportするとは限らないので、
 ~fallbackを供する必要もあろう。
 ◎
 Another common effect is replacing elements with images or other multimedia content. Since not all user agents support all multimedia formats, fallbacks may have to be provided.
@@ -761,16 +769,17 @@ <h2 title="Introduction">序論</h2>
 <div class="example">
 <pre class="lang-css">
 /* <span class="comment">
-~UAが~supportする形式を利用して，`logo^e 要素を~siteの~logoに置換する。
+~UAが~supportする形式を利用して，
+`logo^e 要素を~siteの~logoで置換する。
 ◎
 Replace &lt;logo&gt; elements with the site’s logo, using a format supported by the UA
 </span> */
 logo { content: url(logo.mov), url(logo.mng), url(logo.png), none; }
 
 /* <span class="comment">
-`figure^e 要素を参照先の文書に置換する
+`figure^e 要素を参照先の文書で置換する
 — 失敗した場合， `alt^a 属性が［
-在れば その内容／無ければ要素~自身の内容
+在るならば その内容／無いならば 要素~自身の内容
 ］で置換する。
 ◎
 Replace &lt;figure&gt; elements with the referenced document, or, failing that, with either the contents of the alt attribute or the contents of the element itself if there is no alt attribute
@@ -877,8 +886,7 @@ <h2 title="Inserting and Replacing Content: the content property">1. 内容の
 `marker$pe ／
 `placeholder$pe ／
 `file-selector-button$pe
-］疑似要素~用には，
-それ自身（ `normal$v ）に算出される。
+］疑似要素~用には，同じ `normal$v に算出される。
 ◎
 For ::marker, ::placeholder, and ::file-selector-button, this computes to itself (normal).
 </dd>
@@ -934,7 +942,8 @@ <h2 title="Inserting and Replacing Content: the content property">1. 内容の
 	<dd class="issue">
 上の`無効な画像$の挙動は、
 ~Chromeに見られる。
-これでいいのか？ もっと良い挙動を利用できる／利用するべきでは？
+これでいいのか？
+もっと良い挙動を利用できるのでは？利用するべきでは？
 ◎
 The above invalid image behavior appears to be what Chrome is doing. Is this okay? Is there a better behavior we can/should use?
 </dd>
@@ -963,11 +972,11 @@ <h2 title="Inserting and Replacing Content: the content property">1. 内容の
 This value has historically been treated as &lt;content-list&gt; on ::before and ::after. Presumably there’s a Web-compat requirement on this, so these pseudo-elements might need an exception. [Issue #2889]
 </dd>
 
-	<dt id="typedef-content-content-list">`content-list$t</dt>
+	<dt id="valdef-content-content-list">`content-list$t</dt>
 	<dd>
 要素の内容を［
 指定された 1 個~以上の各~値に対応する，指定された順序による`匿名$な`行内~box$たち
-］に置換する。
+］で置換する。
 通常の内容は、
 `display$p が `none^v にされていたかのように抑止され，~boxを生成しなくなる。
 ◎
@@ -1006,7 +1015,7 @@ <h2 title="Inserting and Replacing Content: the content property">1. 内容の
 	<dd>
 この仕様は，［
 ~UAは，どちらの挙動を利用するモノトスルか
-］は 意図的に定義しないが、
+］を意図的に定義しないが、
 ~UAは，一貫して片方のみを利用するモノトスル。
 ◎
 This specification intentionally does not define which behavior a user agent must use, but it must use one or the other consistently.
@@ -1029,10 +1038,29 @@ <h2 title="Inserting and Replacing Content: the content property">1. 内容の
 ◎
 Specifies the "alt text" for the element. See § 1.2 Alternative Text for Accessibility for details. If omitted, the element has no "alt text".
 </dd>
+	<dd class="example">
+<p>
+“代替~text” 内で `counter$t を正しく
+— 【 “代替~text” 用の構文が？】~supportされない~browserにおいて【も通用するよう】 —
+利用するためには、
+`content$p ~propを重ねて指定するべきである
+— ~fallback用として “代替~text” 内に~counterを伴わないものと，
+“代替~text” 内で~counterを利用するものを。
+◎
+To correctly use &lt;counter&gt; in "alt text" in unsupported browsers one should specify content property twice. First, a fallback without counter in "alt text". Second, use counter in "alt text".
+</p>
+
+<pre class="lang-css">
+::before {
+  content: "Chapter" counter(chapter);
+  content: "Chapter" counter(chapter) / "Chapter" counter(chapter);
+}
+</pre>
+	</dd>
 </dl>
 
 <p class="issue">
-`contents$v ~keywordは `content$f に置換するベキか？
+`contents$v ~keywordは `content$f で置換するべきか？
 ◎
 Should the contents keyword be replaced with content()?
 </p>
@@ -1112,7 +1140,7 @@ <h3 title="Alternative Text for Accessibility">1.2. ~accessibilityを得るた
 ◎
 or a localized attribute from the DOM:
 </span>
-  attr("data-alt")
+  ... / attr("data-alt");
   */
 }
 </pre>
@@ -1153,8 +1181,8 @@ <h3 title="Alternative Text for Accessibility">1.2. ~accessibilityを得るた
 <p class="trans-note">【†
 “`black right-pointing pointer^en”
 は，~Unicodeに定義される "►" （ U+25BA ）の文字~名であり、
-文字~名は おそらく英語~名しか正式に定義されていないので、
-`内容~言語$が英語でない環境でも，このとおり発話されるかもしれない。
+文字~名は，おそらく英語~名しか正式に定義されていないので、
+`内容~言語$が英語でない場合でも，このとおり発話されるかもしれない。
 】</p>
 </div>
 
@@ -1168,14 +1196,13 @@ <h2 title="Generated Content Values: the &lt;content-list&gt; type">2. 生成d
 画像, 文字列, ~counterの値, 要素の~text値
 ］も含め， 1 個以上の`匿名$な`行内~box$で要素を埋めるために `content$p 内で利用される。
 この節では、
-これがとり得る値を種類別にとりあげる。
+これがとり得る値を列挙する。
 ◎
 The &lt;content-list&gt; value is used in content to fill an element with one or more anonymous inline boxes, including images, strings, the values of counters, and the text value of elements. In this section we enumerate the possibilities.
 </p>
 
 <p>
-`content-list$t の構文は、
-次で定義される：
+`content-list$t の構文は：
 ◎
 The syntax of &lt;content-list&gt; is defined as:
 </p>
@@ -1502,7 +1529,7 @@ <h4 title="Quotation Mark System: the quotes property">2.4.1. 引用符~system
 一般に，親の`算出d値$を継承することと等価になる
 — `auto$v `it^en【？】 は親が利用したものと同じ`内容~言語$を利用して解決されることを除いて。
 ◎
-Specifies the same quotation mark system as the the parent. In general this is equivalent to inheriting the parent’s computed value, except that auto it resolves using the same content language that the parent used.
+Specifies the same quotation mark system as the parent. In general this is equivalent to inheriting the parent’s computed value, except that auto it resolves using the same content language that the parent used.
 </dd>
 	<dd class="issue">
 <p>
@@ -1592,7 +1619,7 @@ <h4 title="Inserting Quotation Marks: the *-quote keywords">2.4.2. 引用符の
 ］の出現は、
 `引用符-深さ$に基づいて，［
 `quotes$p ~propに指定された`引用符~system$に定義されるとおりの引用符~文字列
-］に置換される。
+］で置換される。
 ◎
 Quotation marks can be inserted in appropriate places in a document with the open-quote and close-quote values of the content property. Each occurrence of open-quote or close-quote is replaced by a quotation mark string as defined by the quotation mark system specified by the quotes property, based on the depth of nesting.
 </p>
@@ -1934,8 +1961,10 @@ <h4 title="The leader() function">2.5.1. `leader^f 関数</h4>
 </div>
 
 <p class="issue">
-~leaderは、
-より後にある内容は右寄せされる（終端に整列される）とする前提に依存するか？
+~leaderは、［
+より後にある内容は、
+終端に整列される（左横書きなら右へ寄せられる）
+］とする前提に依存するか？
 ◎
 Do leaders depend on the assumption that the content after the leader is right-aligned (end-aligned)?
 </p>
@@ -2806,9 +2835,9 @@ <h2 title="Bookmarks">3. ~bookmark</h2>
 ~navi用の援助として
 `~bookmark@
 の利用-を許容する。
-文書~内の要素に指定された~bookmarkは、［
+文書を成す要素に指定された~bookmarkは、［
 ~link, その~labelを成す~text, ~level値
-］の組を要素に供する。
+］を当の要素に供する。
 各~bookmarkは、
 3 個の~prop［
 `bookmark-level$p,
@@ -2820,7 +2849,7 @@ <h2 title="Bookmarks">3. ~bookmark</h2>
 </p>
 
 <p>
-利用者が~bookmarkを作動化したとき、
+利用者が~bookmarkを作動化したときは、
 ~UAは，その参照-先を利用者の注目を引く地点へ持ってくるモノトスル
 — ちょうど、
 素片~URLにより参照-先の要素へ~navigateしたかのように。
@@ -2851,9 +2880,11 @@ <h2 title="Bookmarks">3. ~bookmark</h2>
 <h3 title="Setting a Bookmark: the bookmark-level property">3.1. ~bookmarkの設定-法： `bookmark-level^p ~prop</h3>
 
 <p>
-`bookmark-level$p ~propは、
-~bookmarkを作成するかどうか，そうならばどの~levelにするかを決定する。
-この~propが無い, または値 `~noneB$v にされている場合、［
+`bookmark-level$p ~propは、［
+~bookmarkを作成するかどうか,
+そうする場合 その~levelは何になるか
+］を決定する。
+この~propの算出d値が `~noneB$v になる【！is absent, or has】場合、［
 `bookmark-label$p ／ `bookmark-state$p
 ］の値に関わらず，~bookmarkは生成されるベキでない。
 ◎
@@ -2887,7 +2918,8 @@ <h3 title="Setting a Bookmark: the bookmark-level property">3.1. ~bookmarkの設
 	<dt id="valdef-bookmark-level-integer">`integer [1,∞]$t</dt>
 	<dd>
 ~bookmarkの~levelを定義する
-— ~top-levelは 1 とする（ 0 以下の値は妥当でない）。
+— 1 が~top-levelを表すとする
+（ 0 以下の値は妥当でない）。
 ◎
 defines the level of the bookmark, with the top level being 1 (negative and zero values are invalid).
 </dd>
@@ -2910,8 +2942,8 @@ <h3 title="Setting a Bookmark: the bookmark-level property">3.1. ~bookmarkの設
 
 <p class="note">注記：
 ~bookmarkは、
-各~levelの厳密な階層を作成する必要は無い。
-【！~levelが飛び飛びになっていても／~tree構造に合致していなくともよい。】
+~levelたちが成す厳密な階層を作成する必要はない。
+【言い換えれば、~levelたちに指定する数は， 1 から開始する必要も~~連続的になる必要もない。】
 ◎
 Note: Bookmarks do not need to create a strict hierarchy of levels.
 </p>