ベースライン

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

仕様書

基線

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

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

[7] OpenTypeの座標も参照。

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

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

BASE 表 (OpenType)

[5] OpenTypeBASE には、 基線と、座標の範囲 (最小値と最大値) を記述できます。 >>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-baselineSVG現在テキスト位置揃えられる基線を指定します。 >>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] CSSdominant-baselinealignment-baseline特性値 middle は、

です。 >>17, >>37

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

です。 >>17


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

[47] ただし alignment-baseline で指定できるだけで、 shorthandvertical-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

メモ