Почему пробел, предшествующий элементу <ruby>, содержащему <rt>, визуально схлопывается только тогда, когда японский текCSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Почему пробел, предшествующий элементу <ruby>, содержащему <rt>, визуально схлопывается только тогда, когда японский тек

Сообщение Anonymous »

Обновление: подтверждено, что это ошибка Chromium, и она устранена начиная с версии 132.0.6825.0. Вероятно, потребуется еще несколько недель, чтобы увидеть это в стабильной версии Chrome.
Скриншот того, как это выглядит после исправления:

Изображение


Демонстрация JSFiddle
Обратите внимание, что такое поведение не наблюдается в Firefox и Safari, как указано Ry- в комментариях! Пока что это проблема Chromium

Скажем, у меня есть что-то подобное в достаточно маленьком контейнере, который заставляет его частично обернуться:

Код: Выделить всё

Nihongo | 日に本ほん語ご
Пробел, предшествующий элементу , выглядит нормально, если все находится в одной строке, но если текст переносится (например, контейнер слишком мал), этот предшествующий белый пространство свернуто визуально (если я скопирую и вставлю текст в другое место, он отобразится нормально).
Нихонго |日

本語

Если я удалю это место и оно будет выглядеть так:

Код: Выделить всё

Nihongo |日に本ほん語ご
Второй японский символ перемещается вверх, если достаточно места, поэтому пространство в приведенном выше примере действительно занимает место. (вызывает перенос второго японского символа), но не визуально.
Нихонго |日本


Если у меня есть без элемента (бессмысленно, я знаю), этой проблемы не возникает:

Код: Выделить всё

Nihongo | 日本語
Нихонго | 日

本語

Изначально я ожидал, что это проблема с небуквенно-цифровым текстом, но, поигравшись в JSFiddle Я узнал, что виноват сам . Такое же поведение происходит, даже если я делаю следующее:

Код: Выделить всё

日ni本hon語go

日本語

ninihonhongogo
да, даже пустой !

Мне удалось обойти эту проблему, используя в качестве псевдо- и , которые включены в JSFiddle, но Я больше ищу объяснение, чем решение. Я также предпочел бы использовать только < rt> если возможно, потому что псевдо-тег просто трудно читать, особенно потому, что мне нужно хранить закрывающий и следующий открывающий тег вместе без пробела или разрыва строки, например: (в противном случае пробел будет автоматически добавляется, в результате чего вместо этого получается 日 本 語).
(не совсем актуально, но я также пытался использовать Javascript для уменьшения размера шрифта, если его ширина длиннее контейнера, хотя на мой вкус, это было немного дороговато.)
Я пробовал читать документацию W3C по , но видел только пояснения о том, как работают пробелы внутри Структура , а не внешняя (и документация немного выше моего понимания).
Упрощенные изображения:
Это что я получаю
Что я ожидал

Наиболее близкое к тому, что мне удалось избежать проблемы ( кроме псевдометода) использует   вместо обычного пробела, но это создает новую проблему если весь японский текст переносится; перед обернутым текстом на японском языке появляется предшествующий пробел, например:
Нихонго |

 日本語

Подробнее здесь: https://stackoverflow.com/questions/791 ... sually-col
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»