dominant-baseline
dominant-baseline CSS 屬性指定用於對齊框的文字和行內級內容的特定基線。它還指示在框的對齊上下文中參與基線對齊的任何框的預設對齊基線。如果存在，它將覆蓋形狀的 dominant-baseline 屬性。
基線選自字型基線表。如果名義字型中沒有基線表，或者基線表中缺少所需基線的條目，則瀏覽器可以使用啟發式方法來確定所需基線的位置。
dominant-baseline 屬性用於確定或重新確定一個縮放基線表（scaled-baseline-table）。縮放基線表是一個包含三個元件的複合值：
- 主導基線的基線識別符號，
- 基線表，以及
- 基線表字體大小。
dominant-baseline 的某些值會重新確定所有三個值。其他值僅重新建立基線表字體大小。當初始值 auto 會產生不希望的結果時，可以使用此屬性顯式設定所需的縮放基線表。
注意： dominant-baseline 屬性僅對 <text>、<textPath> 和 <tspan> SVG 元素起作用。
語法
/* Initial value */
dominant-baseline: auto;
/* Keyword values */
dominant-baseline: alphabetic;
dominant-baseline: central;
dominant-baseline: hanging;
dominant-baseline: ideographic;
dominant-baseline: mathematical;
dominant-baseline: middle;
dominant-baseline: text-bottom;
dominant-baseline: text-top;
/* Global values */
dominant-baseline: inherit;
dominant-baseline: initial;
dominant-baseline: revert;
dominant-baseline: revert-layer;
dominant-baseline: unset;
值
auto-
如果此屬性應用於
<text>元素，則計算值取決於writing-mode屬性的值。如果
writing-mode是水平的，則 dominant-baseline 元件的值為alphabetic。否則，如果writing-mode是垂直的，則 dominant-baseline 元件的值為central。如果此屬性應用於
<tspan>或<textPath>元素，則 dominant-baseline 和 baseline-table 元件保持與父文字內容元素相同。如果計算的
baseline-shift值實際改變了基線，則 baseline-table 字型大小元件被設定為dominant-baseline屬性所在元素的font-size屬性的值；否則，baseline-table 字型大小保持與該元素相同。如果沒有父文字內容元素，則縮放基線表值將按照
<text>元素的構造方式進行構造。 alphabetic-
主導基線的基線識別符號設定為
alphabetic，派生基線表使用字型中的alphabetic基線表構建，並且基線表字體大小更改為元素的font-sizeSVG 屬性或 CSSfont-size（如果已設定）的值。 central-
主導基線的基線識別符號設定為
central。派生基線表根據字型基線表中定義的基線構建。該字型基線表按照以下基線表名稱的優先順序順序選擇：ideographic、alphabetic、hanging、mathematical。基線表字體大小更改為元素的font-sizeSVG 屬性或 CSSfont-size（如果已設定）的值。 hanging-
主導基線的基線識別符號設定為
hanging，派生基線表使用字型中的hanging基線表構建，並且基線表字體大小更改為該元素的font-sizeSVG 屬性或font-sizeCSS 屬性的值。 ideographic-
主導基線的基線識別符號設定為
ideographic，派生基線表使用字型中的ideographic基線表構建，並且基線表字體大小更改為元素的font-sizeSVG 屬性或 CSSfont-size（如果已設定）的值。 mathematical-
主導基線的基線識別符號設定為
mathematical，派生基線表使用字型中的mathematical基線表構建，並且基線表字體大小更改為元素的font-sizeSVG 屬性或 CSSfont-size（如果已設定）的值。 middle-
主導基線的基線識別符號設定為
middle。派生基線表根據字型中基線表中定義的基線構建。該字型基線表按照以下基線表名稱的優先順序順序選擇：ideographic、alphabetic、hanging、mathematical。基線表字體大小更改為元素的font-sizeSVG 屬性或 CSSfont-size（如果已設定）的值。 text-bottom-
將行下邊緣用作基線，這通常是字型 em 框的下邊緣。
text-top-
將行上邊緣用作基線，這通常是字型 em 框的上邊緣。
正式定義
正式語法
dominant-baseline =
auto |
text-bottom |
alphabetic |
ideographic |
middle |
central |
mathematical |
hanging |
text-top
示例
<svg viewBox="0 0 450 160" width="700" height="200">
<text x="50" y="20">alphabetic</text>
<text x="50" y="60">central</text>
<text x="50" y="100">hanging</text>
<text x="50" y="140">ideographic</text>
<text x="250" y="20">mathematical</text>
<text x="250" y="60">middle</text>
<text x="250" y="100">text-bottom</text>
<text x="250" y="140">text-top</text>
<path
d="M 0,20 l 400,0
m -400,40 l 400,0
m -400,40 l 400,0
m -400,40 l 400,0"
stroke="grey" />
<text x="0" y="20" fill="red">auto</text>
<text x="0" y="60" fill="red">auto</text>
<text x="0" y="100" fill="red">auto</text>
<text x="0" y="140" fill="red">auto</text>
</svg>
text {
font-size: 20px;
}
text:nth-of-type(1) {
dominant-baseline: alphabetic;
}
text:nth-of-type(2) {
dominant-baseline: central;
}
text:nth-of-type(3) {
dominant-baseline: hanging;
}
text:nth-of-type(4) {
dominant-baseline: ideographic;
}
text:nth-of-type(5) {
dominant-baseline: mathematical;
}
text:nth-of-type(6) {
dominant-baseline: middle;
}
text:nth-of-type(7) {
dominant-baseline: text-bottom;
}
text:nth-of-type(8) {
dominant-baseline: text-top;
}
規範
| 規範 |
|---|
| CSS 內聯佈局模組級別 3 # dominant-baseline-property |
| Scalable Vector Graphics (SVG) 2 # DominantBaselineProperty |
瀏覽器相容性
載入中…