Как правильно выровнять кепку в html/css?

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

Например: Z Ž Ẑ должны совпадать с их верхней горизонтальной планкой. Хотя я видел некоторые (неправильные) решения этой проблемы (они выравнивают общую высоту и, следовательно, выглядят ужасно с акцентами, dieresis и т.д.), Я не видел правильного решения.

Кто-нибудь знает кого-то?

PS: Это может сработать, если бы я нашел способ последовательно выровнять базовую линию dropcap с базовым уровнем второй строки абзаца, потому что оттуда это можно было бы сделать с помощью% -модификатора шрифта -размер. К сожалению, я также не знаю, как я мог бы архивировать это.

Вот с чем можно поиграть:

p.cap {
    text-indent: 0;
    font-size: 125%;
    line-height: 125%;
    text-align: justify;
}

p.cap:first-letter {
    display: inline-block;
    float: left;
    font-size: 230%;
}

http://jsfiddle.net/s856R/

Ответ 1

Я тестировал следующий код в Chrome, IE10 и Firefox в Windows 7:

p.cap {
    line-height: 1.4em;
}

p.cap:first-letter {
    font-size: 2.8em;
    float: left;
    margin-top: 0.25em;
}

(Обратите внимание, что я использую em вместо процента здесь и что размер контрольной точки вдвое больше размера строки абзаца.)

Кажется, что виновник float в Firefox. Он отображается хорошо в Chrome и Internet Explorer, но в Firefox с использованием float для первого символа, похоже, отключается от базовой линии остальной части строки. Я могу удалить float: left; и добавить vertical-align: -100%;, чтобы получить базовую линию во всех браузерах, но затем высоту строки перепутали, и контрольная панель не плавает, так что это не решение.

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

<p class="cap"><span class="dropcap">Ž</span>ed Fhi GaFshF s in GfsF Fhl kfhlkshG glkHjha slkgh ka KFhl skh glkSdsfg d HH Gkhaskg hsHöAKH Hköah skhHaSÖK G hih h G h IGU</p>
<p class="cap"><span class="dropcap">Z</span>as Fhi GaFshF s in GfsF Fhl kfhlkshG glkHjha   slkgh ka KFhl sh glkSdsfg d HH Gkhaskg hsHöAKH Hköah skhHaSÖK G hih h G h IGU</p>

p.cap .dropcap {
    float: left;
    font-size: 2.8em;
    margin-top: 0.25em;
}

Это похоже на то, чтобы поддерживать базовый уровень и хорошо отображать в Firefox, но для динамического написания этих тегов, естественно, потребуется PHP или JavaScript или подобное. Если это не вариант, вы, вероятно, не сможете получить хорошие результаты в Firefox. К сожалению.

Ответ 2

Лучший ответ на этот вопрос заключается в том, что - в зависимости от семейства шрифтов, размера шрифта и высоты линии, которые вы в конечном итоге используете - для этого нужно немного поиграть с отрицательными полями (вздох). Тем не менее, у меня это выглядит довольно хорошо в этой скрипке:

http://jsfiddle.net/rafegoldberg/zohs9tna/5/

Фокус в reset вашей линии-высоте так, чтобы он соответствовал размеру шрифта dropcap, в отличие от наследования высоты строки, содержащей абзац. Таким образом, выполнение чего-то подобного приведет к согласованному расположению верхнего уровня:

p:first-letter {
    font-size: 230%;
    float: left;
    line-height: 1;
    display: inline-block;
}

Это приведет к чему-то вроде этого. (Извините за ссылку на изображение; у меня недостаточно комментариев для отправки изображений!) Но он все еще несовершенен, так как он выровнен по отношению к расширителям первой строки, а не к текстовой вершине. Чтобы исправить это, вам нужно будет отрегулировать верхнюю границу dropcaps - поиграйте с ней, пока вы не подтолкнете dropcap для выравнивания верхней части текста, а не расширителя. (Я использовал outline и outine-offset для проверки моей работы.)

Это приведет к выпадению следующей строки текста. Если это произойдет, просто поиграйте с добавлением небольшого отрицательного поля к нижней части dropcap. Это должно вывести линию обратно, и вам будет хорошо идти! Ваш CSS будет выглядеть так же, как и выше, но с этой дополнительной строкой:

p:first-letter {
    /* previous CSS... */
    margin: .1em .25em -.5em;
}

С этим дополнением все должно выглядеть так. (PS: Я добавил некоторые поля влево и вправо от dropcap как я думаю, вы получите гораздо лучший результат!)

Опять же, это просто то, что потребует некоторого возиться. Но как только вы работаете с вашими специфическими свойствами шрифта (семья, размер, высота линии и т.д.), Он должен работать последовательно! Надеюсь, это поможет; веселит.

Ответ 3

Смотрите обновленную скрипту:

jsFiddle

Попробуйте следующее:

p.cap {
     text-indent:0; font-size:125%; line-height:125%;
     text-align:justify;
 }

p.cap:first-letter {
     display:inline-block; float:left; font-size:280%;margin-top:15px
}

Ответ 4

p.cap_push_it_down:first-letter {
    display:inline-block; 
    float:left; font-size:230%;
    padding-top:14px; //note this

}

Я думаю, вы должны дать несколько разных имен класса абзацам, начиная с букв, таких как Ž и укажите их стили, как в приведенном выше коде...

также, можете ли вы разработать немного больше тех "неправильных решений"?

Ответ 5

Попробуйте это - определите шрифт, который требует ваших требований...

body 
{font-family: "times"};
p.cap {
    text-indent:0; font-size:125%; line-height:125%;
    text-align:justify;
}

p.cap:first-letter {
    display:inline-block; float:left; font-size:280%;margin-top:-6px

Ответ 6

С небольшой помощью от jQuery (спасибо foxybagga) я как-то добился этого.

Это

$("#container p").each(function () {
    var text = $(this).html();
    var first = $('<span>' + text.charAt(0) + '</span>').addClass('caps');
    $(this).html(text.substring(1)).prepend(first);
});

обертывает первую букву с шапками < span class= → тег. Класс имеет всего пару строк больше, чем ваш класс p.cap: first-letter, но выполняет задание.

.caps {
    display:inline-block;
    float:left;
    font-size:230%;
    line-height:100%;
    margin-top:-2px;
    padding-right:2px;
}

обратите внимание: использование этих правил css с вашим классом p.cap: first-letter не дает того же результата.

jsfiddle

Ответ 7

Вот один из способов: http://jsfiddle.net/picbig/s856R/38/

p.cap {
    text-indent:0; font-size:125%; line-height:125%;
    text-align:justify;
}

p.cap:first-letter {
    float: left; font-size:230%;

}

p.cap:first-child:first-letter{
    margin-top: -5px;
}
p.cap:last-child:first-letter{
    margin-top: 2px;
}

A: Ориентация каждого p: первая буква отдельно с двойным псевдо: first-child: first-letter {} и установка полей на них

B: нет необходимости в отображении: inline-block на p.cap: first-letter

Ответ 8

Давая первую букву, высота линии 100% работает для меня, независимо от размера шрифта обычного текста или капли:

p.cap {
    text-indent:0; font-size:125%; line-height:125%;
    text-align:justify;
}

p.cap:first-letter {
    position: relative; float:left; font-size:200%; line-height: 100%;
}

Обновлен скрипт: http://jsfiddle.net/g11v61sc/

Ответ 9

Контекст dropcap во всех браузерах и протестирован на iOS. Решенная проблема: Dropcap в Firefox: первая буква с поплавком останется потерять линейный контур и сделает букву в стиле sup. Вы можете избежать этого:

Добавьте дополнение и верхнюю часть с равным фиксированным значением.
Задайте размер шрифта
Установите высоту строки как значение fontsize минус padding-top и нижнее значение padding
Опция Отрегулируйте верхний край с отрицательными (или положительными) значениями
Опция Отрегулируйте обрезку нижнего нижнего поля нижним значением.

В этом примере создается идеальный "Typographic dropcap" ¹ с basefont Arial, 12px в качестве абзаца и с высотой строки 16px. Весь текстовый блок имеет 10px margin-top в моем тесте.

¹ Используйте символ "V" в качестве dropcap, за которым следует символ "i". "I-точка" должна соответствовать правильному выравниванию по вертикали. (Кошка несовместима со всеми устройствами/семействами шрифтов, но является хорошей точкой отсчета).

/* Dropcap */

 p.dropcap:first-letter {
 padding-top: 5px; 
 padding-bottom: 5px; 
 margin-top: -1px; 
 margin-right: 7px; 
 margin-bottom: -3px; 
 line-height: 24px; 
 float: left; 
 color: #777667; 
 font-family: Arial, Georgia, open sans; 
 font-size: 34px; 
 font-weight: 600; 
 text-transform: uppercase; 
}

Надеюсь, что это поможет в ваших контекстах таблиц стилей.