如何正确对齐 html/css 中的首字下沉？

Question

好吧，我遇到了以下问题：我需要一个动态解决方案（不知道文本、生成的字体大小等）以在印刷上正确对齐首字下沉。正确的意思是：首字下沉的大写高度线应与段落大写高度线相同。

例如：Z Ž Ẑ 应该都与它们的上水平条对齐。虽然我已经看到了一些（错误的）解决这个问题的方法（它们对齐了整体高度，因此看起来很糟糕），但我还没有看到任何正确的解决方案。

有人知道吗？

PS：如果我能找到某种方法将首字下沉的基线与段落第二行的基线一致地对齐，它可能会起作用，因为从那里可以使用字体的 % 修饰符来完成-尺寸。不幸的是，我也不知道如何存档。

这里有一些东西可以玩：

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/

Answer 1

我在 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 而不是百分比，并且首字下沉的大小是段落行高的两倍。）

似乎罪魁祸首是 Firefox 中的float。它在 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 中获得好的结果。很遗憾。

Answer 2

对此的最佳答案是——取决于你最终使用的字体系列、字体大小和行高——它需要一些负边距（喘息）的摆弄才能得到 just em> 对。也就是说，我在这个小提琴中看起来相当不错：

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

诀窍是重置行高，使其与首字下沉字体的大小相匹配，而不是继承其包含段落的行高。所以做这样的事情将实现一致的顶部对齐：

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

This will result in something like this.（很抱歉提供图片链接；我没有足够的代表来发布图片！）但它仍然不完美，因为它与第一行的扩展器而不是文本顶部对齐。要解决这个问题，您需要调整首字下沉的上边距——玩弄它，直到您将首字轻推以对齐文本顶部，而不是扩展器。 （我使用outline 和outine-offset 来检查我的工作。）

这可能会导致下一行文本下拉。如果发生这种情况，只需在首字下沉的底部添加一个轻微的负边距即可。那应该把线拉回来，你会很高兴的！你的 CSS 看起来和上面的一模一样，但是多了一行：

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

With that addition things should now look like this.（PS：我在 dropcap 的左侧和右侧添加了一些边距，因为我认为您会得到更好看的结果！）

同样，这只是需要一些摆弄的东西。但是一旦你让它与你的特定字体属性（系列、大小、行高等）一起工作，它应该可以始终如一地工作！希望有帮助；干杯。

Answer 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
}

Answer 4

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

}

我认为您应该为以 Ž 之类的字母开头的段落赋予一些不同的类名 并像上面显示的代码一样指定它们的样式...

另外，你能详细说明一下那些“错误的解决方案”吗？？

Answer 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

Answer 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);
}); 

用 标签包裹第一个字母。 该类只比您的 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

Answer 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：使用双伪 :first-child:first-letter{} 分别定位每个 p:first-letter 并在它们上设置边距

B：不需要显示：p.cap:first-letter 上的 inline-block

Answer 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/

Answer 9

所有浏览器中的一致 dropcap 并在 iOS 上进行了测试。已解决的问题：Firefox 中的首字母大写 :first-letter as float left 会松开行高 并使字母变为 sup 样式。 您可以通过以下方式避免这种情况：

1. 添加具有相同固定值的 padding-top 和 padding-bottom。
2. 设置字体大小
3. 将 line-height 设置为 fontsize 值减去 padding-top 和 padding-bottom 值
4. Opt 使用负（或正）值调整上边距
5. Opt 使用负边距底部值调整文本底部环绕。

此示例制作了一个完美的“Typographic dropcap”¹，基本字体为 Arial，段落为 12px，行高为 16px。在我的测试中，整个文本块的顶部边距为 10px。

¹使用字符“V”作为首字下沉，后跟“i”字符。 “i-dot”应该与正确的印刷顶部对齐方式匹配。 （当然不是在所有设备/字体系列中都一致，但一个很好的参考点）。

/* 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; 
}

希望这对您的样式表上下文有所帮助。