Вопрос или проблема
Демонстрация JSFiddle
Предположим, у меня есть что-то подобное в контейнере, минимальном по размеру, который заставляет его переноситься:
<p>Nihongo | <ruby>日<rt>に</rt>本<rt>ほん</rt>語<rt>ご</rt></ruby></p>
Пробел перед элементом <ruby> выглядит нормально, если все находится на одной строке, но если текст переносится (например, контейнер слишком мал), этот предшествующий пробел визуально сжимаются (если я копирую и вставляю текст в другое место, он отображается нормально).
Nihongo |日
本語
Если я уберу этот пробел, чтобы это выглядело следующим образом:
<p>Nihongo |<ruby>日<rt>に</rt>本<rt>ほん</rt>語<rt>ご</rt></ruby></p>
Второй японский символ поднимается, если есть достаточно места, так что получается, что пространство в приведенном выше примере занимает место (вызывая перенос второго японского символа), просто не визуально.
Nihongo |日本
語
Если у меня есть <ruby> без элемента <rt> (бессмысленно, я знаю), эта проблема не возникает:
<p>Nihongo | <ruby>日本語</ruby></p>
Nihongo | 日
本語
Изначально я ожидал, что это будет проблема с неалфавитным текстом, но, играя с JSFiddle, я выяснил, что причиной является сам <rt>. Тое же поведение наблюдается, даже если я делаю следующее:
<ruby>日<rt>ni</rt>本<rt>hon</rt>語<rt>go</rt></ruby>
<ruby>日<rt></rt>本語</ruby>
<ruby style="word-break:break-all">ni<rt>ni</rt>hon<rt>hon</rt>go<rt>go</rt></ruby>
да, даже пустой <rt>!
Я смог обойти эту проблему, используя <span> в качестве псевдо-<rt> и <rb>, что включено в JSFiddle, но я больше ищу объяснение, чем решение. Я также предпочел бы использовать только <rt>, если это возможно, потому что псевдо-элемент просто трудно читать, особенно поскольку мне нужно держать закрывающий и следующий открывающий тег <ruby> вместе без пробела или разрыва строки, как это: </ruby><ruby> (в противном случае пробел автоматически добавляется, что приводит к 日 本 語 вместо этого).
(не совсем актуально, но я также пытался использовать Javascript, чтобы уменьшить размер шрифта, если его ширина больше, чем у контейнера, хотя это было немного дорого для моих вкусов.)
Я пытался читать документацию W3C по <ruby>, но только вижу разъяснения о том, как работает пробел внутри структуры <ruby>, а не снаружи (и документация немного выше моего понимания).
Упрощенные изображения:
Ответ или решение
Существует множество причин, по которым пробел перед элементом <ruby>, содержащим элемент <rt>, визуально сжимается только в том случае, если текст ломается. Давайте разберем этот феномен более подробно.
Контекст использования элементов <ruby> и <rt>
Элементы <ruby> и <rt> предназначены для аннотирования текста в японском и некоторых других языках. Элемент <ruby> используется для отображения фонетических символов или транскрипций, а <rt> предназначен для предоставления этой дополнительной информации. Важно отметить, что отображение этих элементов зависит не только от структуры HTML, но и от стилей CSS, применяемых к ним.
Причины визуального сжатия пробела
-
Обработка пробелов в CSS: Стандарты в HTML и CSS определяют, как обрабатывается пробел между элементами и как они влияют на размещение других элементов. Когда текст находится в одной строке, пробелы обрабатываются как обычные текстовые пробелы, что позволяет им занимать место. Однако, когда текст переносится на новую строку из-за ограниченной ширины контейнера, браузеры могут принимать решение не отображать этот пробел визуально, поскольку он не считается критически важным для понимания текста.
-
Позиционирование элементов
<rt>: Элементы<rt>могут влиять на высоту строки. Когда они представлены рядом с основным текстом в<ruby>, они могут расширять высоту строки. Это может вызвать изменение поведения пробела в зависимости от ширины контейнера и источников шрифта. При наличии недостаточно места для отображения всех элементов в одной строке, пробел становится менее значимым, что приводит к его визуальному сжатию. -
Стилевые свойства: Многое зависит от CSS-стилей, применяемых к элементам. Если не заданы чёткие стилевые правила для обработки пробелов и высоты строки, браузеры могут обрабатывать визуальное представление элементов по своему усмотрению. Свойства такие как
line-height,white-space, и другие могут заметно влиять на отображение пространства. -
Специфичность элемента: Замечено, что загрузка пустых элементов
<rt>вызвала аналогичное поведение. Это связано с тем, что реализовано определённое поведение по умолчанию, при котором пустой<rt>или даже его наличие влияют на внутреннюю структуру и визуальное представление родительского элемента<ruby>.
Возможные решения
Хотя вы хотите использовать элементы <rt>, можно рассмотреть возможность применения альтернативных решений, таких как использование стилей CSS для управления поведением пробелов, или же внедрение JavaScript для динамического редактирования визуальной структуры.
Заключение
Проблема с визуальным сжатием пробела перед элементом <ruby> с <rt> является более сложной и многослойной, чем она может показаться на первый взгляд. Это связано как с особенностями обработки текстовых пробелов в CSS, так и с тем, как элементы аннотации взаимодействуют друг с другом в разных условиях. Понимание этих аспектов может помочь в более эффективном использовании элементов <ruby> и <rt> и в реализации их визуально привлекательного представления.