CSS Spatial Navigation Level 1

`空間的~navi~eventを配送する@ ときは、 所与の ( %~target, %~event名, %方向, %関係する~target ) に対し ⇒ `~eventを発火する$( %~target, %~event名, `NavigationEvent$I ) — 次のように初期化して ⇒＃ `dir$m ~SET %方向, `relatedTarget$m ~SET %関係する~target, `bubbles^m 属性 ~SET ~T, `cancelable^m 属性 ~SET ~T

【 この手続きは、 他所の記述を集約する／明確化するために，この訳に導入している。 】

`空間的~navi手続き@ （ `spatial navigation steps^en ）は、 所与の ( %方向 ) に対し，次を走らす： ◎ To run the spatial navigation steps in direction, do the following:

1. %探索~起点 ~LET `探索~起点を設定する$() ◎ Let searchOrigin be the result of setting the search origin.
2. %~event~target ~LET %探索~起点 ◎ ↓

3. ~IF［ %探索~起点 は`~node$でない（位置である【`空間的~navi始点$を見よ】） ］ ⇒ %~event~target ~SET %探索~起点 を包含する`~node$

   【 %~event~target は、 ~text~nodeにもなり得ることになる（どの~nodeも `EventTarget$I を実装する）。 】

   ◎ If searchOrigin is an node, let eventTarget be searchOrigin ◎ else (assert: searchOrigin is a position) let eventTarget be the node which contains searchOrigin
4. %文書 ~LET %~event~target の`~node文書$ ◎ ↓
5. ~IF［ %~event~target は［ `文書$／`文書~要素$ ］である ］ ⇒ %~event~target ~SET ［ %文書 の`~body要素$ ~NEQ ~NULL ならば それ ／ ~ELSE_ %文書 の`文書~要素$ ］ ◎ If eventTarget is the Document or the document element, set eventTarget be the body element if it is not null or to the document element otherwise.
6. ~IF［ %~event~target は`手動で~scrollできる$ 【！ 不要：%~event~target は`~scroll容器$である】 ］~AND［ %~event~target 上の `spatial-navigation-action$p ~propの算出d値 ~EQ `scroll$v ］ ⇒＃ `要素をある方向へ~scrollする$( %~event~target, %方向 )； ~RET ◎ If eventTarget is scroll container and the computed value of the spatial-navigation-action property on eventTarget is scroll and eventTarget can be manually scrolled, then directionally scroll the element eventTarget and return.

7. ~IF［ %~event~target は［ `~scroll容器$ ／ `文書$ ］である ］： ◎ Else, if eventTarget is either a scroll container or the document

   1. %可視のみか ~LET ~IS［ %~event~target の `spatial-navigation-action$p ~propの算出d値 ~NEQ `focus$v ］ ◎ ↓
   2. %候補~群 ~LET `要素の中で~focus可能な区画を見出す$( %~event~target, %可視のみか ) ◎ Let candidates be the result of finding focusable areas within eventTarget with the argument visibleOnly set to false if computed value of the spatial-navigation-action property on eventTarget is focus or to true otherwise.

   3. ~IF［ %~event~target 上の `spatial-navigation-action$p ~propの算出d値 ~NEQ `focus$v ］~AND［ %~event~target は`手動で~scrollできる$ ］：

      1. `要素をある方向へ~scrollする$( %~event~target, %方向 )；
      2. ~RET
      ◎ If the computed value of the spatial-navigation-action property on eventTarget is not focus and eventTarget can be manually scrolled, then directionally scroll the element eventTarget in direction and return.

   4. ~IF［ %候補~群 は空でない ］： ◎ Else if candidates contains at least 1 item:

      1. %最良な候補 ~LET `最良な候補を選定する$( %候補~群, %方向, %探索~起点 ) ◎ Let bestCandidate be the result of selecting the best candidate within candidates in direction starting from searchOrigin
      2. `空間的~navi~eventを配送する$( %~event~target, `navbeforefocus$et, %方向, %最良な候補 ) 【！#dispatches-navbeforefocus-event】 ◎ Dispatches navbeforefocus event at eventTarget with direction and bestCandidate.
      3. `~objを~focusする$( %最良な候補 ) ◎ Run the focusing steps for bestCandidate and＼
      4. ~RET ◎ return
8. %容器 ~LET ［ %~event~target の先祖である`空間的~navi容器$のうち， %~event~target に最も近いもの ］ ◎ （前段の一部 — 不要） •• Else, fall back to the next step. • Else, fall back to the next step. ◎ Let container be the nearest ancestor of eventTarget that is a spatial navigation container.
9. %候補~群 ~LET ε ◎ ↓

10. ~WHILE 無条件： ◎ Loop:＼

    1. %可視のみか ~LET ~IS［ %容器 の `spatial-navigation-action$p ~propの算出d値 ~NEQ `focus$v ］ ◎ ↓
    2. %候補~群 ~SET `要素の中で~focus可能な区画を見出す$( %容器, %可視のみか ) 【！excluding eventTarget 不要？】 ◎ Let candidates be the result of finding focusable areas within container with the argument visibleOnly set to false if computed value of the spatial-navigation-action property on container is focus or to true otherwise, excluding eventTarget
    3. ~IF［ %候補~群 は空でない ］ ⇒ ~BREAK ◎ If candidates is empty:

    4. ~IF［ %可視のみか ~EQ ~T ］~AND［ %容器 は`手動で~scrollできる$ 【！不要`~scroll容器$である】 ］：

       1. `要素をある方向へ~scrollする$( %容器, %方向 )；
       2. ~RET
       ◎ If the computed value of the spatial-navigation-action property on container is not focus and container is a scroll container that can be manually scrolled, directionally scroll the element container in direction and return. ◎ Else,
    5. `空間的~navi~eventを配送する$( %~event~target, `navnotarget$et, %方向, %容器 ) 【！#dispatches-navnotarget-event】 ◎ Dispatches navnotarget event at eventTarget with direction and container.

    6. ~IF［ %容器 は`文書~要素$である ］：

       1. %~navigable ~LET %容器 の`~node文書$の`~node~navigable$
       2. ~IF［ %~navigable は`辿可能な~navigable$である ］ ⇒ ~RET — ~UAは、 %方向 を尊守しつつ，自前の~controlがあれば ~focusをそこへ転送してもヨイ。
       3. %探索~起点 ~SET %~navigable の`容器$nav
       4. %~event~target ~SET %探索~起点
       5. %容器 ~SET %探索~起点
       ◎ If container is the document element of the top-level browsing context, then return. The user agent may transfer focus to its own controls (if any) honouring direction. ◎ Else, if container is the document element of a nested browsing context then: • Set searchOrigin to container’s browsing context container • Set eventTarget be searchOrigin ◎ ↓
    7. %容器 ~SET %容器 の先祖である`空間的~navi容器$のうち %容器 に最も近いもの ◎ • Set container to the nearest ancestor of eventTarget that is a spatial navigation container. • Return to the step labeled loop. ◎ Else, set container to its closest ancestor that is itself a spatial navigation container and return to the step labeled loop.
11. %最良な候補 ~LET `最良な候補を選定する$( %候補~群, %方向, %~event~target ) ◎ Let bestCandidate be the result of selecting the best candidate within candidates in direction starting from eventTarget.
12. `空間的~navi~eventを配送する$( %~event~target, `navbeforefocus$et, %方向, %最良な候補 ) ◎ Dispatches navbeforefocus event at eventTarget with direction and bestCandidate.
13. `~objを~focusする$( %最良な候補 ) ◎ Run the focusing steps for bestCandidate and return.

`探索~起点を設定する@ （ `set the search origin^en ）ときは、 次の手続きを走らす — 加えて，`探索~起点$をその結果に設定する： ◎ To set the search origin, run the following steps:

1. %探索~起点 ~LET `現在の被focus区画$tlTの`~DOM~anchor$ ◎ Let searchOrigin be the DOM anchor of the currently focused area of a top-level browsing context.
2. %始点 ~LET `空間的~navi始点$ ◎ ↓
3. ~IF［ %始点 ~NEQ ε【！~NULL】 ］~AND［ %始点 は %探索~起点 の内側にある ］ ⇒ ~RET %始点 ◎ If the spatial navigation starting point is not null and it is inside searchOrigin, then return it.
4. ~RET %探索~起点 ◎ Otherwise, return searchOrigin.

%~focus~target の状態sが［ ~focusを移動する以外の何か ］により変化したときは、 `探索~起点を更新する@ — `探索~起点$を %~focus~target に応じて次の結果に設定する： ◎ If the status of focus target changed not by moving the focus, update the search origin as following:

【 これは他所にどう影響する？ 上の~algoの最初の段における %探索~起点 の設定を以下に改めるのか？それとも結果を以下に改めるのか？ 】【 以下に与える条件は、 おそらく 2, 3, 1 個目の順に優先されるべきであろう （例えば， “除去された” なら、 必然的に “具現化されていない” ことになる）。 】

1. %~focus~target は［ `実際に不能化され$た／ `不活$になった／ `具現化され$なくなった ］ ⇒ %~focus~target の`境界~box$ ◎ If focus target becomes actually disabled or expressly inert or not being rendered, then let searchOrigin be the boundary box of focus target.
2. %~focus~target は`除去された$ ⇒ 除去される直前における， %~focus~target の`境界~box$ ◎ If focus target is removed, then let searchOrigin be the boundary box of focus target with the position of focus target when it existed.
3. %~focus~target は完全に~screenから外れている ⇒ ［ 可視な`空間的~navi容器$のうち， %~focus~target に最も近い【先祖である？】もの ］の表示域 ◎ If focus target is completely off-screen, then let searchOrigin be the viewport of focus target’s nearest visible spatial navigation container.
4. 他の場合 ⇒ 【更新しない？ “変化したとき” は上に挙げたもので網羅されている？】 ◎ ↑

注記： ~UAは、 例えば，~focusされている要素が［ ~mouseにより~scrollされた／表示域から消え失せた ］とき，`探索~起点を更新する$ベキである。 ◎ NOTE: The user agent should update the search origin, for example, when the focused element was scrolled out by mouse scrolling or vanished from the viewport.

`要素の中で~focus可能な区画を見出す@ （ `find focusable areas within a containing element^en ）ときは、 所与の ( 要素 %C, 真偽値 %可視のみか （省略時は ~T ）) に対し，次の手続きを走らす： ◎ To find focusable areas within a containing element C, with an optional visibleOnly argument that defaults to true, run the following steps:

1. %~focus可能~集合 ~LET ［ `~focus可能な区画$のうち，その`~DOM~anchor$は %C の子孫であるもの ］からなる`有順序~集合$ — ただし、 `~box$が何個かの`~box断片$からなる事例では，各`~box断片$を別々なものと見なす。 ◎ Let focusables be the set of all the focusable areas whose DOM anchor are descendants of C. In the case of boxes with several box fragments, each box fragment is considered separately.

2. ~UAは、 次を行うベキである ⇒ %~focus可能~集合 から次を満たす~itemを`除去する$ ⇒ ~itemの`~DOM~anchor$の `tabindex$a 属性は負な値に設定されている ◎ The user agent should remove from focusables items that have a DOM anchor whose tabindex attribute is set to a negative value.

   注記： これが、 “ベキ” とされているのは、［ `逐次的~focus~navi順序$からは，負な~tabindexを伴う要素を除外する “ベキ” ］ものと `tabindex^a にて定義されているからである。 【`~tabindex値$を見よ。】 ◎ Note: This is a "SHOULD" in order to mirror the exclusion of elements with negative tabindex from the sequential focus navigation order as defined in tabindex.

3. ~IF［ %可視のみか ~EQ ~F ］ ⇒ ~RET %~focus可能~集合 ◎ If visibleOnly is false, return focusables.

   注記： %~focus可能~集合 は空になることもある。 ◎ Note: focusables may be empty

4. %可視~集合 ~LET %~focus可能~集合 から次に該当する~itemを除去した結果 ⇒ その`境界~box$は %C の`内側~区画$に一部でも入らないもの ◎ Let visibles be the subset of items in focusables whose boundary box is at least partly within the inside area of C.

   ~scroll容器~内で現在~可視でない要素は除き、 空間的~naviは，~clickできない要素 — 例えば，他の要素により遮られていることに因り — を自動的に除外しない。 ［ 利用者が そのような要素を実際に~focusして作動化した場合に，~app~logicにおける前提を覆す ］のを避けるため，および［ 不可視あるいは外見的に到達-不能な要素に~focusして，利用者を惑わす ］のを避けるためには、 作者は［ 要素を逐次的~naviから到達-不能にするのと同じ最善な実施 ］を利用して，これらの要素を空間的~naviから到達-不能にするベキである — `tab-index="-1"^c や `inert$a 属性 などを利用して。 ◎ Except for elements that are in the currently non visible part of a scroller, spatial navigation does not automatically exclude elements which cannot be clicked on, for example, due to being obscured by some other element. To avoid breaking assumptions in the application logic if a user actually focuses and activates such an element, and to avoid confusing users by focusing invisible or apparently unreachable elements, the author should use make these elements unreachable to spatial navigation using the same best practices as for making elements unreachable to sequential navigation, such as using tab-index="-1" or the inert attribute.

5. ~RET %可視~集合 ◎ Return visibles.

   注記： %可視~集合 は空になることもある。 ◎ Note: visibles may be empty

`最良な候補を選定する@ （ `select the best candidate^en ）ときは、 所与の ( `有順序~集合$ %候補~群, 方向 %方向, %探索~起点 ) に対し，次の手続きを走らす： ◎ To select the best candidate within a set of candidates in a direction dir, starting from searchOrigin, run the following steps:

1. ~IF［ %候補~群 は`空$である ］ ⇒ ~RET ~NULL ◎ If candidates is empty, return null
2. ~IF［ %候補~群 は 1 個の~itemのみからなる ］ ⇒ ~RET その~item ◎ If candidates contains a single item, return that item
3. %内側~区画 ~LET %探索~起点 の`内側~区画$ ◎ ↓
4. %境界~box ~LET %探索~起点 の`境界~box$ ◎ ↓

5. %内側にあるものたち ~LET ［ %候補~群 を成す~itemのうち，その`境界~box$は ~OR↓ を満たすもの ］たちが成す下位集合： ◎ Let insiders be the subset of candidates

   • %内側~区画 に全部的に重合する 【 %内側~区画 に入りきる？（完全に覆うのではなく）】 ◎ whose boundary box fully overlaps with inside area of searchOrigin

   • %内側~区画 に部分的に — %方向 に応じて次を満たすように — 重合する： ◎ whose boundary box partially overlaps with inside area of searchOrigin as

     • `down$l ⇒ 上端~辺は %境界~box の上端~辺より下にある ◎ top edge is below the top edge of searchOrigin’s boundary box if dir is down
     • `up$l ⇒ 下端~辺は %境界~box の下端~辺より上にある ◎ bottom edge is above the bottom edge of searchOrigin’s boundary box if dir is up
     • `left$l ⇒ 右端~辺は %境界~box の右端~辺より左にある ◎ right edge is left of the right edge of searchOrigin’s boundary box if dir is left
     • `right$l ⇒ 左端~辺は %境界~box の左端~辺より右にある ◎ left edge is right of the left edge of searchOrigin’s boundary box if dir is right

     注記： 要素【~item】が %探索~起点 とどう重合するかについての より詳細な条件【何を指す？】は、 ~focusの動きが成す連列【`逐次的~focus~navi順序$？】に影響する。 この連列は、 ~UXに関係するので，~UA定義な仕組みに依存する。 ◎ NOTE: More detail condition about how the element is overlapped with the search origin affects the sequence of focus movement. The sequence of focus movement is related to UX, so it depends on the UA-defined mechanism.

   注記： この下位集合~化は、 要請された方向の反対へ行くのを避けるために必要yである。 ◎ Note: this sub-setting is necessary to avoid going in the opposite direction than the one requested.

6. ~IF［ %内側にあるものたち は空でない ］ ⇒ ◎ If insiders is non empty,

   1. %最も近いものたち ~LET %内側にあるものたち を成す~itemのうち［ その`境界~box$は %方向 に応じて次を満たすもの ］からなる下位集合： ◎ Let closest subset be the subset of insiders whose boundary box’s

      • `down$l ⇒ 上端~辺は %内側~区画 の上端~辺に最も近い ◎ top edge is closest to the top edge of inside area of searchOrigin if dir is down
      • `up$l ⇒ 下端~辺は %内側~区画 の下端~辺に最も近い ◎ bottom edge is closest to the bottom edge of inside area of searchOrigin if dir is up
      • `left$l ⇒ 右端~辺は %内側~区画 の右端~辺に最も近い ◎ right edge is closest to the right edge of inside area of searchOrigin if dir is left
      • `right$l ⇒ 左端~辺は %内側~区画 の左端~辺に最も近い ◎ left edge is closest to the left edge of inside area of searchOrigin if dir is right
   2. %最も近いものたち から次を満たす~item %A をすべて除去する† ⇒ %最も近いものたち 内に別の~item %B が在って，次を満たす ⇒ ［ %A, %B の`境界~box$は重合する ］~AND［ %A より %B の方が`~CSS塗ng順序$において上層にある ］ ◎ If closest subset contains a single item, return that item, else return the first item of closest subset in document order, unless its boundary box overlaps with the boundary box of another item and that item is higher in the CSS painting order. In that case, return that item instead, unless it too is overlapped with another higher item, recursively.
   3. ~RET %最も近いものたち 内の文書~順序で最初の~item ◎ ↑

   【† 原文の再帰を孕む記述は，解りにくい（そのまま訳すと条件の適用-順序が不明瞭になる）ので、 この訳では等価に変形している。 下に現れる似た記述も同様。 】

7. ~ELSE： ◎ Else

   1. %候補~群 ~SET %候補~群 を成す~itemのうち，その`境界~box$ %~item~box が［ %境界~box と重合しない ］~AND［ %方向 に応じて次を満たす ］ものからなる下位集合： ◎ Set candidates be the subset of its items which satisfies one of the following conditions: • the item doesn’t overlap with searchOrigin and its boundary box’s

      • `down$l ⇒ 上端~辺は %境界~box の下端~辺より下にある ◎ top edge is below the bottom edge of searchOrigin’s boundary box if dir is down
      • `up$l ⇒ 下端~辺は %境界~box の上端~辺より上にある ◎ bottom edge is above the top edge of searchOrigin’s boundary box if dir is up
      • `left$l ⇒ 右端~辺は %境界~box の左端~辺より左にある ◎ right edge is left of the left edge of searchOrigin’s boundary box if dir is left
      • `right$l ⇒ 左端~辺は %境界~box の右端~辺より右にある ◎ left edge is right of the right edge of searchOrigin’s boundary box if dir is right
   2. %候補~群 を成す ~EACH( %候補 ) に対し ⇒ %候補 の `距離^i ~SET `最短~距離を見出す$( %探索~起点【, %候補, %方向 】) 【！＊ "and candidate in direction dir" を削除したのは何故？】 ◎ For each candidate in candidates, find the shortest distance between searchOrigin.
   3. %候補~群 から次を満たす~itemをすべて除去する ⇒ %候補~群 内の別の~itemより `距離^i が長い ◎ Return the item of the candidates set that has the smallest distance.＼
   4. %候補~群 から次を満たす~item %A をすべて除去する ⇒ %候補~群 内に別の~item %B が在って，次を満たす ⇒ ［ %A, %B の`境界~box$は重合する ］~AND［ %A より %B の方が`~CSS塗ng順序$において上層にある ］ ◎ If several have the same distance, return the first one in document order, unless its boundary box overlaps with the boundary box of another item at the same distance, and that item is higher in the CSS painting order. In that case, return that item instead, unless it too is overlapped with another higher item at the same distance, recursively.
   5. ~RET %候補~群 内の文書~順序で最初の~item ◎ ↑

`最短~距離を見出す@ （ `find the shortest distance^en ）ときは、 所与の ( %基準, %候補, %方向 ) に対し，［ %基準 の境界~box ／ %候補 の境界~box ］の中にある~point［ %P1 ／ %P2 ］を見出す — 次に定義される %距離 を最小~化するような ⇒ %距離 ~EQ %~euclidean距離 ~PLUS %転移 ~MINUS %整列 ~MINUS %重合する面積の平方根 ◎ To find the shortest distance between a reference and a candidate in direction dir, find the points P1 and P2, respectively within the boundary boxes of the reference and of the candidate, that minimize the distance as defined as below: • distance = euclidean + displacement - alignment - sqrt(Overlap)

各~項の意味は、 以下に従う： ◎ The meaning of each term is as follows:

%~euclidean距離

%P1 から %P2 までの~euclidean距離 ◎ The euclidean distance between P1 and P2

%転移

［ %基準, %候補 ］どうしの %方向 における転移の度合い【直交-方向におけるずれ】 ⇒ %転移 ~EQ ( ( %方向 に直交な軸における %P1 から %P2 までの絶対~距離 ) ~PLUS %直交-偏り ) ~MUL %直交-重み ◎ The degree of displacement in dir between the reference and the candidate, defined as ◎ displacement = (absolute distance on the axis orthogonal to dir between P1 and P2 + orthogonalBias) * orthogonalWeight

%直交-偏り

%方向 に応じて：

• `left$l ／ `right$l ⇒ %基準 の限界~boxの縦幅 ~DIV 2
• `up$l ／ `down$l ⇒ %基準 の限界~boxの横幅 ~DIV 2

限界~boxの各~辺は、 軸に平行とする

◎ If the dir is left or right, the height of the axis-aligned bounding box of reference / 2 ◎ Else if the dir is up or down, the width of the axis-aligned bounding box of reference / 2

%直交-重み

%方向 に応じて：

• `left$l ／ `right$l ⇒ 30
• `up$l ／ `down$l ⇒ 2

【この相違が何に由来するのかは不明。仮に，横組みにおける行の方向に起因するならば、縦組みの下では入れ替える必要があろう。】 【！https://github.com/w3c/csswg-drafts/issues/3384#issuecomment-459628932】 ◎ If the dir is left or right, 30 ◎ Else if the dir is up or down, 2

%整列

%方向 における %基準, %候補 どうしの整列の度合い ⇒ %整列 ~EQ %整列-偏り ~MUL %整列-重み ◎ The degree of alignment in dir between the reference and the candidate, defined as: • alignment = alignBias * alignWeight

%整列-偏り

%方向 に応じて：

• `left$l ／ `right$l ⇒ %射影が重合する長さ ~DIV %基準 の限界~boxの縦幅
• `up$l ／ `down$l ⇒ %射影が重合する長さ ~DIV %基準 の限界~boxの横幅

限界~boxの各~辺は、 軸に平行とする

◎ If the dir is left or right, projectedOverlap / height of the axis-aligned bounding box of reference ◎ Else if the dir is up or down, projectedOverlap / width of the axis-aligned bounding box of reference

%射影が重合する長さ

%方向 に応じて：

• `left$l ／ `right$l ⇒ ［ %基準, %候補 ］の横方向への射影が縦~軸~上で重合する長さ
• `up$l ／ `down$l ⇒ ［ %基準, %候補 ］の縦方向への射影が横~軸~上で重合する長さ

◎ If the dir is left or right, the length of the overlap between the horizontal projections onto the vertical axis of the reference and the candidate ◎ Else if the dir is up or down, the length of the overlap between the vertical projections onto the horizontal axis of the reference and the candidate

`projected_overlap^dgm

%整列-重み

5

%重合する面積の平方根

%基準, %候補 が［ 重合するならば その面積の平方根 ／ 重合しないならば 0 ］ ◎ The square root of area of overlap between the reference and the candidate, or 0 if they do not overlap.

注記： この一般~公式は、 いくつかの，良さげな代替から選取られた — 一連の `~UX~test事例＠https://wicg.github.io/spatial-navigation/tests/ux/list.html$ にて、 最良な候補を選定するために利用されるとき，最も直感に合致するものに基づいて。 同様に， %整列-重み, %直交-重み の値も同じ~test事例に基づいて試験的に決定された。 結果の公式は、 いくぶん複雑ではあるが，良い答えを与えるように見受けられる。 改善や単純~化の示唆があれば寄せてほしい。 ◎ Note: This general formula was picked from several plausible alternatives, based on which one most often matches intuition when used to select the best candidate in a series of UX test cases. Similarly, the values of alignWeight and orthogonalWeight were also determined experimentally based on the same test cases. The resulting formula is somewhat complicated, but seems to give good answers. Suggestions for improvements or simplifications are welcome.