CSS3

プロパティ

caret-shape

[Edge]⛌？。→●、mdn

挿入キャレットの形状。

このプロパティは、テキスト挿入キャレット（キー カーソル）に欲される形状を、作者が指定できるようにする。

この定義の文脈においては、文字 とは、[UAX29] にて定義される extended grapheme cluster（拡張された書記素クラスタ）として解されるとし、可視文字 とは，送り幅が 0 でない文字を意味する。

auto

キャレットの形状は、ユーザー エージェント が決定する。それは、プラットフォーム規約に合致するべきであり、文脈に基づいて調整されてもよい。例えば、ユーザー エージェント は insert（挿入）モードと overtype（上書き）モード とを切り替える場合、利用者がキーボード上の [insert] キーを押し下げたときは、［insert モードにおいては bar、overtype モードにおいては block］によるキャレットを示してもよい。

<INPUT type=text style="border:1px solid red;
 caret-shape:auto;
">

bar

ユーザー エージェント は、テキスト挿入キャレットを挿入点に置かれる細いバーとして描画するものとする。これは、文字には重ならない、文字の［合間／前／後］いずれかを意味する。バーは、行内軸と垂直になるべきである。ただし、［italic／oblique］テキストを挿入するときは、傾けて描画してもよい。

<INPUT type=text style="border:1px solid red;
 caret-shape:bar;
">

block

ユーザー エージェント は、テキスト挿入キャレットを、［挿入点に後続する次の可視文字に重なり合っている矩形］として描画するものとする。そのような文字が後続していない場合、ユーザー エージェント は キャレットを最後の可視文字の後に描画するものとする。ユーザー エージェント は、［italic／oblique］テキストを挿入している所では、描画する矩形を傾けてもよい。

<INPUT type=text style="border:1px solid red;
 caret-shape:block;
">

¶

underscore

ユーザー エージェント は、テキスト挿入キャレットを、［挿入点に後続する次の可視文字］が占める行下面に、細い線として描画するものとする。そのような文字が後続していない場合、ユーザー エージェント は、最後の可視文字の後にキャレットを描画するものとする。

<INPUT type=text style="border:1px solid red;
 caret-shape:underscore;
">

¶

［block／underscore］キャレットの横幅は、挿入点の後に来る次の可視文字の送り幅にされるべきである ― ただし、［そのような文字は無い／この情報を決定することは実用的でない］場合には 1ch にされるべきである。

キャレットの方位と外観を決定するときは、ユーザー エージェント は、書字モード [CSS-WRITING-MODES-3] を織り込んだ上で変形 [CSS-TRANSFORMS-1] を適用するものとする。編集されたテキストが あるパス上にレイアウトされている場合 ― 一例として、SVG <textPath> 要素を利用して ― ユーザー エージェント は それも織り込むべきである。

［bar／underscore］によるキャレットの太さ、および 同様に描画される auto によるキャレットの太さは、ユーザー エージェントが決定する。ユーザー エージェントは、実用的になるときは、［変形 [CSS-TRANSFORMS-1] などの手段を介して縮小されたときでも、キャレットは可視であり続ける］ことを確保するよう、太さを選ぶべきである。

キャレットを積層する位置は、ユーザー エージェントは 次の拘束を満たすことを除き、未定義とする：

• キャレットは、要素の背景で遮られないものとする。
• block キャレットに対しては、それに重なり合っている文字がキャレットに遮られないように描画するものとする。

¶例省く

テスト