Больше букв в слове после первого: добавлено дополнительное пространство (или вычитается - если размер шрифта меньше, чем у блока).
Итак, вопрос: существует ли какое-либо обходное решение для этой ошибки? Это несколько убивает меня.
Ответ 2
Я не думаю, что там хорошее решение.
Я придумал для вас сломанное решение:
.test:first-letter {
font-size: 2em;
letter-spacing: -0.225em;
}
Добавьте стиль letter-spacing в селектор :first-letter в Fiddle, и вы увидите, что блоки возвращаются к примерно правильному размеру.
Объяснение:
В основном ошибка возникает из-за того, что весь блок принимает свой размер из шрифта, указанного в first-letter.
То, что я делаю здесь с letter-spacing, пытается настроить размер этого шрифта, не затрагивая его внешний вид. Таким образом, изменение расстояния между буквами в обычном тексте приведет к тому, что буквы будут перекрываться друг с другом на ширину символа .225 с обеих сторон.
Вначале я надеялся, что значение -0.25 будет достаточным, т.е. четверть символа с каждой стороны уменьшит ширину каждого символа наполовину, что было бы то, что мы хотим, потому что первая буква font-size:2em, поэтому он вдвое больше.
Однако вычисление не так чисто, как это, потому что первый и последний символы в строке будут перекрываться только с одной стороны, а потому, что первая буква действительно хочет быть двойной шириной, даже если остальные персонажи этого не делают.
Все это означает, что точное значение letter-spacing, необходимое для борьбы с ошибкой, будет зависеть от того, как долго текст, а также размер шрифта исходного текста и первая буква. Вот почему мне пришлось немного поэкспериментировать со значением интервала между буквами, чтобы заставить его работать, а также объясняет, почему я не мог полностью поместиться во всех текстовых строках в вашей скрипке. Мне понадобилось бы немного другое значение для каждого блока.
Значение -0.225, по-видимому, касается ближайшего, что я могу получить, чтобы оно было правильным для всех ваших примеров, но на практике вам нужно настроить его в соответствии с вашим сайтом.
Не забывайте также, что это ошибка Firefox, и поэтому вам нужно будет записать ее в виде какого-то конкретного браузера. И будьте осторожны, чтобы следить за сообщением об ошибке Firefox, с которым вы связаны; когда он будет исправлен, вам нужно будет разработать способ взломать место для пользователей старых версий, но удалите его для пользователей с исправлением.
[EDIT]
Единственное другое рабочее решение, которое я придумал, - это просто не использовать функции, которые вызывают ошибку. т.е. отбросить селектор :first-letter и использовать отдельную <span> для первой буквы вашего текста, если вы хотите по-разному стилизовать ее.
Это наглядный ответ на самом деле и, конечно, решит проблему (а также означало бы, что ваше стилизованное первое письмо работает в старых браузерах), но оно не будет идеальным с семантической точки зрения, и, что более важно, на самом деле ответить на вопрос, поэтому я не предлагал его в качестве решения в своем первоначальном ответе.
Я пытаюсь найти альтернативную работу для этой ошибки, но варианты ограничены, и ничто из того, что я пробовал, не дало хороших результатов, как мое первоначальное предложение.
Я попробовал взломать :first-letter невидимый и с помощью :before отобразить большую ведущую заглавную букву. Однако это не сработало для меня. Я не задерживался на нем слишком долго, поэтому вы можете заставить его работать, но есть проблема с ним в том, что вам нужно будет определить ведущую букву в CSS, что не будет идеальным.
Другим возможным решением является использование свойства CSS font-stretch: condensed; на :first-letter. Это уменьшит ширину первой буквы до 1em и, таким образом, устранит проблему ширины остальной части текста. Однако нижние стороны этого заключаются в том, что во-первых, это приведет к тому, что ведущее письмо будет выглядеть сжатым, что, вероятно, не так, как вы хотите, и, во-вторых, этот стиль работает только для шрифтов, которые поддерживают свойство condensed. Оказывается, что это не очень хорошо поддерживается стандартными шрифтами, поэтому для вас это невозможно.
В конце концов, исходное решение letter-spacing по-прежнему остается единственным способом, по которому я нашел работу над ошибкой.
