Hyphens and IE, an observation

[Dylan Parry]

Perhaps when you have finished you might supply an example.

I've put together a short example text (some simple Lorem Ipsum should
suffice) which can be seen at http://tinyurl.com/2mpagu - if you follow
the link at the bottom of that page you can see the same text with all
font sizes, margins and padding at their default browser settings, but
with the typefaces, small-caps for headings and the grey lines kept intact.

The first thing you might notice when viewing the CSS for the page with
a baseline grid is that the body text is set to 62.5%. Now yes, this
would be a bad thing if that was the actual size of the text as shown,
but it isn't - the value of 62.5% is purely set to aid in the
calculations of the baseline grid. The font size for various elements
are set higher to adjust for this, for example P elements have their
size as 1.4em, which is 87% of the browser default size, or 14px high.
Of course, if you have your browser set to display fonts larger than the
default, the styles will scale up and you'll have P text larger than
14px high, but the baseline grid will also scale and still look nice.

If I was using serif typefaces for the body text, then I would probably
have set the P text to 1.6em as this would be easier to read. It's all a
matter of choice, and I may have not made the correct one

--
Dylan Parry
http://electricfreedom.org | http://webpageworkshop.co.uk

The opinions stated above are not necessarily representative of
those of my cats. All opinions expressed are entirely your own.

 

[dorayme]

I've put together a short example text (some simple Lorem Ipsum should
suffice) which can be seen at http://tinyurl.com/2mpagu - if you follow
the link at the bottom of that page you can see the same text with all
font sizes, margins and padding at their default browser settings, but
with the typefaces, small-caps for headings and the grey lines kept intact.

The first thing you might notice when viewing the CSS for the page with
a baseline grid is that the body text is set to 62.5%. Now yes, this
would be a bad thing if that was the actual size of the text as shown,
but it isn't - the value of 62.5% is purely set to aid in the
calculations of the baseline grid. The font size for various elements
are set higher to adjust for this, for example P elements have their
size as 1.4em, which is 87% of the browser default size, or 14px high.
Of course, if you have your browser set to display fonts larger than the
default, the styles will scale up and you'll have P text larger than
14px high, but the baseline grid will also scale and still look nice.

If I was using serif typefaces for the body text, then I would probably
have set the P text to 1.6em as this would be easier to read. It's all a
matter of choice, and I may have not made the correct one

Thanks for this. I can see immediately that your 'worked' example
is outstandingly better looking. That means I study it tomorrow
more closely - getting tired now...

 

[Thomas Mlynarczyk]

Also sprach Dylan Parry:

I've put together a short example text (some simple Lorem Ipsum should
suffice) which can be seen at http://tinyurl.com/2mpagu - if you
follow the link at the bottom of that page you can see the same text
with all font sizes, margins and padding at their default browser
settings, but with the typefaces, small-caps for headings and the
grey lines kept intact.

Indeed, the baseline grid version looks much better. There is, however, one
little detail that disturbs me: The space between a heading (like "Tempor
justo") and the following paragraph is smaller than the space between two
paragraphs. This gives the optical impression of the heading referring only
to the first paragraph below it, instead of to all following paragraphs
until the next (same-level-) heading. Isn't vertical space a means of
optically indicating what portions of text belong to which heading? How
about making the space between paragraphs as large as the space between the
heading and the first paragraph? Maybe indenting the first line of each
paragraph?

Greetings,
Thomas

 

[Dylan Parry]

Indeed, the baseline grid version looks much better. There is, however, one
little detail that disturbs me: The space between a heading (like "Tempor
justo") and the following paragraph is smaller than the space between two
paragraphs. This gives the optical impression of the heading referring only
to the first paragraph below it, instead of to all following paragraphs
until the next (same-level-) heading. Isn't vertical space a means of
optically indicating what portions of text belong to which heading? How
about making the space between paragraphs as large as the space between the
heading and the first paragraph? Maybe indenting the first line of each
paragraph?

The solution is merely to change the top and bottom margins for H3
elements without breaking the baseline grid. It's an easy enough process
and just shows that I can make oversights I'd actually forgotten to
set a bottom margin for the H3 elements, but included a padding that
shouldn't have been there. I've now corrected this in the demo.

--
Dylan Parry
http://electricfreedom.org | http://webpageworkshop.co.uk

The opinions stated above are not necessarily representative of
those of my cats. All opinions expressed are entirely your own.

 

[Safalra (Stephen Morley)]

Indeed, the baseline grid version looks much better. There is, however, one
little detail that disturbs me: The space between a heading (like "Tempor
justo") and the following paragraph is smaller than the space between two
paragraphs. This gives the optical impression of the heading referring only
to the first paragraph below it, instead of to all following paragraphs
until the next (same-level-) heading.
[...]

The solution is merely to change the top and bottom margins for H3
elements without breaking the baseline grid. It's an easy enough process
and just shows that I can make oversights I'd actually forgotten to
set a bottom margin for the H3 elements, but included a padding that
shouldn't have been there. I've now corrected this in the demo.

Implementing a baseline grid can be more work than it first appears (I was
surprised to see '10 minutes' as the estimated time in the .net magazine
article which I presume was Dylan's inspiration). Lists are one example of
something that can be tricky, especially when they can be nested. I use the
following rules on my own site:


dl{
margin:0 2em 1.5em;
}

ol{
margin:0 2em 1.5em 3em;
padding:0;
}

ul{
margin:0 2em 1.5em;
padding:0;
}

ol ol,
ol ul,
ul ol,
ul ul{
margin-right:0;
margin-bottom:0;
}

dd{
margin-left:2em;
}

dd,
dt,
li{
line-height:1.5em;
}


The 2ems occur in horizontal units because once you take into acocunt the
1.5em line-height, the actual vertical gap between elements is roughly 2em.

 

[Dylan Parry]

Implementing a baseline grid can be more work than it first appears
(I was surprised to see '10 minutes' as the estimated time in the
.net magazine article which I presume was Dylan's inspiration).

Originally, yes it was Ah, just having checked the offending article,
it's the one I emailed you about, heh.

I don't pay much attention to the time estimates in their "tutorials"
though as they are generally way out! I'm still tweaking my CSS for a
baseline I started implementing two or three weeks ago. Just that one
article spurred me on to read up on typography and various other issues
that I'd never paid much attention to before, so it was a success in
that way.

Lists are one example of something that can be tricky, especially
when they can be nested. I use the following rules on my own site:

I've not come across this problem, but I don' have any nested lists on
the site I am working on - yet.

dl{ margin:0 2em 1.5em; }

ol{ margin:0 2em 1.5em 3em; padding:0; }

ul{ margin:0 2em 1.5em; padding:0; }

ol ol, ol ul, ul ol, ul ul{ margin-right:0; margin-bottom:0; }

dd{ margin-left:2em; }

dd, dt, li{ line-height:1.5em; }


The 2ems occur in horizontal units because once you take into acocunt
the 1.5em line-height, the actual vertical gap between elements is
roughly 2em.

Yes, I can see why that would cause issues.

--
Dylan Parry
http://electricfreedom.org | http://webpageworkshop.co.uk

The opinions stated above are not necessarily representative of
those of my cats. All opinions expressed are entirely your own.

 

[Nick Theodorakis]

Oh well, there's one point worth mentioning I guess. Browsers such as IE
treat any hyphen as allowing a line break after it, so "B-Z" might be broken
into "B-" at the end of a line and "Z" at the start of the next line. But
the same may happen for an expression using the en dash, and you generally
need to use markup or CSS to avoid these problems, such as
<nobr>B-Z</nobr> (nonstandard but simple)
or
<span class="nobr">B-Z</nobr>
with
.nobr { white-space: nowrap; }

[...]

What about marking up with <nobr>B-Z</nobr>, and then still including
in the style sheet:

nobr { white-space: nowrap; }

Or would that be too silly?

I can imagine a situation in which a browser might not understand
<nobr> (although I don't know any that don't -- today) but might still
apply styling to any element even if doesn't understand it (as do
Firefox and Opera, at least). And it would still work if the browser
does understand <nobr> but the user has disabled style sheets, for
some reason.

Nick