[css-images-4] Described how to interpolate between fr units and lengths or percentages w3c/csswg-drafts@d802a6c

Author: triple-underscore

css-images4-ja.html

@@ -188,8 +188,8 @@
 ●●options
 
 spec_title:CSS Images Module Level 4
-spec_date:2025-11-02
-trans_update:2025-11-04
+spec_date:2025-11-06
+trans_update:2025-11-08
 source_checked:240719
 page_state_key:CSS
 original_url:https://drafts.csswg.org/css-images-4/
@@ -214,6 +214,7 @@
 e:element
 a:attr
 et:event-type
+op:op
 
 ●●tag_map
 p:code
@@ -232,6 +233,7 @@
 I:code
 m:code
 et:code
+op:span
 V:var
 i:i
 em:em
@@ -473,6 +475,7 @@
 角括弧付き範囲~記法:~CSSVAL#css-bracketed-range-notation
 関数-記法:~CSSVAL#functional-notation
 ~style資源を~fetchする:~CSSVAL#fetch-a-style-resource
+算出d長さ:~CSSVAL#computed-length
 
 混合-百分率たちを正規化する:~CSSVAL5#normalize-mix-percentages
 
@@ -626,6 +629,7 @@
 確率的:stochastic:~
 収束-:converge:~
 残余:leftover:~
+公式:formula:~
 
 	利用元~単位:user coordinate
 	変換
@@ -634,6 +638,9 @@
 	占める:share
 	N-way Porter-Duff
 	Wikipedia
+	%百分率~総和:sum-of-percents
+	%固定的~長さ~総和:sum-of-fixed
+	%~flex総和:sum-of-flexes
 
 	●gradient
 gradient:
@@ -875,6 +882,7 @@
 左横書き:LTR:~
 右横書き:RTL:~
 双向性:bidi::~
+固定的:fixed:~
 
 
 	●構文
@@ -5406,91 +5414,95 @@ <h3 title="Interpolating &lt;gradient&gt;">7.3. `gradient$t の補間-法</h3>
 <h3 title="Interpolating stripes()">7.4. `stripes$f の補間-法</h3>
 
 <p>
-2 個の `stripes$f は、
+`stripes$f どうしは、
 ~gradientと類似に補間でき，
 一方の画像から他方へ滑らかな~animationを許容する。
 ただし、
-`stripes$f どうしの補間が許容されるためには，次に挙げる少数の制約がある：
-◎
-Similar to gradients, two stripes() can be interpolated, allowing for smooth animations from one image to another. There are only a few restrictions on what stripes() are allowed to be interpolated:
-</p>
-<ul>
-	<li>
+補間が許容されるためには，
 引数【！Both the starting and ending image】を成す `color-stripe$t の個数は互いに同じでなければナラナイ。
+この拘束が満たされない場合、
+汎用な画像~用の `cross-fade$f を利用して補間するモノトスル。
+満たされる場合、
+以下に述べるとおりに補間するモノトスル：
 ◎
-Both the starting and ending image must have the same number of &lt;color-stripe&gt;s.
-</li>
-	<li>
-対応する `color-stripe$t を成す太さの型は互いに同じ
-— すなわち，［
-どちらも `length-percentage$t ／ どちらも `flex$t
-］ —
-でなければナラナイ。
-◎
-Each pair of interpolated thicknesses must be of the same type, i.e. both must either be of type &lt;length-percentage&gt;, or &lt;flex&gt;.
-</li>
-</ul>
+Similar to gradients, two stripes() can be interpolated, allowing for smooth animations from one image to another. There is only one restriction on what stripes() are allowed to be interpolated.＼
+Both the starting and ending image must have the same number of &lt;color-stripe&gt;s.＼
+If the two images satisfy this constraint, they must be interpolated as described below.＼
+If they fail the constraint, they must be interpolated using cross-fade() as for generic images.
+</p>
 
-<p>
-両~画像が：
-◎
-↓</p>
 <ul>
 	<li>
-上の拘束をいずれも満たす場合、
-以下に述べるとおりに補間するモノトスル。
+各~縞（ `color-stripe$t ）【！component and stripe】どうし
+— ［
+開始~画像, 終了~画像
+］内の同じ~indexにある縞どうし —
+を独立に補間する。
 ◎
-If the two images satisfy both constraints, they must be interpolated as described below.＼
-</li>
-	<li>
-1 個目の拘束しか満たさない場合、
-50% の所で一足飛びに遷移するモノトスル
-（将来の仕様により他が指定されない限り）。
+Interpolate each component and stripe of the images independently.
 ◎
-If they fail the second one only, they must be abruptly transitioned at 50% (unless otherwise specified by a future specification).＼
+To interpolate a stripe, first match each stripe in the start image to the corresponding stripe at the same index in the end image.＼
 </li>
 	<li>
-他の場合、
-汎用な画像~用の `cross-fade$f を利用して補間するモノトスル
-◎
-If they fail the first constraint, they must be interpolated using cross-fade() as for generic images.
-</li>
-</ul>
-
-<p class="note">注記：
-50% の所で一足飛びに遷移させるのは、
-内容が~cross-fadeに依拠しないようにして，将来に［
-この事例~用に，もっと賢い補間~規則を追加できるようにする
-］ためである。
+<p>
+縞どうしを補間するときは、
+その［
+太さ, 色
+］を独立に補間する。
 ◎
-Note: The abrupt transition at 50% is so that content will not rely on cross-fading, and smarter interpolation rules can be added for this case in the future.
+Then, for each pair of stripes, interpolate the thickness and color independently.＼
 </p>
 
-<ol>
+<p class="trans-note">【
+［
+太さどうしは`百分率~値と次元~値の組合nの補間＠~CSSVAL#combine-mixed$／
+色どうしは`色の補間-法＠~CSSCOLOR#interpolation$
+］に従うであろう。
+】</p>
+	</li>
 	<li>
-画像を成す各~縞（ `color-stripe$t ）【！component and stripe】は、
-独立に補間する。
+<p>
+太さを成す `flex$t 値 %~flex値 は、
+次の公式を利用した結果の `length-percentage$t として補間する
+⇒
+`max^op( 0, 100% ~MINUS %百分率~総和 ~MINUS %固定的~長さ~総和 ) ~MUL %~flex値 ~DIV `max^op( 1, %~flex総和 )
 ◎
-Interpolate each component and stripe of the images independently.
+&lt;flex&gt; values are interpolated as &lt;length-percentage&gt;s using the following formula:
+• max(0, 100% - sum-of-percents - sum-of-fixed) * flex value / max(1, sum-of-flexes)
+</p>
+
+<div>
+<p>
+ここで
+（以下、
+“当の関数” は， %~flex値 を包含している `stripes$f 関数を指す）：
+</p>
+		<ul>
+			<li>
+%百分率~総和 は、
+当の関数~内の `percentage$t すべての総和
 </li>
-	<li>
+			<li>
 <p>
-縞を補間するときは、［
-開始~画像, 終了~画像
-］内の同じ~indexにある各~縞~pairに対し，その［
-太さ, 色
-］を独立に補間する。
+%固定的~長さ~総和 は、
+当の関数~内の固定的な `length$t すべての総和
 </p>
 
 <p class="trans-note">【
-太さは `length^t 値の`補間-法＠~CSSVAL#combine-dimensions$,
-色は`色の補間-法＠~CSSCOLOR#interpolation$
-に従うことになろう。
+“固定的（ `fixed^en ）な `length^t” とは、
+絶対~化された `length^t （`算出d長さ$）を意味すると思われる。
 】</p>
-◎
-To interpolate a stripe, first match each stripe in the start image to the corresponding stripe at the same index in the end image. Then, for each pair of stripes, interpolate the thickness and color independently.
+			</li>
+			<li>
+%~flex総和 は、
+当の関数~内の `flex$t 値~すべての総和
 </li>
-</ol>
+		</ul>
+◎
+where sum-of-percents is the sum of all &lt;percentage&gt;s in the stripes() function, sum-of-fixed is the sum of all fixed &lt;length&gt;s in the function, and sum-of-flexes is the sum of all &lt;flex&gt; values.
+</div>
+	</li>
+</ul>
 
 		</section>
 	</section>