如何正确对齐html / css中的drop cap？

那么我有以下问题：我需要一个动态的解决方案(不知道文本,生成的字体大小等)以错误的方式正确地对齐一个下拉盖.正确地意思是：下降盖的帽高度线应与段落的帽高度线相同.

例如：ZŽẐ应该与他们的上横杆对齐.当我看到这个问题的一些(错误的)解决方案(他们对齐整体高度,因此看起来可怕的口音,电泳等),我没有看到任何正确的解决方案.

有人知道吗

PS：它可以工作,如果我找到一些方法来一致地将dropcap的基线与段落的第二行的基线对齐,因为从那里可以使用font-size的％-modifier来完成.不幸的是,我也不知道如何归档这个.

这里有一些东西要玩：

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/

解决方法

我在Windows 7中的Chrome,IE10和Firefox中测试了以下代码：

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

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

(请注意,我使用em而不是这里的百分比,并且drop cap的大小是段落line-height的两倍).

似乎这个罪魁祸首是在Firefox中浮动的.它在Chrome和Internet Explorer中显示不错,但在使用float的Firefox中,第一个字符似乎将其与其余行的基线断开连接.我可以删除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中获得好的结果.不幸.

如何正确对齐html / css中的drop cap？

解决方法

相关文章