CSS-свойство `baseline-shift`

Свойство baseline-shift CSS перемещает доминирующую базовую линию текстового элемента относительно доминирующей базовой линии родительского элемента текстового содержимого. Перемещённый элемент может быть подстрочным или надстрочным индексом. Если это свойство задано, его значение переопределяет атрибут baseline-shift элемента.

Синтаксис

/* <length-percentage> values */
baseline-shift: -0.5px;
baseline-shift: 4%;

/* keyword values */
baseline-shift: sub;
baseline-shift: super;

/* Global values */
baseline-shift: inherit;
baseline-shift: initial;
baseline-shift: revert;
baseline-shift: revert-layer;
baseline-shift: unset;

Значения

sub

Доминирующая базовая линия смещается в стандартное положение для подстрочных индексов.

super

Доминирующая базовая линия смещается в стандартное положение для надстрочных индексов.

<length-percentage>

Поднимает (если значение положительное) или опускает (если значение отрицательное) доминирующую базовую линию элемента текстового содержимого на указанную длину или процент. Процент рассчитывается относительно line-height родительского элемента текстового содержимого.

Формальное определение

Формальный синтаксис

baseline-shift = 
  <length-percentage> |
  sub |
  super |
  baseline

<length-percentage> = 
  <length> |
  <percentage>

Примеры

Использование ключевых слов в качестве значений

В этом примере показано базовое использование ключевых слов sub и super для свойства baseline-shift, а также то, как свойство CSS baseline-shift имеет приоритет над атрибутом SVG baseline-shift.

HTML

Мы задаём SVG с двумя элементами SVG <text>, каждый из которых содержит элемент <tspan> с заданным для него атрибутом SVG baseline-shift.

<p>Original SVG</p>

<svg viewBox="0 0 500 120" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="50">
    Ceci
    <tspan baseline-shift="super">n'est pas</tspan>
    une pipe super!
  </text>
  <text x="10" y="90">
    Ceci
    <tspan baseline-shift="sub">n'est pas</tspan>
    une pipe sub!
  </text>
</svg>

<p><code>baseline-shift: sub;</code></p>
<svg viewBox="0 0 500 120" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="50">
    Ceci
    <tspan baseline-shift="super">n'est pas</tspan>
    une pipe super!
  </text>
  <text x="10" y="90">
    Ceci
    <tspan baseline-shift="sub">n'est pas</tspan>
    une pipe sub!
  </text>
</svg>
<p><code>baseline-shift: super;</code></p>
<svg viewBox="0 0 500 120" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="50">
    Ceci
    <tspan baseline-shift="super">n'est pas</tspan>
    une pipe super!
  </text>
  <text x="10" y="90">
    Ceci
    <tspan baseline-shift="sub">n'est pas</tspan>
    une pipe sub!
  </text>
</svg>

SVG повторяется три раза; для краткости показана только одна копия.

CSS

Мы задаём крупный курсивный шрифт для текста во всех трёх изображениях SVG и добавляем немного цвета, чтобы различать содержимое элементов <tspan>.

Мы задаём значение свойства baseline-shift равным sub для элемента <tspan> второй SVG и super для элемента <tspan> третьего SVG. Для первого SVG дополнительные стили CSS не задаются.

text {
  font-family: cursive;
  font-size: 2rem;
}
[baseline-shift="sub"] {
  fill: deeppink;
}
[baseline-shift="super"] {
  fill: rebeccapurple;
}

svg:nth-of-type(2) tspan {
  baseline-shift: sub;
}
svg:nth-of-type(3) tspan {
  baseline-shift: super;
}

svg {
  border: 1px solid;
  width: 15em;
  margin-bottom: 10px;
}
@supports not (baseline-shift: sub) {
  body::before {
    content: "Your browser doesn't support the `baseline-shift` property.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

Результаты

В первом SVG используются значения атрибута SVG baseline-shift. Во втором и третьем SVG значения CSS baseline-shift переопределяют значения атрибута.

Спецификации

Совместимость с браузерами

См. также

• Атрибут SVG baseline-shift
• Свойства представления: baseline-shift, clip-rule, color-interpolation-filters, fill-opacity, fill-rule, fill, marker-end, marker-mid, marker-start, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor и vector-effect