dominant-baseline

Ví dụ

html,
body,
svg {
  height: 100%;
}

text {
  font:
    bold 14px "Helvetica",
    "Verdana",
    "Arial",
    sans-serif;
}

<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
  <path d="M20,20 L180,20 M20,50 L180,50 M20,80 L180,80" stroke="grey" />

  <text dominant-baseline="auto" x="30" y="20">Auto</text>
  <text dominant-baseline="middle" x="30" y="50">Middle</text>
  <text dominant-baseline="hanging" x="30" y="80">Hanging</text>
</svg>

Ghi chú sử dụng

auto

Nếu thuộc tính này xuất hiện trên phần tử <text>, thì giá trị tính toán phụ thuộc vào giá trị của thuộc tính writing-mode.

Nếu writing-mode là horizontal, thì giá trị của thành phần dominant-baseline là alphabetic. Ngược lại, nếu writing-mode là vertical, thì giá trị của thành phần dominant-baseline là central.

Nếu thuộc tính này xuất hiện trên phần tử <tspan> hoặc <textPath>, thì các thành phần dominant-baseline và baseline-table vẫn giữ nguyên như của phần tử nội dung văn bản cha.

Nếu giá trị baseline-shift được tính toán thực sự dịch chuyển baseline, thì thành phần baseline-table font-size được đặt thành giá trị của thuộc tính font-size trên phần tử nơi thuộc tính dominant-baseline xuất hiện, ngược lại baseline-table font-size vẫn giữ nguyên như của phần tử đó.

Nếu không có phần tử nội dung văn bản cha, giá trị scaled-baseline-table sẽ được xây dựng như trên đối với các phần tử <text>.

use-script Deprecated

Các thành phần dominant-baseline và baseline-table được đặt bằng cách xác định script chiếm ưu thế của nội dung dữ liệu ký tự. writing-mode, dù là horizontal hay vertical, được dùng để chọn bộ baseline-table phù hợp và dominant baseline được dùng để chọn baseline-table tương ứng với baseline đó. Thành phần baseline-table font-size được đặt thành giá trị của thuộc tính font-size trên phần tử nơi thuộc tính dominant-baseline xuất hiện.

no-change Deprecated

Các thành phần dominant-baseline, baseline-table, và baseline-table font-size vẫn giữ nguyên như của phần tử nội dung văn bản cha.

reset-size Deprecated

Các thành phần dominant-baseline và baseline-table vẫn giữ nguyên, nhưng baseline-table font-size được đổi thành giá trị của thuộc tính font-size trên phần tử này. Điều này sẽ co giãn lại baseline-table cho font-size hiện tại.

ideographic

Baseline-identifier cho dominant-baseline được đặt thành ideographic, baseline-table suy ra được xây dựng bằng cách dùng baseline-table ideographic trong phông chữ, và baseline-table font-size được đổi thành giá trị của thuộc tính font-size trên phần tử này.

alphabetic

Baseline-identifier cho dominant-baseline được đặt thành alphabetic, baseline-table suy ra được xây dựng bằng cách dùng baseline-table alphabetic trong phông chữ, và baseline-table font-size được đổi thành giá trị của thuộc tính font-size trên phần tử này.

hanging

Baseline-identifier cho dominant-baseline được đặt thành hanging, baseline-table suy ra được xây dựng bằng cách dùng baseline-table hanging trong phông chữ, và baseline-table font-size được đổi thành giá trị của thuộc tính font-size trên phần tử này.

mathematical

Baseline-identifier cho dominant-baseline được đặt thành mathematical, baseline-table suy ra được xây dựng bằng cách dùng baseline-table mathematical trong phông chữ, và baseline-table font-size được đổi thành giá trị của thuộc tính font-size trên phần tử này.

central

Baseline-identifier cho dominant-baseline được đặt thành central. Baseline-table suy ra được xây dựng từ các baseline đã định nghĩa trong một baseline-table trong phông chữ. Bảng baseline của phông chữ đó được chọn theo thứ tự ưu tiên sau: ideographic, alphabetic, hanging, mathematical. Baseline-table font-size được đổi thành giá trị của thuộc tính font-size trên phần tử này.

middle

Baseline-identifier cho dominant-baseline được đặt thành middle. Baseline-table suy ra được xây dựng từ các baseline đã định nghĩa trong một baseline-table trong phông chữ. Bảng baseline của phông chữ đó được chọn theo thứ tự ưu tiên sau: alphabetic, ideographic, hanging, mathematical. Baseline-table font-size được đổi thành giá trị của thuộc tính font-size trên phần tử này.

text-after-edge

Baseline-identifier cho dominant-baseline được đặt thành text-after-edge. Baseline-table suy ra được xây dựng từ các baseline đã định nghĩa trong một baseline-table trong phông chữ. Việc chọn baseline-table nào trong các baseline-table của phông chữ là tùy thuộc trình duyệt. Baseline-table font-size được đổi thành giá trị của thuộc tính font-size trên phần tử này.

text-before-edge

Baseline-identifier cho dominant-baseline được đặt thành text-before-edge. Baseline-table suy ra được xây dựng từ các baseline đã định nghĩa trong một baseline-table trong phông chữ. Việc chọn baseline-table nào trong các baseline-table của phông chữ là tùy thuộc trình duyệt. Baseline-table font-size được đổi thành giá trị của thuộc tính font-size trên phần tử này.

text-top

Giá trị này dùng đỉnh của hộp em làm baseline.

SVG

<svg
  width="400"
  height="300"
  viewBox="0 0 300 300"
  xmlns="http://www.w3.org/2000/svg">
  <!-- Materialization of anchors -->
  <path
    d="M60,20 L60,270
           M30,20 L400,20
           M30,70 L400,70
           M30,120 L400,120
           M30,170 L400,170
           M30,220 L400,220
           M30,270 L400,270"
    stroke="grey" />

  <!-- Anchors in action -->
  <text dominant-baseline="auto" x="70" y="20">auto</text>
  <text dominant-baseline="middle" x="70" y="70">middle</text>
  <text dominant-baseline="hanging" x="70" y="170">hanging</text>
  <text dominant-baseline="mathematical" x="70" y="220">mathematical</text>
  <text dominant-baseline="text-top" x="70" y="270">text-top</text>

  <!-- Materialization of anchors -->
  <circle cx="60" cy="20" r="3" fill="red" />
  <circle cx="60" cy="70" r="3" fill="red" />
  <circle cx="60" cy="120" r="3" fill="red" />
  <circle cx="60" cy="170" r="3" fill="red" />
  <circle cx="60" cy="220" r="3" fill="red" />
  <circle cx="60" cy="270" r="3" fill="red" />

  <style>
    <![CDATA[
      text {
        font: bold 30px Verdana, Helvetica, Arial, sans-serif;
      }
      ]]>
  </style>
</svg>

Kết quả

Thông số kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• Thuộc tính CSS dominant-baseline