CSS Basic User Interface Module Level 4

5.1.1. ~cursor用の~style： `cursor^p ~prop

この~propは、［ ~pointing装置~用の~cursorの~hotspotが，要素の`~border辺$の中を指しているとき ］に表示される，~cursorの型を指定する。 ◎ This property specifies the type of cursor to be displayed for the pointing device when the cursor’s hotspot is within the element’s border edge.

注記： `CSS-BACKGROUNDS-3$r `§ 曲線~半径＠~CSSBG#border-radius$ に従って、 ~border辺は `border-*-radius$p【！`border-radius$p】 に影響される。 ◎ Note: As per CSS Backgrounds 3 § 4.1 Curve Radii: the border-radius properties, the border edge is affected by border-radius.

複数の要素が重合している場合、 ~cursorの型を決定する要素は，接触判定に基づく — すなわち、 その位置からの `click$et ~eventを受取る要素になる。 ◎ In the case of overlapping elements, which element determines the type of cursor is based on hit testing: the element determining the cursor is the one that would receive a click initiated from this position.

注記： 接触判定の~~詳細は、 この仕様の視野から外れる — それは、［ ~CSSまたは~HTML ］の将来の改訂にて定義されるものと~~期待されている。 ◎ Note: The specifics of hit testing are out of scope of this specification. Hit testing will hopefully be defined in a future revision of CSS or HTML.

~UAは、 ~nativeな~UA~control — ~scrollbar, ~resizer, その他の~nativeな~UI~widget （例：~form要素~用に~UAに特有な実装で【内部的に】利用され得るもの） など — に対しては， `cursor$p ~propを無視してもヨイ。 ~UAは、 ~UIにおける様々な状態を指示するためとして， `cursor$p ~propを無視して自身が選んだ~cursorを表示してもヨイ — ~pageが応答できないときは~busy~cursor, 利用者が~text選択を行なっているときは~text~cursor, 等々。 ◎ User agents may ignore the cursor property over native user agent controls such as scrollbars, resizers, or other native UI widgets e.g. those that may be used inside some user agent specific implementations of form elements. User agents may also ignore the cursor property and display a cursor of their choice to indicate various states of the UA’s user interface, such as a busy cursor when the page is not responding, or a text cursor when the user is performing text selection.

注記： `HTML$r は、 画像~mapにおける `cursor$p ~prop用に`特別な取扱い＠~HTMLrendering#image-maps-2$を定義している。 ◎ Note: [HTML] defines special handling of image maps for the cursor property.

画像に基づく作者~定義な~cursorは、 次に挙げる値により定義される： ◎ Each author-defined image-based cursor is defined by the following values:

`url$t | `url-set$t

~UAは、 この値が指名する資源から，~cursorを検索取得する。 ~UAは、［ `url^t, `url-set^t ］に代えて，その上位集合である `image$t を~supportしてもヨイ。 ◎ The user agent retrieves the cursor from the resource designated by the <url> or <url-set>. Conforming user agents may, instead of <url> and <url-set>, support <image> which is a superset.

`url-set@t は、 `image-set$f を制限した~versionであり， その下位-生成規則 `image-set-option$t が `url$t に限られるよう制約される。 ◎ <url-set> is a limited version of image-set(), where the <image> sub-production is restricted to <url> only.

~UAは、 次に挙げる画像~file形式を~supportするモノトスル： ◎ The UA must support the following image file formats:

• PNG `PNG$r ◎ PNG, as defined in [PNG]
• `~secure静的~mode$ `SVG2$r 下における~SVG `SVG11$r のうち，`生来な~size$を有するもの。 ◎ SVG, as defined in [SVG11], in secure static mode [SVG2], if it has a natural size.
• `background-image$p ~propなどの他の~propにおける `image$t 用に~supportされる，他の~animateされない画像~file形式 ◎ any other non-animated image file format that they support for <image> in other properties, such as the background-image property

加えて，~UAは、 次に挙げる画像~file形式を~supportするベキである： ◎ In addition, the UA should support the following image file formats:

• `~secure~animate化~mode$ `SVG2$r 下における~SVG `SVG11$r のうち，`生来な~size$を有するもの。 ◎ SVG, as defined in [SVG11], in secure animated mode [SVG2], if it has a natural size.
• `background-image$p ~propなどの他の~propにおける `image$t 用に~supportされる，他の~animateされる画像~file形式 ◎ any other animated image file format that they support for <image> in other properties, such as the background-image property

~UAは、 他の~file形式を追加的に~supportしてもヨイ — ［ `~secure静的~mode$ ／ `~secure~animate化~mode$ ］`SVG2$r 下にあるが，`生来な~size$を有さない~SVG `SVG11$r も含め。 ◎ The UA may also support additional file formats, including SVG, as defined in [SVG11], in secure static mode or secure animated mode [SVG2], even if it does not have a natural size.

注記： ~CSS~WGは、 初期~時は，すべての~SVGを — `生来な~size$の有無を問わず — ~supportするものと意図していたが、 実装の欠如に因り， `生来な~size$を有さない~SVGは 義務的から任意選択に格下げされた。 ◎ Note: The CSS Working Group initially intended support for all SVG, naturally sized or not. Support for non-naturally sized SVG was downgraded from mandatory to optional due to lack of implementations.

注記： 何年もの間，共通的な~desktop~browserが~cursor用に~supportする~file形式は、 Microsoft が設計した［ .ico, および .cur ］の他になかった。 旧来の内容との互換性を得るため、 ~UAには，これらを~supportすることが奨励される — オープンな仕様がないため、 これらの形式に対し規範的な要件を課すことはアリでないが。 `Wikipedia＠https://en.wikipedia.org/wiki/ICO_%28file_format%29$ にて，ある程度の情報を見られる。 ◎ Note: For a number of years, the only file formats supported for cursors in common desktop browsers were the .ico and .cur file formats, as designed by Microsoft. Although this is no longer the case (PNG and SVG have broad support), for compatibility with legacy content, UAs are encouraged to support these, even though the lack of an open specification makes it impossible to have a normative requirement about these formats. Some information on these formats can be found on Wikipedia.

~cursor画像~用の`既定の~obj~size$は、 ~UA が定義する — その~sizeは、 ~UAの~OSにて代表的な~cursorの~sizeに基づくベキである。 ◎ The default object size for cursor images is a UA-defined size that should be based on the size of a typical cursor on the UA’s operating system.

`具象-~obj~size$は、 `既定の~sizing~algo$を利用して決定される。 ~OSが，所与の~sizeを超える~cursorを描画する能力を欠く場合、 その~sizeより大きい~cursorは — ~cursor画像が`生来な縦横比$を有するならば，それは保守しつつ — ~OSが~supportする限界域~sizeまで縮短するモノトスル。 ◎ The concrete object size is determined using the default sizing algorithm. If an operating system is incapable of rendering a cursor above a given size, cursors larger than that size must be shrunk to within the OS-supported size bounds, while maintaining the cursor image’s natural aspect ratio, if any.

`x@vt `y@vt

`x$vt, `y$vt 座標（省略可能）は、 画像の中の正確な~pointer位置（~hotspot）を識別する。 ◎ The optional <x> and <y> coordinates identify the exact position within the image which is the pointer position (i.e., the hotspot).

いずれも `number$t である。 ~cursorの座標系における（左端, 上端に相対的な）位置の x, y 座標は、 画像~内で~pointerが指す精確な位置を表現する。 ◎ Each is a <number>. The x-coordinate and y-coordinate of the position in the cursor’s coordinate system (left/top relative) which represents the precise position that is being pointed to.

注記： この仕様は、 各種~型の `image$t 用に座標系を確立する方法は定義しない。 それらの定義は `CSS-IMAGES-4$r まで先送りされる。 ◎ Note: This specification does not define how the coordinate systems of the various types of <image> are established, and defers these definitions to [CSS-IMAGES-4].

値が未指定な場合、 利用された画像~資源の~~内部で定義される，生来な~hotspotになる。 その~hotspotも定義されていない場合の効果は、 値 `0 0^v が指定されたかのようになる。 ◎ If the values are unspecified, then the natural hotspot defined inside the image resource itself is used. If both the values are unspecific and the referenced cursor has no defined hotspot, the effect is as if a value of "0 0" was specified.

~hotspotの座標が — 画像~資源の~~内部か, `x$vt, `y$vt 値のいずれで指定されるにせよ — ~cursor画像の外側に出る場合、 内側に入るように（ x, y について独立に）切詰めるモノトスル。 ◎ If the coordinates of the hotspot, as specified either inside the image resource or by <x> and <y> values, fall outside of the cursor image, they must be clamped (independently) to fit.

~cursor用の各~keywordの意味は：

【 これら各~keywordの直後にある~boxに~mouseを重ねると， 利用中の~UAによる~cursorが示される。 】

一般用~cursor ◎ general purpose cursors

`auto@v

~UAは、 現在の文脈に基づいて，表示する~cursorを決定する。 特定的には、［ 選択-可能な~text ／ 編集-可能な要素 ］上では `text$v, 他では `default$v のように挙動する。 ◎ The UA determines the cursor to display based on the current context. Specifically, auto behaves as text over selectable text or editable elements, and default otherwise.

注記： ~UAは，［ 選択-可能な~text ／ 編集-可能な要素 ］に対しては、 — `text$v のときと同じく — 要素の`書字~mode$に応じて，［ 縦方向, 横方向 ］のうち適切な方の~text~cursorを利用するモノトスル — また、 変形や他の視覚-効果も織り込んでもヨイ。 ◎ Note: When over selectable text or editable elements, as it does with text, the UA must use a vertical or horizontal text cursor, as appropriate for the writing mode of the element, and may take transforms and other visual effects into account as well.

`default@v

~platformに依存する既定の~cursor。 矢印として描画されることが多い。 ◎ The platform-dependent default cursor. Often rendered as an arrow.

`none@v

要素に対しては~cursorは描画されない。 ◎ No cursor is rendered for the element.

~link~cursor／状態s~cursor ◎ links and status cursors

`context-menu@v

~cursorが指す~objにて，文脈~menuが可用であることを指示する。 ~menuに似た小さな~graphicを傍に伴う，矢印として描画されることが多い。 ◎ A context menu is available for the object under the cursor. Often rendered as an arrow with a small menu-like graphic next to it.

`help@v

~cursorが指す~objにて，~helpが可用であることを指示する。 疑問符や~balloonとして描画されることが多い。 ◎ Help is available for the object under the cursor. Often rendered as a question mark or a balloon.

`pointer@v

~linkを指示する~pointer~cursor。 人差し指を立てた手の甲として描画されることが多い。 ◎ The cursor is a pointer that indicates a link. Often rendered as the backside of a hand with the index finger extended.

他が指定されない限り，~UAは、 自身が~supportする すべての文書~形式において，~hyperlink用の `cursor$p にはこの値を — `~UA~stylesheet$に`通常の宣言$を利用することを介して — 適用するモノトスル。 ◎ Unless otherwise specified, UAs must apply cursor: pointer to hyperlinks for all supported document formats via the UA stylesheet, using a normal (i.e. not !important) declaration.

作者は、 ~linkに対しては `pointer$v を利用するベキである。 また、 他の対話的な要素にも利用してヨイ。 ◎ Authors should use pointer on links and may use on other interactive elements.

`progress@v

~programが何らかの処理を遂行していて，進捗-中にあることを指示する。 利用者は~programとヤリトリできることを表す点で `wait$v と異なる。 ［ ~~回転する~beach-ball／腕時計や砂時計 ］を伴う矢印として描画されることが多い。 ◎ A progress indicator. The program is performing some processing, but is different from wait in that the user may still interact with the program. Often rendered as a spinning beach ball, or an arrow with a watch or hourglass.

`wait@v

~programが処理中（ ~busy ）にあり，利用者は待機すベキであることを指示する。 腕時計や砂時計として描画されることが多い。 ◎ Indicates that the program is busy and the user should wait. Often rendered as a watch or hourglass.

選択~cursor ◎ selection cursors

`cell@v

利用者は，いくつかの~cellを選択できることを指示する。 真中に~dotを伴う，太めな正符号として描画されることが多い。 ◎ Indicates that a cell or set of cells may be selected. Often rendered as a thick plus-sign with a dot in the middle.

`crosshair@v

単純な極細十字線。 二次元~bitmap選択~modeを指示するために利用されることが多い。 ◎ A simple crosshair (e.g., short line segments resembling a "+" sign). Often used to indicate a two dimensional bitmap selection mode.

`text@v

利用者は，~textを選択できることを指示する。 ~I-beamとして描画されることが多い。 ~UAは、 要素の`書字~mode$に応じて，［ 横書きならば縦方向／縦書きならば横方向 ］の~I-beam等~cursorを自動的に表示するモノトスル （例：後者は `vertical-text$v 用のそれと同じにするなど）。 加えて，~UAは、 横方向, 縦方向どっちの~cursorか選ぶときに， 変形（ `CSS-TRANSFORMS-1$r ）や他の視覚-効果 （ `§ ~path上の~text＠~SVGtext#TextLayoutPath$ `SVG2$r など） を~~加味してもヨイ。 ◎ Indicates text that may be selected. Often rendered as an I-beam. User agents must automatically display a vertical I-beam/cursor over elements with a horizontal writing mode, and a horizontal I-beam/cursor (e.g. same as the vertical-text keyword) over elements in a vertical writing mode. Additionally, user agents may take transforms (see [CSS-TRANSFORMS-1]) or other visual effects such as text on a path (See SVG 2 § 11.8 Text on a path), when choosing between the horizontal or vertical text cursor, and may display any angle of I-beam/cursor for text that is rendered at any particular angle.

`vertical-text@v

利用者は，縦書き~textを選択できることを指示する。 横方向 ~I-beam として描画されることが多い。 ◎ Indicates vertical-text that may be selected. Often rendered as a horizontal I-beam.

~drag＆~drop ~cursor ◎ drag and drop cursors

`alias@v

何かの~alias／何かへの~shortcut が作成されることになることを指示する。 曲がった小さな矢印を傍に伴う，矢印として描画されることが多い。 ◎ Indicates an alias of/shortcut to something is to be created. Often rendered as an arrow with a small curved arrow next to it.

`copy@v

何かが複製されることになることを指示する。 小さな正符号を傍に伴う，矢印として描画されることが多い。 ◎ Indicates something is to be copied. Often rendered as an arrow with a small plus sign next to it.

`move@v

移動されることになる何かを指示する。 ◎ Indicates something is to be moved.

`no-drop@v

~drag中の~itemは，~cursorが現在 指す所には~dropできないことを指示する。 打ち消し線を伴う小さな真円を伴う［ 手／~pointer ］として描画されることが多い。 ◎ Indicates that the dragged item cannot be dropped at the current cursor location. Often rendered as a hand or pointer with a small circle with a line through it.

`not-allowed@v

要請された動作は遂げられないことを指示する。 打ち消し線を伴う真円として描画されることが多い。 ◎ Indicates that the requested action will not be carried out. Often rendered as a circle with a line through it.

`grab@v

何かを掴める（~drag／移動できる）ことを指示する。 開いた手の甲の様に描画されることが多い。 ◎ Indicates that something can be grabbed (dragged to be moved). Often rendered as the backside of an open hand.

`grabbing@v

何かを掴んでいる（~drag／移動している）ことを指示する。 閉じた手の甲の様に描画されることが多い。 ◎ Indicates that something is being grabbed (dragged to be moved). Often rendered as the backside of a hand with fingers closed mostly out of view.

~resize／~scroll時の~cursor（括弧内の矢印は方向を表す） ◎ resizing and scrolling cursors

`e-resize@v（→）

`n-resize@v（↑）

`ne-resize@v（↗）

`nw-resize@v（↖）

`s-resize@v（↓）

`se-resize@v（↘）

`sw-resize@v（↙）

`w-resize@v（←）

ある辺が移動されることを指示する。 例えば，~boxの右下~隅（南東 — `south-east^en ）から動き始めるときは、 `se-resize$v ~cursorが利用される。 ◎ Indicates that some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.

`ew-resize@v（←→）

`ns-resize@v（↑↓）

`nesw-resize@v（↙↗）

`nwse-resize@v（↖↘）

双方向-~resize~cursorを指示する。 ◎ Indicates a bidirectional resize cursor.

`col-resize@v（←→）

~itemや~columnを横方向に~resizeできることを指示する。 左右を指す矢印に, それらを分離する縦~barが伴われて描画されることが多い。 ◎ Indicates that the item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.

`row-resize@v（↑↓）

~itemや~columnを縦方向に~resizeできることを指示する。 上下を指す矢印に, それらを分離する横~barが伴われて描画されることが多い。 ◎ Indicates that the item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.

`all-scroll@v

何かを，どの方向にも~scrollできることを指示する。 真中に~dotを伴う，上下左右を指す矢印として描画されることが多い。 ◎ Indicates that the something can be scrolled in any direction. Often rendered as arrows pointing up, down, left, and right with a dot in the middle.

~zoom用の~cursor ◎ zooming cursors

`zoom-in@v

`zoom-out@v

何かを内外へ~zoom（拡大縮小）できることを指示する。 中心に［ "+" （ `zoom-in$v のとき）／ "−" （ `zoom-out$v のとき） ］を伴う，拡大鏡の様に描画されることが多い。 ◎ Indicates that something can be zoomed (magnified) in or out, and often rendered as a magnifying glass with a "+" or "-" in the center of the glass, for zoom-in and zoom-out respectively.

:link,:visited {
  cursor: url(example.svg),
    url(hyper.cur),
    url(hyper.png) 2 3,
    pointer
}

5.2.1. 挿入~caretの色付け： `caret-color^p

`auto@v

~UAは `currentcolor$v を利用するベキである。 ~UAは、［ 良好な視認性／周囲の内容との~contrast ］を確保するよう， ~caretの色を自動的に調整してもヨイ — `currentcolor^v, 背景, 影, 等々に基づくなどして。 ◎ User agents should use currentColor. User agents may automatically adjust the color of caret to ensure good visibility and contrast with the surrounding content, possibly based on the currentColor, background, shadows, etc.

注記： `caret-shape$p が `block$v のとき， 良好な可視性と~contrastを確保することは、 `currentcolor$v 以外の色を~UAが決定することで， 最良に達成される。 ◎ Note: When caret-shape is block, ensuring good visibility and contrast is best achieved with a UA determined color other than currentColor.

`color$t

挿入~caretの色は、 指定された色になる。 ◎ The insertion caret is colored with the specified color.

~caretは、［ 利用者が~text（あるいは他の内容もあり得る）を挿入できる所 ］を指す［ 要素~内の挿入~箇所 ］を視覚的に指示するものである。 この~propは、 その可視な指示子の色を制御する。 ◎ The caret is a visible indicator of the insertion point in an element where text (and potentially other content) is inserted by the user. This property controls the color of that visible indicator.

注記： ~UAは、 追加的な何かを “~caret” と~~扱うこともある。 例えば，~UAには “~navi~caret” を示すものもあり、 挿入~caretと似たように動作しつつ， ~caretとして機能するように編集できない~text周りにも移動し得る。 他方、 `cursor$p ~propが［ `auto$v にされた~text ／ ［ `text$v ／ `vertical-text$v ］にされた要素 ］を~hoverするときに示される~cursor画像は、 ~caretに似せられることもあろうが，~caretではない （それは、 ~cursorである）。 ◎ Note: UAs might have additional things that count as “carets”. For example, some UAs can show a “navigation caret”, which acts similarly to an insertion caret but can be moved around in non-editable text and is functionally a caret. On the other hand, the cursor image shown when hovering over text when the cursor property is auto, or when hovering over an element where the cursor property is text or vertical-text, though it sometimes resembles a caret, is not a caret (it’s a cursor).

5.2.2. 挿入~caretの~animation： `caret-animation^p

ほとんどの［ ~platform／~UA ］においては、 ~text挿入~caretは点滅する。 この~propは、 ~caretが~animateされる仕方に対する制御を作者に与える。 ◎ On most platforms and in most UAs, the text insertion caret blinks. This property allows the author to take control over the way the caret is animated.

`auto@v

~caretが どう~animateされるべきか, および その速さは、 ~UAが決定する。 それは、 ~platformの規約と設定に合致するベキであり， 文脈に基づいて調整されてもヨイ。 ◎ The UA determines how the caret should be animated, if at all, as well as the speed of any such animation. It should match platform conventions and settings, and may be adjusted based on context.

注記： これは、 概して，点滅~caretとして描画される。 一部の環境では、 点滅する代わりに~fadeするように現れる。 ◎ Note: This is typically rendered as a blinking caret. Fading in and out instead of blinking is a variant that appears in some environments.

`manual@v

~UAは、 ~caretを~animateしないモノトスル。 ◎ The UA must not animate the caret.

注記： これは、 ~UAが駆動する~caret~animationに限られる。 ~caret色を~animateする~CSS~animationは、 通常に適用される。 ◎ Note: This is only about UA driven animations of the caret. When CSS animations are used to animate the caret color, they apply normally.

注記： 作者には、［ `CSS3-ANIMATIONS$r を利用して~customな~animationを適用している ］ときは，［ ~UAによる~animationと~CSSによる~animationが干渉することを防止する ］よう［ `caret-animation$p に `manual$v を利用して~caretの点滅などを停止する ］ことが推奨される。 ◎ Note: It is recommended for authors to stop the caret from blinking or fading using caret-animation: manual when applying custom animations using [CSS3-ANIMATIONS], to prevent the UA’s animation and the CSS animation to interfere.

注記： `WCAG20$r `指針 2.3： 光過敏性発作の原因になることが既知な仕方で内容を設計しないこと＠~WCAG20#seizure$ を見よ。 ◎ Note: See Guideline 2.3: Seizures: Do not design content in a way that is known to cause seizures [WCAG20].

/* 
~caretの点滅や閃光を防止する
◎
prevent the caret from blinking/flashing
 */
:read-write { caret-animation: manual !important; }

/* 
`caret-color^p が変化するのを
— ~animationも含めて —
防止する：
◎
prevent changes of caret-color, including animations
 */
:read-write { caret-color: auto !important; }

編集-可能な利用者~stylesheetを有さない~UAは、［ `点滅する＠~WCAG20#blinksdef$／ `閃光する＠~WCAG20#flash-def$／ ~animateされる ］~caretを不能化する設定を供するベキである。 【！UAs that do have an editable user stylesheet may want to provide this setting as well】 詳細は、 `WCAG$r `指針 2.2＠~WCAG20#time-limits-pause$, `指針 2.3＠~WCAG20#seizure$ を見よ。 ◎ UAs that do not have an editable user stylesheet should provide a setting to disable blinking, flashing and animated carets. UAs that do have an editable user stylesheet may want to provide this setting as well. See [WCAG] Guideline 2.2 and Guideline 2.3 for details.

textarea {
  caret-animation: manual;
  caret-color: blue;
  animation: caret-alternate 2s step-end infinite;
}
@keyframes caret-alternate {
  50% { caret-color: red; }
}

5.2.3. 挿入~caretの形状： `caret-shape^p

この~propは、 ~text挿入~caret — 以下，略して~caret — に欲される形状を指定することを作者に許容する。 ◎ This property allows authors to specify the desired shape of the text insertion caret.

この定義の文脈においては、 `文字@ とは， `UAX29$r にて定義される`拡張d書記素~cluster^i（ `extended grapheme cluster^en ）として解するとする。 また、 `可視~文字@ とは，送幅が 0 でない文字を意味する 【~spaceも含まれることになる】。 ◎ Within the context of this definition, character is to be understood as extended grapheme cluster, as defined in [UAX29], and visible character means a character with a non-zero advance measure.

`auto@v

~caretの形状は、 ~UAが決定する。 それは、 ~platform規約に合致するベキであり，文脈に基づいて調整されてもヨイ。 ~UAは、 例えば，［ `insert^en（~~挿入）~mode, `overtype^en（~~上書き）~mode ］を切替える場合、 利用者が~keyboard上の insert ~UIkeyを押し下げたときは，［ `insert^en ~modeにおいては `bar$v ／ `overtype^en ~modeにおいては `block$v ］による~caretを示してもヨイ。 ◎ The UA determines the shape of the caret. It should match platform conventions, and may be adjusted based on context. For example, if a UA switches between insert mode and overtype mode when the user presses the insert key on their keyboard, it may show a bar caret in insert mode, and a block caret in overtype mode.

`bar@v

~UAは、 ~caretを［ 挿入~点に配置される細い~bar ］として描画するモノトスル。 挿入~点とは、 文字に重ならない［ `文字$どうしの合間／先頭の`文字$の直前／末尾の`文字$の直後 ］を意味する。 ~barは、 `行内-軸$と垂直になるベキである。 ただし，［ ~italic／~oblique ］~textを挿入するときは、 傾けて描画してもヨイ。 ◎ The UA must render the text insertion caret as a thin bar placed at the insertion point. This means it is between, before, or after characters, not over them. It should be perpendicular to the inline progression direction, although UAs may render it slanted when inserting italic or oblique text.

`block@v

~UAは、 ~caretを［ 挿入~点に後続する`可視~文字$のうち最初のもの ］に重合している矩形として描画するモノトスル — そのような文字が後続していない場合、 ~caretを最後の`可視~文字$の後に描画するモノトスル。 ~UAは、［ ~italic／~oblique ］~textを挿入している所では， 描画する矩形を傾けてもヨイ。 ◎ The UA must render the text insertion caret as a rectangle overlapping the next visible character following the insertion point. If there is no visible character after the insertion point, the UA must render the caret after the last visible character. UAs may render it as a slanted rectangle when inserting italic or oblique text.

`underscore@v

~UAは、 ~caretを［ 挿入~点に後続する`可視~文字$のうち最初のもの ］が占める`行-下面$に，細い線として描画するモノトスル — そのような文字が後続していない場合、 最後の`可視~文字$の後に~caretを描画するモノトスル。 ◎ The UA must render the text insertion caret as a thin line under (as defined in [CSS-WRITING-MODES-3] the next visible character following the insertion point. If there is no visible character after the insertion point, the UA must render the caret after the last visible character.

［ `block$v ／ `underscore$v ］用の~caretの横幅は、［ 挿入~点の後続する`可視~文字$のうち最初のもの ］の送幅に等しくなるベキである — ただし，［ そのような文字は無い／ この情報を決定することは実用的でない ］場合、 `1ch^v に等しくなるベキである。 ◎ The width of the block and underscore carets should be the advance measure of the next visible character after the insertion point, or 1ch if there is no next visible character or if this information is impractical to determine.

~caretの方位と外観を決定するときは、 ~UAは， `書字~mode$ `CSS-WRITING-MODES-3$r を織り込んだ上で変形n `CSS-TRANSFORMS-1$r を適用するモノトスル。 編集される~textが ある~path上に~lay-outされている場合 — 一例として，~SVG `textPath$e 要素を利用して — ~UAは，それも織り込むベキである。 ◎ When determining the orientation and appearance of the caret, UAs must take into account the writing mode [CSS-WRITING-MODES-3] and must apply transformations [CSS-TRANSFORMS-1]. If the edited text is laid out on a path, for instance by using the SVG textPath element, UAs should also account for this.

［［ `bar$v ／ `underscore$v ］用の~caret, それらと類似に描画される `auto$v 用の~caret ］の太さは、 ~UAが決定する。 ~UAは，実用的になるときは、［ 変形n `CSS-TRANSFORMS-1$r などの手段を介して縮小されたときでも， ~caretは可視であり続ける ］ことを確保するよう，太さを選ぶベキである。 ◎ The thickness of bar and underscore carets—as well as that of auto carets with a similar rendering—is determined by the user agent. When practical, the user agent should choose a thickness that ensures the caret remains visible even if it has been scaled down via means such as transformations [CSS-TRANSFORMS-1].

~caretを積層する位置は、 未定義とする — ただし、 ~UAは，次に挙げる拘束を満たすように描画するモノトスル： ◎ The stacking position of the caret is left undefined within the following constraints:

• ~caretは、 要素の背景に遮られない。 ◎ The caret must not be obscured by the background of the element.
• `block$v 用の~caretと重合する文字は、 当の~caretに遮られない。 ◎ UAs must render block carets so that the character it overlaps with is not obscured by the caret.

.console {
  caret-shape: underscore;
  background: black;
  color: white;
  font-family: monospace;
  padding: 1ex;
}

user@host:css-ui-4 $ ls -a
. .. Overview.bs Overview.html
user@host:css-ui-4 $  

user@host:css-ui-4 $ ls -a
. .. Overview.bs Overview.html
user@host:css-ui-4 $

5.2.4. 挿入~caret略式~prop：`caret^p

この略式~propは、［ `caret-color$p, `caret-animation$p, `caret-shape$p ］を 1 個の宣言で設定する。 省略された値は、 各自の`初期~値$に設定される。 ◎ This property is a shorthand for setting caret-color, caret-animation, and caret-shape in one declaration. Omitted values are set to their initial values.

#old-screen {
  caret: block manual;
  animation: old-caret 2s infinite;
  /*styling of the screen omitted for brevity */
}
@keyframes old-caret {
  from, 50% { caret-color: green; }
  75%, to { caret-color: transparent; }
}

5.3.1. ~focusの方向的~navi： `nav-*^p ~prop

【 方向的~navi（ `directional navigation^en ）： ~focusを［ 利用者から指図された方向にある~target ］へ~navigateする。 】

`auto@v

~UAは、［ 方向的~navi入力に呼応して，~focusをどの要素に~navigateするか ］を自動的に決定する。 ◎ The user agent automatically determines which element to navigate the focus to in response to directional navigational input.

`id@vt

`id^t 値は `~ID選択子$ `SELECT$r である†。 ~propに対応する方向的~navi入力††に呼応して、 ~focusは［ 選択子に合致している要素のうち，~tree順序†††で最初のもの ］へ~navigateされる。 ◎ The <id> value is an ID selector [SELECT]. In response to directional navigation input corresponding to the property, the focus is navigated to the first element in tree order matching the selector.

【† したがって、 最初の文字は `#^c にする必要がある — 下の例に見られるように。 】【†† すなわち，［ `nav-up^p ならば上方／ `nav-right^p ならば右方／ `nav-down^p ならば下方／ `nav-left^p ならば左方 ］への~navi。 】【††† 文書~treeか~box~treeどちらに基づくのか，はっきりしない — この機能の資質的には、 後者に思われるが。 】

`id^t 値がすでに~focusされた要素を参照rしている場合、 同じ要素を~focusし直す必要はないので， `nav-*^p ~propに対応する方向的~navi入力は 無視される。 ◎ If this refers to the currently focused element, the directional navigation input respective to the nav- property is ignored — there is no need to refocus the same element.

選択子に合致する要素がない場合、 ~UAは，どの要素に~focusを~navigateするかを自動的に決定する。 ◎ If no element matches the selector, the user agent automatically determines which element to navigate the focus to.

~focusが［ 他では~focus可能でない要素 ］へ~navigateされた場合、 この方向的~naviの結果においてのみ~focus可能になる。 加えて、 `focus$ps 疑似類も，そのように~focusされている間は その要素に合致する。 ◎ If the focus is navigated to an element that was not otherwise focusable, it becomes focusable only as the result of this directional navigation, and the :focus pseudo-class matches the element while it is focused as such.

注記： そのような “他では~focus可能でない” 要素を考慮するにあたっては，他の選択肢もあった — 文書~tree内の，次に来る［ 他でも~focus可能な要素 （［ 他では~focus可能でない要素 ］の子孫も含む） ］への~focusも含めて。 そのような他の選択肢についての~~意見を［ 歓迎する／~~強く要望する ］ — とりわけ、 実装~経験, および［ 内容に方向的~navi~propを利用している作者~経験 ］からの。 ◎ Note: there were other options under consideration for such "not otherwise focusable" elements, including focus to the next otherwise focusable element in the document tree (including descendants of such a not otherwise focusable element). Input on such other options is welcome and explicitly solicited, especially from implementation experiences and author experience using the directional navigation properties in their content.

`target-name@vt

~focus~navi用の~target~frame【の名前】を指示する。 それは、 `string$t であり， ~underscore文字（ "`_^c" ）から開始してはナラナイ†。 ◎ The <target-name> parameter indicates the target frame for the focus navigation. It is a <string> and it MUST NOT start with the underscore "_" character.＼

【† `HTML$r `§ ~navigable~target名＠~HTMLds#navigable-target-names$ にて予約された~keyword用の構文と競合するのを避けるためと思われる。 】

~errorの取扱い — ~underscoreから開始していた場合、 所与の名前に応じて，次に従うとする： ◎ Error handling: if it does start with an underscore,＼

• `"_parent"^v ⇒ 親~frameへ~navigateする。 ◎ "_parent" navigates to the parent frame,＼
• `"_root"^v ⇒ `root$v として扱う。 ◎ "_root" is treated as root,＼
• その他 ⇒ 当の名前を伴う~frameは在る場合，その~frameへ~navigateする — 無い場合， `current$v として扱う。 ◎ and other values navigate to a frame by that name if it exists.＼ If the specified target frame does not exist, the parameter will be treated as＼ ↓

`current@v ◎ the keyword current,＼

単純に，当の要素が属している~frameを~targetにすること意味する。 ◎ which means to simply use the frame that the element is in.＼

`root@v ◎ The keyword root＼

~UIwindow全体を~targetにするベキであることを指示する。 ◎ indicates that the user agent should target the full window.

~UAは、 方向的~navi~UIkeyを備える装置に対しては， 対応する 4 つの `nav-*^p 方向的~navi~prop （ `nav-up^p, `nav-right^p, `nav-down^p, `nav-left^p ） に則って，~focusを~navigateするように応答する。 この仕様は、 装置のどの~UIkeyが方向的~navi~UIkeyになるかは，定義しない。 ◎ User agents for devices with directional navigation keys respond by navigating the focus according to four respective nav-* directional navigation properties (nav-up, nav-right, nav-down, nav-left). This specification does not define which keys of a device are directional navigational keys.

注記： 代表的なパソコンの~keyboardは、 4 種の矢印~UIkeyを備える。 それらの~UIkeyを方向的~naviに利用するものが、 アリな実装の一つとして挙げられる。 ~UAは、 ~accessibility, および利用者の便利~用に，［ ~keyboard上のどの~UIkeyを方向的~naviに利用するか，環境設定する ］ことを許容するベキである。 ◎ Note: Typical personal computers have keyboards with four arrow keys. One possible implementation would be to use those four arrow keys for directional navigation. For accessibility and user convenience, user agents should allow configuration of which keys on a keyboard are used for directional navigation.

button { position:absolute }

button#b1 {
  top:0; left:50%;
  nav-right:#b2; nav-left:#b4;
  nav-down:#b2; nav-up:#b4;
}

button#b2 {
  top:50%; left:100%;
  nav-right:#b3; nav-left:#b1;
  nav-down:#b3; nav-up:#b1;
}

button#b3 {
  top:100%; left:50%;
  nav-right:#b4; nav-left:#b2;
  nav-down:#b4; nav-up:#b2;
}

button#b4 {
  top:50%; left:0;
  nav-right:#b1; nav-left:#b3;
  nav-down:#b1; nav-up:#b3;
}

button#foo { nav-left: #bar "sidebar"; }

5.3.2. 廃用： `ime-mode^p ~prop

一部の~browserで ある程度~実装された `ime-mode^p ~propは、 問題を~~孕んでおり，［ この仕様, その前身である`~level 3$ ］により公式的に廃用にされた。 ◎ ime-mode is a property somewhat implemented in some browsers, that is problematic and officially obsoleted by this specification and its predecessor [CSS-UI-3].

これらの実装の非-相互運用能についての`文書化＠https://developer.mozilla.org/en-US/docs/Web/CSS/ime-mode$もある。 ◎ There is documentation of non-interoperability of these implementations.

~UAは、 `ime-mode^p ~propを~supportするベキでない。 ◎ User agents should not support the ime-mode property.

作者は、 `ime-mode^p ~propを利用してはナラナイ。 ◎ Authors must not use the ime-mode property.

利用者が，利用者~stylesheetにて `ime-mode^p ~propを利用してヨイのは、 不良~siteや旧来の実装~用に回避策を要するような，修復-の利用事例に限るとする — 例えば，次の様な利用者~stylesheet規則で： ◎ Users may use the ime-mode property only for repair use-cases where they have to work around bad sites and legacy implementations, e.g. with a user style sheet rule like:

input[type=password] {
  ime-mode: auto !important;
}

この~CSSは、 ~password入力~fieldの挙動を既定の方式に強制するために，利用者~stylesheet~fileの中に配置されてもヨイ。 ◎ This example CSS may be placed into a user style sheet file to force password input fields to behave in a default manner.

この仕様は、［ 旧来の `ime-mode^p 実装の機能性を文書化すること ］も［ それが特定的には何を~supportするか ］も故意に試みない — そのような方針を［ 追求する／推奨する ］ことはイミを成さないので。 ◎ This specification deliberately does not attempt to document the functionality of legacy ime-mode implementations nor what they specifically support because it does not make sense to pursue or recommend any such path.