Мобильная версияОбратите внимание, что аннотации Ruby в последующих строках подходят, потому что они вписываются в пределах 0,5 от 1,5 line-height, поскольку аннотации Ruby по умолчанию имеют половину размера шрифта в качестве основы.
Я исследовал CSS Ruby Annotation Layout Module Level 1, и там упоминается аналогичная вещь для использования line-height для межстрочного случая:
Свойство line-height управляет расстоянием между строками в CSS. Когда встроенное содержимое в строке короче, чем высота строки, с обеих сторон содержимого добавляется половинный интерлиньяж, как указано в CSS Inline Layout 3 §5 «Логическая высота и межстрочный интервал».
...
Авторы должны обеспечить соответствующую высоту строки и отступы для размещения Ruby, и быть особенно осторожными в начале или конце блока, а также когда строка содержит контент строкового уровня (например, изображения, встроенные строки). блоки или элементы, смещенные с помощью вертикального выравнивания) выше размера шрифта абзаца по умолчанию.
Мне хотелось бы увидеть решение, которое будет продолжать использовать , позволяя при этом располагать базовую линию первой строки текста в той же позиции, и со мной все в порядке, пока оно работает в последней стабильной версии Chrome. Если это невозможно, я все равно хотел бы посмотреть, есть ли какой-нибудь хороший способ добиться этого, например. лучший способ добавить невидимую аннотацию Ruby в первую строку, чтобы занять место, которое заняла бы фактическая аннотация Ruby, не меняя внешний вид или вывод специальных возможностей.
Код: Выделить всё
.page {
display: flex;
flex-direction: row;
gap: 10px;
}
.container {
position: relative;
width: 300px;
height: 300px;
background: beige;
}
.text {
position: absolute;
inset: 10px;
font-size: 26px;
line-height: 1.5;
border: 1px solid red
}Код: Выделить всё
吾輩わがはいは猫である。名前はまだ無い。どこで生うれたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生うれたかとんと見当がつかぬ。
Подробнее здесь: https://stackoverflow.com/questions/798 ... tion-at-th
