Буквица в firefox

[alkorlos]

В firefox буквица отображается неправильно

Исправить не получилось, похоже что это баг реализации ::first-letter в firefox. При одинаковых стилях разное расположение псевдоэлемента.

Если обернуть первый символ в span с классом first-letter и дать ему стили от ::first-letter буквица отображается корректно во всех браузерах.

[pepelsbey]

Да, наверное стоит написать фильтр для 11ty, который будет первую букву первого параграфа заворачивать в нужно.

[dom1n1k]

похоже что это баг реализации ::first-letter в firefox

Игнорируется line-height.
https://bugzilla.mozilla.org/show_bug.cgi?id=290125
(особого внимания заслуживает дата баг-репорта)

Либо оборачивать первую букву в span, либо накостылить нечто такое:

@supports (-moz-appearance: none) {
    .content > p:first-of-type::first-letter {
        margin-top: 10px;  /* some magic number */
    }
}

[pepelsbey]

Ой-ей, я бы лучше избежал любых браузерных хаков :)

[alkorlos]

Проверил ещё раз, действительно в firefox line-height игнорируется, но без line-height поведение в firefox и chrome у ::first-letter разное. Видимо нет кроссбраузерного поведения не только у line-height, но и у других свойств, либо наследование свойств работает по разному. Так что надежнее, до исправления багов, отказаться от ::first-letter.

[PetePearl]

я починю

[pepelsbey]

Что-то меня всё больше тянет на фильтр, который первую букву оборачивает в спан с классом. Раз уж у нас такая кроссбраузерность и такой дизайн.

[firefoxic]

Хотел было поразбираться с этой проблемой. Открыл первую (свежайшую) статью для инспектирования. И увидев такое:

не удержался и попробовал удалить всего одно слово из первого абзаца (надо ему прописать display: flow-root;):

И сразу возникает вопрос: А нужна ли эта буквица? Кажется с ней одни только проблемы: кроссбраузерность страдает, а в случае с абзацем в одну строку ещё ломает второй абзац. Я обычно не придираюсь к самой концепции буквицы (ну нравится может людям, пусть используют), но в этом примере слово «Спор» вообще выглядит как отдельные слова «С пор». Самый фатальный на мой взгляд отрыв буквицы от остального текста в случаях, когда в неё попадает первая цифра чисел больше 9:

Но если таки буквица нужна, то тогда второй вопрос:
Какой она должна быть высоты? Верхний край буквицы должен соответствовать верхнему краю прописной или строчной букве в первой строке? В основном в первой строке редко встречаются прописные, и нынешняя буквица выглядит непонятно к чему привязанной по высоте. В редких случаях, вроде этой статьи, сразу после буквицы идут прописные буквы, и тогда более-менее органично смотрится. Но это скорее исключение, чем правило.
В макете верх буквицы уходит выше линии 8-пиксельной сетки, а прописные буквы первой строки — ниже этой линии.

[firefoxic]

Есть ещё один недочёт. Статья вполне может начинаться с чего-то обёрнутого в <code>. Из его содержимого первый символ будет не просто визуально оторван от остальной части, но и насильно переформатирован в Dewi Expanded. Но это ещё не всё: буквица у нас не апперкейсится, из-за чего если первый символ в нижнем регистре (что в кусках кода чаще всего), то он обесценивает наш хак для обхода бага в Firefox с недействующим line-height в ::first-letter.
Вот пример в Chromium:

Он же в Firefox:

uppercase конечно не долго прописать, но как это скажется на восприятии текста, ведь мы привыкли и хотим видеть куски кода такими, какими пишем их в редакторе кода…

[pepelsbey]

И сразу возникает вопрос: А нужна ли эта буквица?

Я понимаю, что самый простой способ решить задачу — это её отменить. И это даже правильный подход, сам так часто делаю. Но всё-таки буквица нам нужна, это сильный элемент, обозначающий начало статьи.

Статья вполне может начинаться с чего-то обёрнутого в <code>

У нас не просто так редакторы есть, они такого не допустят, всегда можно переформулировать.

[alkorlos]

Выше приводили ссылку на [CSS21] floated :first-letter pseudo-element should act like normal inline (e.g., support line-height), репорт о баге буквицы в firefox. Его открыли восемнадцать лет назад, закрыли шесть месяцев назад, в firefox 110 должны быть эти изменения.
Но в актуальном firefox 114 этот баг все еще есть, в актуальном firefox nightly 116.0a1 этой проблемы нет.
В firefox nightly 113.0a1 этой проблемы тоже нет. Похоже в nightly уже какое то время есть исправление этого бага, но в актуальный релиз они не включаются.

Знал что баг, на который ссылка выше, починили, хотел закрыть это issue, но не получилось. Не понятно разработчики firefox не включают исправление этого бага в стабильной версии браузера или это уже другая проблема.