CSS排版 - 为什么基线网格完全关闭？

今天我读了关于CSS排版和如何建立一个简单的基线网格的文章。我认为这样做可能很有趣，所以我设置了一切，但显然它看起来并不像预期的那样。CSS排版 - 为什么基线网格完全关闭？

这里是全屏小提琴：http://jsfiddle.net/j5Tav/embedded/result/
，及代码：http://jsfiddle.net/j5Tav/

形象化基线我用Baseliner作为一个书签。它使用JavaScript显示一个基线。

正如你可以从我的SCSS代码中看到的，我确定的基准为14px的的字体大小21px：

/* Reset */ 
* { margin: 0; padding: 0; } 

/* Variables */ 
$bodyFontSize: 14px; 
$baseline: 21px; /* 1.5 for 14px */ 

body { 
    font-size: $bodyFontSize; 
    line-height: $baseline; 
} 

article { 
    margin: 0 auto; 
    width: 65%; 
} 

h1, 
h2, 
p { 
    margin-bottom: $baseline; 
} 

h1 { 
    font-size: $bodyFontSize * 2; 
    line-height: $baseline * 2; 
} 

h2 { 
    font-size: $bodyFontSize * 1.8; 
    line-height: $baseline * 1.8; 
}

不过，当您使用底线上全屏小提琴和输入21到书签，基线完全关闭。为什么？我计算了什么错误？

来源

2013-01-22 Sven

听起来就像你遇到舍入不一致（14px * 1.8 = 19.6px）。您是否有特定的原因选择在每个线条高度上指定单位？（请参阅：http：//meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/和https://developer.mozilla.org/en-US/docs/CSS/line-height） – cimmanon

@cimmanon \t 不，没有具体原因。通常我会这样做，就像你的链接建议 - 没有单位。但有一个变量像$ baseline：21;对我来说似乎很陌生。通常我使用REM与px后备文本大小，但不知何故jsfiddle无法处理。你有一个想法如何避免这些问题？我仍然困难地围绕着基线概念 - 目前我正在以一个div高度的rem值结束。 – Sven

它似乎喜欢你试图使用一个单一的变量，当它更合适的有2：'$ multiplier：1.5'（对于行高）和'$ baseline：$ font-size * $ line-height '（用于填充等）。 – cimmanon

看看这篇文章的“丑陋”部分：

http://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/

总之，采用相同的行高到所有元素将不能保证这些元素中的文本会与您想到的基线网格对齐。这是因为在CSS中，文本被设置为行高值的垂直中心。

例如，如果您有一个带6像素文本的段落，另一个带有24像素文本的段落并且它们都具有相同的行高度值（例如30像素），则这些段落的文本将不会对齐到相同的基线。

为了实现CSS统一的基线网格，你必须垂直偏移具有不同的字体大小每个文本元素。您可以通过在每个元素的底部和顶部添加填充来实现此目的，其中文本不会与您选择的线条高度对齐。由约翰·凯斯像底线的工具可以了解是有益的，其中的“真”基线是：

http://keyes.ie/things/baseliner/

你要确保顶部和底部填充了添加到您的行高值;例如，如果你有添加的H1元件的顶部填充的5个像素，使得其以10个像素的期望的基线网格对齐，则必须为5个像素添加到底部填充，以便使H1的总高度元素（包括填充）等于10个像素的倍数（假设它的行高已被设置为多个10像素，例如10像素，20像素等）。您也可以为此使用利润率，但由于利润率下降，这可能会变得麻烦。此外，您希望避免使行高小于字体大小，并且希望避免在一个元素中组合两种不同的字体大小，因为这也可能会导致基线网格脱离。正如引用的文章指出的那样，创建一个真正的CSS基线网格相当混乱，至少如果你手动完成。

来源

2013-07-15 22:22:49 Gerry

手动设置垂直节奏是一种痛苦。

您已经标记了你的问题与scss，那么为什么不使用它的迷死？看看Compass的垂直节奏！

来源

2013-07-16 10:41:02

指南针似乎现在放弃了 - 最近1.5年没有更新。算法也不能真正为不同大小的字体设置正确的基线距离。这是一个更好的算法：https：//gist.github.com/razwan/10662500 –

CSS排版 - 为什么基线网格完全关闭？

回答

相关问题