text-box-edge

Свойство text-box-edge задаёт, по каким визуальным линиям текста нужно обрезать вертикальные края блока, когда используется text-box-trim. Это помогает более точно контролировать высоту текстового контейнера.

Устанавливает обрезку с двух сторон, сверху и снизу:

        
          
          .with-edge {  text-box-trim: trim-both;  font-size: 3rem;  text-box-edge: cap alphabetic;  background: pink;  border: 2px dashed crimson;}
          .with-edge {
  text-box-trim: trim-both;

  font-size: 3rem;
  text-box-edge: cap alphabetic;
  background: pink;
  border: 2px dashed crimson;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

👆 В примере видно, что блок подстраивается под высоту заглавных букв и базовую линию шрифта.

        
          
          .syntax {  text-box-edge: top-edge bottom-edge;}
          .syntax {
  text-box-edge: top-edge bottom-edge;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Свойство принимает два значения — первое для верхнего края, второе для нижнего. Ниже описаны только поддерживаемые в большинстве браузеров значения, с которыми свойство работает надёжно:

• cap — линия верхушек заглавных букв, например, «H» или «L». Часто используется для строгого выравнивания заголовков;
• ex — высота строчной буквы «x» в шрифте. Это может быть полезно, если выравнивание нужно относительно основного тела строчных букв;
• text — граница по фактическому содержимому текста. Обрезается по самой верхней видимой части символов.

• alphabetic — базовая линия текста, на которой стоят символы. Это стандартная отправная точка в типографике;
• text — аналогично верхнему значению text, но применимо к нижней части: граница проходит по самой нижней видимой части символов, включая хвосты у «g», «y» и т. п.

📝 Значения можно комбинировать в любой паре, например:

• text-box-edge: cap alphabetic;
• text-box-edge: text text;

Если указано только одно значение — оно применяется и к верхнему, и к нижнему краю. Такими значениями являются только auto и text.

Можно использовать шорткат text-box, чтобы задать text-box-trim и text-box-edge одной строкой:

        
          
          .tip {  text-box: trim-both cap alphabetic;}
          .tip {
  text-box: trim-both cap alphabetic;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Это будет равнозначно записи:

        
          
          .tip {  text-box-trim: trim-both;  text-box-edge: cap alphabetic;}
          .tip {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Когда включено свойство text-box-trim, браузеру нужно понять, где именно обрезать верх и низ текстового блока. Для этого используется text-box-edge, которое задаёт точку отсечения.

Таким образом, text-box-edge даёт браузеру ориентиры, по которым он будет обрезать лишние внутренние отступы сверху и снизу.

💡 Без text-box-trim свойство text-box-edge не работает — оно только задаёт границы, а не включает обрезку.
💡 Лучшее сочетание для выравнивания заголовков — text-box-trim: trim-both; text-box-edge: cap alphabetic;.