text-before-edge

基線 (文字のレンダリング)

仕様書

基線

[2] OpenType の BASE 表では、 複数の基線があって、 その種別は基 (き) 線 (せん) タグ (baseline tag) >>1 と呼ばれるタグで表されます。

[3] OpenType の BASE 表では、 基線は (基線タグ, 用字系タグ, 言語系タグ, 横書き or 縦書き) の組み合わせに対して指定できます。 >>1

[7] OpenTypeの座標も参照。

[8] 縦書きで欧文フォントと漢字フォントを組み合わせた時、 フォント内に特に何も指定がなければ Firefox は垂直方向にいい感じのところで揃えてくれるのですが、 Chrome は漢字の左辺を欧文の基線に揃えるようで、 欧文が左寄りに見えてしまいます。 BASE で制御できそうなものですが、 指定してみても位置関係は変わらず、よくわかりません...

[9] >>8 OS/2 の usWinAscent と usWinDescent が横書きだけでなく縦書きの左右位置にも影響していそう、 と思ったけどよく見るとやっぱり違うような。 OpenTypeの座標

BASE 表 (OpenType)

[5] OpenType の BASE 表には、 基線と、座標の範囲 (最小値と最大値) を記述できます。 >>1

[6] 座標の範囲は既定のものの他に、機能依存の値も指定できます。 >>1

基線集合

[13] 基 (き) 線 (せん) 集 (しゅう) 合 (ごう) (baseline set) は、 共通基線表に関連付けられた (アルファベット的基線、中央的基線などの) 基線の集合です。 >>10

[14] 箱は、 ある軸について最 (さい) 初 (しょ) 基 (き) 線 (せん) 集 (しゅう) 合 (ごう) (first baseline set) を持つことがあります。 最初基線集合は、建前上、箱の中の最初の行の基線集合に対応します。 >>10

[15] 箱は、 ある軸について最 (さい) 後 (ご) 基 (き) 線 (せん) 集 (しゅう) 合 (ごう) (last baseline set) を持つことがあります。 最初基線集合は、建前上、箱の中の最後の行の基線集合に対応します。 >>10

支配的基線 (CSS)

[18] 箱の支 (し) 配 (はい) 的 (てき) 基 (き) 線 (せん) (dominant baseline) は、 箱の内容を揃えるため使う既定の基線の型です。 >>17

[19] dominant-baseline 特性は、 支配的基線を指定します。 >>17

[20] 行内箱の支配的基線は、 箱内のテキストを揃えるために使います。 テキスト内のグリフの対応する基線を、 箱の支配的基線に揃えます。 また、箱の子供箱で行内水準のものも、 vertical-align で別途指定した場合を除けば、 やはりその子供箱の対応する基線を、 箱の支配的基線に揃えます。 >>17

[21] 行内箱以外の箱の支配的基線は、 その箱の揃え文脈の基線揃えに participate する箱の既定の揃え基線となります。 >>17

[41] 指定できる特性値は >>22 参照。

揃え基線 (CSS)

[16] 箱の揃 (そろ) え基 (き) 線 (せん) (alignment baseline) は、 その箱を揃え文脈において揃えるため使う基線です。 箱の揃え基線は、 その基線集合中の基線の1つであり、 通常は被共有揃え文脈と関連付けられた dominant baseline です。 >>10

[38] 箱の揃え基線は、 post-alignment shift を適用する前に箱を揃えるために使う基線です。 >>37

[43] 基線揃えにあっては、 箱の揃え基線は箱の基線のいずれが揃え文脈の基線に対応して揃えられるべきかを指定します。 >>37

[44] すなわち、inline formatting context にあっては、 行内水準の箱素片群とグリフ群は、 親の行内箱素片が確立した揃え文脈を行内軸に沿って共有します。 >>37

[39] alignment-baseline 特性は、 箱の揃え基線を指定します。 >>37

[45] また、 SVGテキスト配置では、 alignment-baseline は SVG現在テキスト位置に揃えられる基線を指定します。 >>37

[40] 指定できる特性値は >>22 参照。

基線の種類

[22] 基線
name
呼称
css
CSS <'dominant-baseline'> >>17
cssA
CSS <'alignment-baseline'> >>37
css
text-bottom
cssA
text-bottom, text-after-edge
name
text-under baseline
css
alphabetic
cssA
alphabetic
name
アルファベット的 (てき) 基 (き) 線 (せん) (alphabetic baseline)
css
ideographic
cssA
ideographic
name
ideographic-under baseline
css
central
cssA
central
name
中 (ちゅう) 央 (おう) 的 (てき) 基 (き) 線 (せん) (central baseline)
css
mathematical
cssA
mathematical
name
数 (すう) 式 (しき) 基 (き) 線 (せん) (math baseline)
css
hanging
name
hanging baseline
css
text-top
cssA
text-top, text-before-edge
name
text-over baseline

[42] CSS alignment-baseline 特性値 baseline は、 親の支配的基線を使うことを表します。 >>37

[23] CSS の dominant-baseline と alignment-baseline の特性値 middle は、

です。 >>17, >>37

[26] CSS dominant-baseline 特性値 auto は、

です。 >>17


[46] text-before-edge と text-after-edge は、 遺物内容に対応するためSVG実装が対応して良いとされています。 >>37

[47] ただし alignment-baseline で指定できるだけで、 shorthand の vertical-align では指定できないとされます。 >>37

[48] Chrome はそのように実装しています。 Chrome ではさらに dominant-baseline にも指定できます。

歴史

CSS baseline

[11] [CSSWG] Minutes Seoul F2F 2014-05-20 Part III: CSS Line Layout ( (Dael Jackson 著, 版)) http://lists.w3.org/Archives/Public/www-style/2014Jun/0108.html

[12] [SVG2][css-inline] vertical-align, baseline-shift, alignment-baseline, dominant-baseline ( (fantasai 著, 版)) http://lists.w3.org/Archives/Public/www-style/2014May/0208.html

メモ