Well I've got the following problem: I need a dynamic solution (dont know the text, resulting font-size etc.) to typografically correctly align a drop cap. Correctly means: the cap-height-line of the drop cap should be the same as the cap height line of paragraph.
好吧,我有以下问题:我需要一个动态解决方案(不知道文本,产生字体大小等),以排版方式正确对齐下降帽。正确的意思是:下降帽的帽高度线应与段落的帽高度线相同。
Eg: Z Ž Ẑ should all align to their upper horizontal bar. While I've seen some (wrong) solutions to this problem (they align the overall height and therefore look terrible with accents, dieresis etc.), I've not seen any correct solution.
例如:ZŽẐ应该都与它们的上部水平条对齐。虽然我已经看到了这个问题的一些(错误的)解决方案(它们对齐整体高度因此看起来很糟糕,有重音符号,dieresis等),我没有看到任何正确的解决方案。
Does anyone know some?
有人知道吗?
PS: It could work, if I'd find some way to consistently align the baseline of the dropcap with the baseline of the 2nd line of the paragraph, because from there it could be done with a %-modifier of the font-size. Unfortunately, I also don't know how I could archive this.
PS:它可以工作,如果我找到一些方法来一致地将dropcap的基线与段落的第二行的基线对齐,因为从那里可以使用font-size的%-modifier完成。不幸的是,我也不知道如何归档这个。
Here is something to play with:
这是一个可以玩的东西:
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%;
}
9 个解决方案
#1
2
I tested the following code in Chrome, IE10 and Firefox on Windows 7:
我在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;
}
(Note that I'm using em instead of percent here and that the size of the drop cap is double that of the paragraph line-height.)
(请注意,我在这里使用的是em而不是百分比,并且drop cap的大小是段落行高的两倍。)
It seems that the culprit is float in Firefox. It displays nice in Chrome and Internet Explorer, but in Firefox using float on the first character seems to disconnect it from the baseline of the rest of the line. I can delete float: left; and add vertical-align: -100%; to get the baseline to match in all browsers, but then the line-height gets messed up and the drop-cap doesn't float so it's not a solution.
似乎罪魁祸首是Firefox中的浮动。它在Chrome和Internet Explorer中显示效果不错,但在Firefox中使用第一个字符上的float似乎将其与该行的其余部分的基线断开连接。我可以删除float:left;并添加vertical-align:-100%;在所有浏览器中获得匹配的基线,但随后线高度变得混乱并且下拉盖不浮动,因此它不是解决方案。
The only solution seems to be to put a span around the first letter and use that instead. Like so:
唯一的解决方案似乎是在第一个字母周围放置一个跨度并使用它。像这样:
<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>
and:
p.cap .dropcap {
float: left;
font-size: 2.8em;
margin-top: 0.25em;
}
This seems to keep the baseline and displays nicely in Firefox as well, but writing those tags dynamically will naturally require PHP or JavaScript or similar. If that's not an option you will probably not be able to get good results in Firefox. Unfortunately.
这似乎保留了基线并在Firefox中也很好地显示,但动态编写这些标签自然需要PHP或JavaScript或类似的。如果这不是一个选项,你可能无法在Firefox中获得好的结果。不幸。
#2
1
The best answer to this is that – depending on the font-family, font-size, and line-height you end up using – it will require some fiddling with negative margins (gasp) to get just right. That said, I've got it looking pretty good in this fiddle:
对此最好的答案是 - 取决于你最终使用的字体系列,字体大小和行高 - 它需要一些摆弄负边距(喘气)才能做到恰到好处。也就是说,我觉得这个小提琴看起来很不错:
http://jsfiddle.net/rafegoldberg/zohs9tna/5/
The trick is to reset your line-height so that it matches the size of the dropcap font, as opposed to inheriting the line-height of it's containing paragraph. So doing something like this will achieve a consistent top alignment:
诀窍是重置行高,使其与dropcap字体的大小相匹配,而不是继承其包含段落的行高。所以做这样的事情将实现一致的顶部对齐:
p:first-letter {
font-size: 230%;
float: left;
line-height: 1;
display: inline-block;
}
This will result in something like this. (Sorry for the link to an image; I don't have enough rep. to post images!) But it's still imperfect since it's being aligned to the first line's extenders rather than the text-top. To fix this you'll need to adjust the dropcaps top margin — play around with it until you've nudged the dropcap in to alignment the text top, rather than the extender. (I've used outline and outine-offset to check my work.)
这将导致类似这样的事情。 (对不起图像的链接;我没有足够的代表发布图像!)但它仍然不完美,因为它与第一行的扩展器而不是文本顶部对齐。为了解决这个问题,你需要调整dropcaps的上边距 - 用它来玩它,直到你把dropcap推到文本顶部而不是扩展器上。 (我用轮廓和outine-offset来检查我的工作。)
This will likely cause the next line of text to drop down. If that happens, just play around with adding a slight negative margin to the bottom of the dropcap. That should pull the line back up, and you'll be good to go! Your CSS would look exactly like the above, but with this additional line:
这可能会导致下一行文本下拉。如果发生这种情况,只需在dropcap的底部添加一个小的负边距即可。这应该拉回来,你会好起来的!你的CSS看起来与上面完全一样,但是这个额外的行:
p:first-letter {
/* previous CSS... */
margin: .1em .25em -.5em;
}
With that addition things should now look like this. (PS: I've added some margins to the left and right sides of the dropcap as I think you get a much better looking result!)
有了这个补充,现在看起来应该是这样的。 (PS:我已经在dropcap的左侧和右侧添加了一些边距,因为我认为你的结果会更好看!)
Again, this is just something that'll require some fiddling around with. But once you've got it working with your specific font properties (family, size, line-height, etc.) it should work consistently! Hope that helps; cheers.
同样,这只是需要一些摆弄的东西。但是,一旦你使用了特定的字体属性(系列,大小,行高等),它应该能够始终如一地工作!希望有所帮助;干杯。
#3
0
See your updated fiddle :
看到你更新的小提琴:
Try this :
尝试这个 :
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
0
p.cap_push_it_down:first-letter {
display:inline-block;
float:left; font-size:230%;
padding-top:14px; //note this
}
i think you should give some different class name to paragraphs starting with letters like Ž and specify their styles like in above shown code...
我认为你应该给像Ž这样的字母开头的段落给出一些不同的类名,并在上面显示的代码中指定它们的样式......
also, can you elaborate a bit more those "wrong solutions" ??
还有,你能详细说明那些“错误的解决方案”吗?
#5
0
Try this - define a Font witch suts your requirements...
试试这个 - 定义一个字体巫婆你的要求...
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
0
With a little help from jquery (thanks foxybagga) I somehow achieved it.
在jquery的帮助下(感谢foxybagga)我以某种方式实现了它。
This
$("#container p").each(function () {
var text = $(this).html();
var first = $('<span>' + text.charAt(0) + '</span>').addClass('caps');
$(this).html(text.substring(1)).prepend(first);
});
wraps the first letter with a <span class="caps"> tag. The class has just a couple lines more than your p.cap:first-letter class, but does the job.
用标签包装第一个字母。这节课比你的p.cap:第一个字母的课程只有几行,但是能完成这项工作。
.caps {
display:inline-block;
float:left;
font-size:230%;
line-height:100%;
margin-top:-2px;
padding-right:2px;
}
please note: using these css rules with your p.cap:first-letter class doesn't give the same result.
请注意:在p.cap:first-letter类中使用这些css规则不会给出相同的结果。
#7
0
Here is one way to the result: http://jsfiddle.net/picbig/s856R/38/
以下是结果的一种方法: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: Targeting each p:first-letter indivually with double pseudo :first-child:first-letter{} and set margins on them
答:针对每个p:第一个字母单独使用双伪:第一个孩子:第一个字母{}并设置它们的边距
B: No need for display: inline-block on p.cap:first-letter
B:不需要显示:p.cap上的内联块:第一个字母
#8
0
Giving the first letter a line-height of 100% works for me, regardless of the font size of either the normal text or the drop cap:
无论正常文本或首字下沉的字体大小如何,给第一个字母的行高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%;
}
Updated fiddle: http://jsfiddle.net/g11v61sc/
更新小提琴:http://jsfiddle.net/g11v61sc/
#9
0
Concistant dropcap in All browsers and tested on iOS as well. Solved problem: The dropcap in Firefox :first-letter as float left will loose the lineheight and makes the letter sup-styled. You can avoid this by:
所有浏览器中的Concistant dropcap以及iOS上的测试。解决了问题:Firefox中的dropcap:左边的第一个字母会松开线条高度并使字母成为支持。您可以通过以下方式避免此
- Add padding-top and padding-bottom with an equal fixed value.
- Set the font-size
- Set the line-height as the fontsize value minus padding-top and padding-bottom value
- Opt Adjust the margin-top with negative (or positive) values
- Opt Adjust the text bottom wrap with negative margin-bottom value.
添加填充顶部和填充底部,具有相等的固定值。
设置字体大小
将line-height设置为fontsize值减去padding-top和padding-bottom值
选项使用负(或正)值调整margin-top
选项使用负边距底值调整文本底部换行。
This example makes a perfect "Typographic dropcap"1 with the basefont Arial, 12px as the paragraph, and with 16px line-height. The whole textblock has a 10px margin-top in my test.
这个例子使用basefont Arial制作了一个完美的“Typographic dropcap”1,段落为12px,行高为16px。整个文本块在我的测试中有10px的margin-top。
1Use the character "V" as dropcap followed by a "i" character. The "i-dot" should match the correct typographic top alignment. (Of couse not consistant in all devices/ font-families but a good reference point).
1使用字符“V”作为dropcap,后跟“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;
}
Hope thats helps in your stylesheet contexts.
希望这有助于您的样式表上下文。
#1
2
I tested the following code in Chrome, IE10 and Firefox on Windows 7:
我在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;
}
(Note that I'm using em instead of percent here and that the size of the drop cap is double that of the paragraph line-height.)
(请注意,我在这里使用的是em而不是百分比,并且drop cap的大小是段落行高的两倍。)
It seems that the culprit is float in Firefox. It displays nice in Chrome and Internet Explorer, but in Firefox using float on the first character seems to disconnect it from the baseline of the rest of the line. I can delete float: left; and add vertical-align: -100%; to get the baseline to match in all browsers, but then the line-height gets messed up and the drop-cap doesn't float so it's not a solution.
似乎罪魁祸首是Firefox中的浮动。它在Chrome和Internet Explorer中显示效果不错,但在Firefox中使用第一个字符上的float似乎将其与该行的其余部分的基线断开连接。我可以删除float:left;并添加vertical-align:-100%;在所有浏览器中获得匹配的基线,但随后线高度变得混乱并且下拉盖不浮动,因此它不是解决方案。
The only solution seems to be to put a span around the first letter and use that instead. Like so:
唯一的解决方案似乎是在第一个字母周围放置一个跨度并使用它。像这样:
<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>
and:
p.cap .dropcap {
float: left;
font-size: 2.8em;
margin-top: 0.25em;
}
This seems to keep the baseline and displays nicely in Firefox as well, but writing those tags dynamically will naturally require PHP or JavaScript or similar. If that's not an option you will probably not be able to get good results in Firefox. Unfortunately.
这似乎保留了基线并在Firefox中也很好地显示,但动态编写这些标签自然需要PHP或JavaScript或类似的。如果这不是一个选项,你可能无法在Firefox中获得好的结果。不幸。
#2
1
The best answer to this is that – depending on the font-family, font-size, and line-height you end up using – it will require some fiddling with negative margins (gasp) to get just right. That said, I've got it looking pretty good in this fiddle:
对此最好的答案是 - 取决于你最终使用的字体系列,字体大小和行高 - 它需要一些摆弄负边距(喘气)才能做到恰到好处。也就是说,我觉得这个小提琴看起来很不错:
http://jsfiddle.net/rafegoldberg/zohs9tna/5/
The trick is to reset your line-height so that it matches the size of the dropcap font, as opposed to inheriting the line-height of it's containing paragraph. So doing something like this will achieve a consistent top alignment:
诀窍是重置行高,使其与dropcap字体的大小相匹配,而不是继承其包含段落的行高。所以做这样的事情将实现一致的顶部对齐:
p:first-letter {
font-size: 230%;
float: left;
line-height: 1;
display: inline-block;
}
This will result in something like this. (Sorry for the link to an image; I don't have enough rep. to post images!) But it's still imperfect since it's being aligned to the first line's extenders rather than the text-top. To fix this you'll need to adjust the dropcaps top margin — play around with it until you've nudged the dropcap in to alignment the text top, rather than the extender. (I've used outline and outine-offset to check my work.)
这将导致类似这样的事情。 (对不起图像的链接;我没有足够的代表发布图像!)但它仍然不完美,因为它与第一行的扩展器而不是文本顶部对齐。为了解决这个问题,你需要调整dropcaps的上边距 - 用它来玩它,直到你把dropcap推到文本顶部而不是扩展器上。 (我用轮廓和outine-offset来检查我的工作。)
This will likely cause the next line of text to drop down. If that happens, just play around with adding a slight negative margin to the bottom of the dropcap. That should pull the line back up, and you'll be good to go! Your CSS would look exactly like the above, but with this additional line:
这可能会导致下一行文本下拉。如果发生这种情况,只需在dropcap的底部添加一个小的负边距即可。这应该拉回来,你会好起来的!你的CSS看起来与上面完全一样,但是这个额外的行:
p:first-letter {
/* previous CSS... */
margin: .1em .25em -.5em;
}
With that addition things should now look like this. (PS: I've added some margins to the left and right sides of the dropcap as I think you get a much better looking result!)
有了这个补充,现在看起来应该是这样的。 (PS:我已经在dropcap的左侧和右侧添加了一些边距,因为我认为你的结果会更好看!)
Again, this is just something that'll require some fiddling around with. But once you've got it working with your specific font properties (family, size, line-height, etc.) it should work consistently! Hope that helps; cheers.
同样,这只是需要一些摆弄的东西。但是,一旦你使用了特定的字体属性(系列,大小,行高等),它应该能够始终如一地工作!希望有所帮助;干杯。
#3
0
See your updated fiddle :
看到你更新的小提琴:
Try this :
尝试这个 :
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
0
p.cap_push_it_down:first-letter {
display:inline-block;
float:left; font-size:230%;
padding-top:14px; //note this
}
i think you should give some different class name to paragraphs starting with letters like Ž and specify their styles like in above shown code...
我认为你应该给像Ž这样的字母开头的段落给出一些不同的类名,并在上面显示的代码中指定它们的样式......
also, can you elaborate a bit more those "wrong solutions" ??
还有,你能详细说明那些“错误的解决方案”吗?
#5
0
Try this - define a Font witch suts your requirements...
试试这个 - 定义一个字体巫婆你的要求...
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
0
With a little help from jquery (thanks foxybagga) I somehow achieved it.
在jquery的帮助下(感谢foxybagga)我以某种方式实现了它。
This
$("#container p").each(function () {
var text = $(this).html();
var first = $('<span>' + text.charAt(0) + '</span>').addClass('caps');
$(this).html(text.substring(1)).prepend(first);
});
wraps the first letter with a <span class="caps"> tag. The class has just a couple lines more than your p.cap:first-letter class, but does the job.
用标签包装第一个字母。这节课比你的p.cap:第一个字母的课程只有几行,但是能完成这项工作。
.caps {
display:inline-block;
float:left;
font-size:230%;
line-height:100%;
margin-top:-2px;
padding-right:2px;
}
please note: using these css rules with your p.cap:first-letter class doesn't give the same result.
请注意:在p.cap:first-letter类中使用这些css规则不会给出相同的结果。
#7
0
Here is one way to the result: http://jsfiddle.net/picbig/s856R/38/
以下是结果的一种方法: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: Targeting each p:first-letter indivually with double pseudo :first-child:first-letter{} and set margins on them
答:针对每个p:第一个字母单独使用双伪:第一个孩子:第一个字母{}并设置它们的边距
B: No need for display: inline-block on p.cap:first-letter
B:不需要显示:p.cap上的内联块:第一个字母
#8
0
Giving the first letter a line-height of 100% works for me, regardless of the font size of either the normal text or the drop cap:
无论正常文本或首字下沉的字体大小如何,给第一个字母的行高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%;
}
Updated fiddle: http://jsfiddle.net/g11v61sc/
更新小提琴:http://jsfiddle.net/g11v61sc/
#9
0
Concistant dropcap in All browsers and tested on iOS as well. Solved problem: The dropcap in Firefox :first-letter as float left will loose the lineheight and makes the letter sup-styled. You can avoid this by:
所有浏览器中的Concistant dropcap以及iOS上的测试。解决了问题:Firefox中的dropcap:左边的第一个字母会松开线条高度并使字母成为支持。您可以通过以下方式避免此
- Add padding-top and padding-bottom with an equal fixed value.
- Set the font-size
- Set the line-height as the fontsize value minus padding-top and padding-bottom value
- Opt Adjust the margin-top with negative (or positive) values
- Opt Adjust the text bottom wrap with negative margin-bottom value.
添加填充顶部和填充底部,具有相等的固定值。
设置字体大小
将line-height设置为fontsize值减去padding-top和padding-bottom值
选项使用负(或正)值调整margin-top
选项使用负边距底值调整文本底部换行。
This example makes a perfect "Typographic dropcap"1 with the basefont Arial, 12px as the paragraph, and with 16px line-height. The whole textblock has a 10px margin-top in my test.
这个例子使用basefont Arial制作了一个完美的“Typographic dropcap”1,段落为12px,行高为16px。整个文本块在我的测试中有10px的margin-top。
1Use the character "V" as dropcap followed by a "i" character. The "i-dot" should match the correct typographic top alignment. (Of couse not consistant in all devices/ font-families but a good reference point).
1使用字符“V”作为dropcap,后跟“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;
}
Hope thats helps in your stylesheet contexts.
希望这有助于您的样式表上下文。