2014-07-25 6:50, Felix Miata wrote:
OTOH, the em unit at the document root, where it's equal to 1rem, is
also equal to the user's definition of optimal text size, as reflected
by the browser's default size setting.
The downside of the rem is lack of support in some old browsers. We need
to weigh this against the possible convenience of avoiding some
multiplications, which may be needed when using the em unit, if nested
elements have different font sizes.
Instead of saying to yourself "this is how wide I want, so
that I can fit this many words or letters on a line" or "one word's
worth of whitespace", then figuring out how many px it takes to get that
width, you can instead use an em/rem to get however many you want
(almost) directly (since in width you get about 2 characters' width out
of one em).
Typographers traditionally use the em concept in spacing, though they
also use points and other physical measures. The point is that even
though print typography sets texts in fixed font sizes, the em unit is
still found useful, since it relates to relative spacing rather than
some coincidental value in points.
But I'm afraid the correspondence 1 em = 2 characters is too coarse. The
width of a character depends on the font and on the character, and for
typical texts in Latin letters in typical fonts, the "average" width of
a character (a very vague concept) tends to be 0.4em or less rather than
0.5em.
If you want paragraphs to be 60 characters of optimal size
wide, then it can be as simple as 60 / 2 == 30em!
I'm afraid that's too simple. Setting width to 30em tends to make it
considerably larger than 60 characters. I would rather suggest
width: 25em;
width: 60ch;
The latter sets the width using the ch unit, which means the advance
width of the digit zero '0'. I practice, it is the best approximation to
the vague concept "average width of a character" (for texts dominantly
in mixed-case Latin letters) that we have. Due to lack of support in
older browsers, the setting is best preceded by a "fallback" setting
that uses the em unit.
If you want a code
block to be 12 lines tall, it could be as simple as 'code {height: 12em}'!
There are two issues with that. First, the <code> element is an inline
element by default, so that the height property does not apply to it. If
you use more logical and more practical markup for a code block, such as
<p class=codeblock><code>...</code></p>, you would set height on the
outer, block-level container.
Second, setting height: 12em produces a 12 lines tall block only when
text is set solid, i.e. line-height: 1, which is not the default and in
most cases not a suitable setting. Normally, it is better to explicitly
set line-height (to avoid consequences of varying browser defaults) and
make the height an integer multiple of that value. E.g.,
.codeblock { line-height: 1.2; height: 14.4em }
where 14.4 comes from 12 × 1.2.
Yucca
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
