Hyphens and IE, an observation

I've been experimenting with using various different types of dash,
hyphens and other typographical symbols that aren't present on the
keyboard. One thing I came across was an inconsistency in the way that
Internet Explorer 7 displays the hyphen character (not the hyphen-minus,
but a proper hyphen). FWIW, IE6 doesn't appear to display the character
at all.

What I noticed is that the hyphen appears to be placed higher up than it
should be, for example: "up‐to‐date" is rendered correctly in every
browser that I tested, but in IE7 the hyphens are right up at the top of
the words. It's difficult to explain without actually seeing it in
action, so http://dylanparry.com/usenet/hyphen_example.htm shows what I
mean. It happens with any font that I try, so I'm sure it's not a fonts
issue - besides, the same fonts display the character fine in other
browsers.

Can anyone confirm that this is an actual issue, and it's not just
peculiar to my particular set-up? Does the hyphen character appear at
all for anyone else? I ask that last question as it doesn't appear in
IE6 for me, but that's using a virtual machine that has different fonts
installed etc.

Then I started to wonder if there was anything that could be done, and
indeed whether it is actually worth bothering to try doing anything. I
suppose the easiest way would be to use scripting to replace the hyphens
with hyphen-minus characters if using IE. That way, at least people
using other browsers will get the correct typographical symbols.
Actually, the easiest way is of course to just not use hyphen characters
at all, but I'm being picky and want to use them anyway :)

End of Ramblings.

--
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.

Re: Hyphens and IE, an observation

On Thu, 25 Oct 2007 17:55:10 +0100, Dylan Parry wrote:
> [snip hyphen display in IE]
>
> Can anyone confirm that this is an actual issue, and it's not just
> peculiar to my particular set-up? Does the hyphen character appear at
> all for anyone else? I ask that last question as it doesn't appear in
> IE6 for me, but that's using a virtual machine that has different fonts
> installed etc.


I think the issue is the browser taking the hyphen character from a
different font due to it not being available in the desired font. On my
system, IE6 and IE7 both display the hyphen, and it looks okay in Times New
Roman, but it sticks to the same hyphen character when I change fonts. For
me Mozilla also uses a single hyphen character across a range of fonts, but
one that's short and heavy, and looks very out of place in any of the
common fonts. I suspect that your version of IE is choosing a hyphen from a
particularly ill-suited font - much like my Usenet client, which in an
attempt render your post in a single font ended up with this:


http://www.safalra.com/hotlinkable/hyphen.png


--
Safalra (Stephen Morley)

Sortable Tables In JavaScript:
http://www.safalra.com/web-design/javascript/sortable-tables /

Re: Hyphens and IE, an observation

Dylan Parry wrote:

> I've been experimenting with using various different types of dash,
> hyphens and other typographical symbols that aren't present on the
> keyboard. One thing I came across was an inconsistency in the way that
> Internet Explorer 7 displays the hyphen character (not the hyphen-minus,
> but a proper hyphen). FWIW, IE6 doesn't appear to display the character
> at all.

Which one on my keyboard is the minus and which one is the proper
hyphen?

> What I noticed is that the hyphen appears to be placed higher up than it
> should be, for example: "up‐to‐date" is rendered correctly in every

Not when I reply to this usenet post apparently :-)
By the way - your post shows here in a different font from all the
other posts, including your own. I checked the headers, and your other
posts are encoded as windows-1252, while this particular one was in
utf-8. So are my posts, but they read the same as all the other ones.
I never understand why some posts show in a different font...

> browser that I tested, but in IE7 the hyphens are right up at the top of
> the words. It's difficult to explain without actually seeing it in
> action, so http://dylanparry.com/usenet/hyphen_example.htm shows what I
> mean.

http://locusmeus.com/temp/hyphen.gif

It is higher, but not exactly 'right at the top' I think. Are you
seeing it differently?

> It happens with any font that I try, so I'm sure it's not a fonts
> issue - besides, the same fonts display the character fine in other
> browsers.
>
> Can anyone confirm that this is an actual issue, and it's not just
> peculiar to my particular set-up? Does the hyphen character appear at
> all for anyone else? I ask that last question as it doesn't appear in
> IE6 for me, but that's using a virtual machine that has different fonts
> installed etc.

Doesn't appear in IE6 for me either, but it's a stand-alone Eolas
version.
Doesn't appear in IE6 on Windows 98 either.

> Then I started to wonder if there was anything that could be done, and
> indeed whether it is actually worth bothering to try doing anything. I
> suppose the easiest way would be to use scripting to replace the hyphens
> with hyphen-minus characters if using IE.

I've never before noticed any hyphens not displaying though. Different
keyboard? How about just encoding them so they are – entities?

> That way, at least people
> using other browsers will get the correct typographical symbols.
> Actually, the easiest way is of course to just not use hyphen characters
> at all, but I'm being picky and want to use them anyway :)

I guess I'm using minus-hyphens then?
hyphen next to the 0 key on my keyboard: -
hyphen above the + on my numeric pad: -
Are they real hyphens, or minuses?

--
Els http://locusmeus.com/

Re: Hyphens and IE, an observation

Well bust mah britches and call me cheeky, on Thu, 25 Oct 2007 16:55:10 GMT
Dylan Parry scribed:

> I've been experimenting with using various different types of dash,
> hyphens and other typographical symbols that aren't present on the
> keyboard. One thing I came across was an inconsistency in the way that
> Internet Explorer 7 displays the hyphen character (not the hyphen-minus,
> but a proper hyphen). FWIW, IE6 doesn't appear to display the character
> at all.
>
> What I noticed is that the hyphen appears to be placed higher up than it
> should be, for example: "up‐to‐date" is rendered correctly in every
> browser that I tested, but in IE7 the hyphens are right up at the top of
> the words.

I get them pretty high up in Firefox, too, (with default font [serif?]).
Can't see in Opera because my background is black. Ie6, as you imply,
displays the box.

--
Neredbojias
Just a boogar in the proboscis of life.

Re: Hyphens and IE, an observation

On Thu, 25 Oct 2007 20:33:35 +0200, Els wrote:
> Which one on my keyboard is the minus and which one is the proper
> hyphen?
>
> [...]
>
> I guess I'm using minus-hyphens then?
> hyphen next to the 0 key on my keyboard: -
> hyphen above the + on my numeric pad: -
> Are they real hyphens, or minuses?


The character you get by pressing the '-' key on your keyboard is a
hyphen-minus. It's a relic from ASCII, where it was used to represent a
range of characters - hyphens, dashes, and of course the minus sign. In
Unicode these all have different code points, and there's also the 'soft
hyphen' (which indicates where a work can be broken) to complicate matters.
In HTML the character entity references –, —, −, and
­ can be used to identify some of these, but numeric entity references
or a suitable character encoding are needed for others.


--
Safalra (Stephen Morley)

Web Typography:
http://www.safalra.com/web-design/typography/

Re: Hyphens and IE, an observation

Safalra (Stephen Morley) wrote:

> The character you get by pressing the '-' key on your keyboard is a
> hyphen-minus.

[snip]

So, how does one ever get to use a "real hyphen" then?

--
Els http://locusmeus.com/

Re: Hyphens and IE, an observation

Safalra (Stephen Morley) wrote:

> I think the issue is the browser taking the hyphen character from a
> different font due to it not being available in the desired font. On my
> system, IE6 and IE7 both display the hyphen, and it looks okay in Times New
> Roman, but it sticks to the same hyphen character when I change fonts. For
> me Mozilla also uses a single hyphen character across a range of fonts, but
> one that's short and heavy, and looks very out of place in any of the
> common fonts.

That's interesting. I came to the conclusion that they were using
different hyphens in various fonts, but that was based on me having
tested a serif font and a monospace font, and seeing that the widths of
the hyphens appeared different - not the width of the actual hyphen, but
the space allocated for it. Obviously that was a stupid conclusion to
make as of course the space will be larger on a monospace font, even if
the glyph was from a substitute font!

I do find it strange how something as simple as a hyphen is not included
within common fonts. A quick test using character map shows that the
hyphen is not included in Arial, nor in Times New Roman. It is included
in Calibri and Calmbria though (the Vista "replacements" for the
former), and despite my test pages (for me at least) using Calibri, only
Firefox is using the hyphen glyph in this font.

IE7 appears to be choosing the hyphen glyph from Arial Unicode MS, which
as a larger font causes the display error I experienced.

From these experiments, and reading the replies here, it's obvious that
the hyphen character is simply not ready to be used on the Web, despite
it being such a commonly-used character, and as such I'll have to stick
to the damned hyphen-minus, the illegitimate child of ASCII :)

--
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.

Re: Hyphens and IE, an observation

Els wrote:
> Dylan Parry wrote:
>
>> I've been experimenting with using various different types of dash,
>> hyphens and other typographical symbols that aren't present on the
>> keyboard. One thing I came across was an inconsistency in the way
>> that Internet Explorer 7 displays the hyphen character (not the
>> hyphen-minus, but a proper hyphen). FWIW, IE6 doesn't appear to
>> display the character at all.
>
> Which one on my keyboard is the minus and which one is the proper
> hyphen?

None. You can't get a proper hyphen or minus sign without using
character map or holding down the alt and pressing the right number
sequence, which I can't seem to find :s

> http://locusmeus.com/temp/hyphen.gif
>
> It is higher, but not exactly 'right at the top' I think. Are you
> seeing it differently?

Yeah, looks like we're all seeing different things.

> I've never before noticed any hyphens not displaying though.
> Different keyboard? How about just encoding them so they are –
> entities?

Ah, but – isn't a hyphen, it's an EN Dash, which is used for an
entirely different set of purposes ;)

> I guess I'm using minus-hyphens then? hyphen next to the 0 key on my
> keyboard: - hyphen above the + on my numeric pad: - Are they real
> hyphens, or minuses?

Yep, the hyphen-minus is the one next to the + key. They are neither a
hyphen, nor a minus, but both and neither :) They were originally
created as a character that could be used to represent both due to the
lack of keys on a typewriter.

Clever programs like Word etc are capable of interpreting which sort of
dash or hyphen you need depending on the context, and will replace them
in the same way as they do with quotation marks.

--
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.

Re: Hyphens and IE, an observation

On Thu, 25 Oct 2007 20:54:34 +0100, Dylan Parry wrote:
> Els wrote:
>> I guess I'm using minus-hyphens then? hyphen next to the 0 key on my
>> keyboard: - hyphen above the + on my numeric pad: - Are they real
>> hyphens, or minuses?
>
> Yep, the hyphen-minus is the one next to the + key. They are neither a
> hyphen, nor a minus, but both and neither :) They were originally
> created as a character that could be used to represent both due to the
> lack of keys on a typewriter.
>
> Clever programs like Word etc are capable of interpreting which sort of
> dash or hyphen you need depending on the context, and will replace them
> in the same way as they do with quotation marks.


Unfortuantely algorithmically determining the correct character is rather
haphazard - just as such software is confused by my insistence on using an
apostrophe at the start of 'phone, it's also difficult for an algorithm to
tell that there should be an en-dash in the phrase "the letters B-Z occur
after A" but a hyphen in the phrase "the B-Z reaction demonstrates
non-equilibrium thermodynamics".


--
Safalra (Stephen Morley)

Web Typography:
http://www.safalra.com/web-design/typography/

Re: Hyphens and IE, an observation

Safalra (Stephen Morley) wrote:

> it's also difficult for an algorithm to tell that there should be an
> en-dash in the phrase "the letters B-Z occur after A" but a hyphen in
> the phrase "the B-Z reaction demonstrates non-equilibrium
> thermodynamics".

Hmm, if the "B-Z" in the second example of some sort of compound noun,
then it would be correctly written with an en-dash as the hyphen should
only be used in compounds where the meaning of the words involved are
changed by one another.

For example, "Bose-Einstein" should use an en-dash, as opposed to
"American-football player" which should use a hyphen. The problem that
faces me is that I don't know what a B-Z reaction is, so I have no idea
whether I am correct in suggesting an en-dash be used ;)

--
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.

Re: Hyphens and IE, an observation

Scripsit Dylan Parry:

> I do find it strange how something as simple as a hyphen is not
> included within common fonts.

The Unicode HYPHEN U+2010 is simple as such, but it's something rather new
in terms of character code standards, and no common keyboard layout lets you
type it directly. It has been used very little, and few people know about
it. It normally takes hours to explain the difference between it and the
"ASCII hyphen" - to an educated person (others won't get it at all).

According to the Unicode standard, it's the recommended character for
punctuation hyphen, as in "up-to-date". But this doesn't make it much more
popular, and as you have seen, it mostly fails when you try to use it on web
pages.

> A quick test using character map shows
> that the hyphen is not included in Arial, nor in Times New Roman. It
> is included in Calibri and Calmbria though

Indeed. That was interesting. Calibri and Cambria aren't that great in
character repertoire, but they do have HYPHEN U+2010. On the other hand, it
appears to have a glyph that is completely identical with the "ASCII hyphen"
(HYPHEN-MINUS, U+002D), so you don't much by using it. (As characters, they
may still have different properties in processing.)

That's permitted by standards (they don't mandate the lengths of hyphens),
but the general idea is that HYPHEN is assumed to be a traditional hyphen
character in appearance, EN DASH is assumed to be considerably longer, and
ditto for MINUS SIGN, whereas HYPHEN-MINUS is supposed to have "medium
length" since it has to do the jobs of all those characters. In practice,
that's not how it works, though.

As an exception, in Lucida Sans Unicode, HYPHEN is much shorter (and better
for use as hyphen) than HYPHEN-DASH. But that's because its HYPHEN-DASH is
far too long, actually even slightly longer than EN DASH! That's a good
reason for not using Lucida Sans Unicode except in special occasions.

> IE7 appears to be choosing the hyphen glyph from Arial Unicode MS,
> which as a larger font causes the display error I experienced.

It's not really larger or, rather, the size does not matter as such. What
matters is that it has an x-height larger than your basic font, and HYPHEN
(as well as HYPHEN-MINUS, which has identical glyph in Arial Unicode MS) is
normally placed near half of the x-height. So when it appears near letters
from another font, the odds are that it appears in too high a vertical
position.

You're seeing it in Arial Unicode MS because you have Microsoft Office
software installed; the font comes along with that (though it's not always
installed with it). People who don't have it will probably see HYPHEN in
Lucida Sans Unicode, resulting in a similar problem.

This indicates that font mixing is rather problematic. You could set you
page's font to Arial Unicode MS and have a uniform appearance where HYPHEN
looks OK - but only when that font is available, and it's really not a great
font. You might set it to Cambria or Calibri, which might be fine for people
who have it - but they're still a minority. Using Lucida Sans Unicode is
questionable for several reasons. Finally, you could use a font-family
setting with a nice list of fonts, but those fonts would be rather different
from each other, so what would you base your styling on? (Font choice tends
to affect many design choices. For example, Arial Unicode MS tends to
require a fairly large line-height, which would not be that nice to
Calibri.)

> From these experiments, and reading the replies here, it's obvious
> that the hyphen character is simply not ready to be used on the Web,

Yes, that's the practical conclusion.

> despite it being such a commonly-used character,

This depends on your definition of "character". As an element of coded
character sets, HYPHEN is rarely used.

> and as such I'll
> have to stick to the damned hyphen-minus, the illegitimate child of
> ASCII :)

Yes, it'll have to do the job of HYPHEN. But you can use EN DASH as a dash
(in punctuation, in denoting ranges, etc.) and the MINUS SIGN as a
mathematical operator. They work pretty well these days, both in text
processing and on web pages.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Re: Hyphens and IE, an observation

Dylan Parry wrote:
> I've been experimenting with using various different types of dash,
> hyphens and other typographical symbols that aren't present on the
> keyboard. One thing I came across was an inconsistency in the way that
> Internet Explorer 7 displays the hyphen character (not the hyphen-minus,
> but a proper hyphen). FWIW, IE6 doesn't appear to display the character
> at all.
>
> What I noticed is that the hyphen appears to be placed higher up than it
> should be, for example: "up‐to‐date" is rendered correctly in every
> browser that I tested, but in IE7 the hyphens are right up at the top of
> the words. It's difficult to explain without actually seeing it in
> action, so http://dylanparry.com/usenet/hyphen_example.htm shows what I
> mean. It happens with any font that I try, so I'm sure it's not a fonts
> issue - besides, the same fonts display the character fine in other
> browsers.
>

The up-to-date hyphens are higher in Thunderbird too. You may want to
check if you are using the correct characters. It could be a font family
issue too (?). May be Jukka can clarify on that.

Best,
A

Re: Hyphens and IE, an observation

Jukka K. Korpela wrote:

>> IE7 appears to be choosing the hyphen glyph from Arial Unicode MS,
>> which as a larger font causes the display error I experienced.
>
> It's not really larger or, rather, the size does not matter as such.
> What matters is that it has an x-height larger than your basic font,
> and HYPHEN (as well as HYPHEN-MINUS, which has identical glyph in
> Arial Unicode MS) is normally placed near half of the x-height. So
> when it appears near letters from another font, the odds are that it
> appears in too high a vertical position.

That's what I meant, just didn't say it quite so eloquently.

> This indicates that font mixing is rather problematic. You could set
> you page's font to Arial Unicode MS and have a uniform appearance
> where HYPHEN looks OK - but only when that font is available, and
> it's really not a great font. You might set it to Cambria or Calibri,
> which might be fine for people who have it - but they're still a
> minority. Using Lucida Sans Unicode is questionable for several
> reasons. Finally, you could use a font-family setting with a nice
> list of fonts, but those fonts would be rather different from each
> other, so what would you base your styling on? (Font choice tends to
> affect many design choices. For example, Arial Unicode MS tends to
> require a fairly large line-height, which would not be that nice to
> Calibri.)

I've actually taken to using "calibri, arial, helvetica, sans-serif" in
my CSS recently.

I like the way that Calibri (body text) and Cambria (headings) look, but
also acknowledge that not many people have those particular fonts yet,
so Arial/Helvetica and Times New Roman/Times are not bad as substitutes,
although both have slightly larger x-heights than Calibri/Cambria so the
pages do look overall a little different, but equally as readable.

I've actually taken to applying traditional typesetting techniques to my
online texts and started to write stylesheets working on a baseline with
text, line-height and margin all relative to each other. It really does
make text so much more visually appealing and easier on the eye.

>> despite it being such a commonly-used character,
>
> This depends on your definition of "character". As an element of
> coded character sets, HYPHEN is rarely used.

Indeed. I was referring to its use within the English language in
general, and more specifically on paper with a pencil (or even in
printed literature) as opposed to on the Web.

>> and as such I'll have to stick to the damned hyphen-minus, the
>> illegitimate child of ASCII :)
>
> Yes, it'll have to do the job of HYPHEN. But you can use EN DASH as a
> dash (in punctuation, in denoting ranges, etc.) and the MINUS SIGN as
> a mathematical operator. They work pretty well these days, both in
> text processing and on web pages.

That's my plan. I've been happy enough with the results of using EN
dash, EM dash and various other types of dash; it was only the hyphen
that was inconsistent.

--
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.

Re: Hyphens and IE, an observation

On 2007-10-25, Dylan Parry wrote:
[...]
> I've actually taken to applying traditional typesetting techniques to my
> online texts and started to write stylesheets working on a baseline with
> text, line-height and margin all relative to each other. It really does
> make text so much more visually appealing and easier on the eye.

So what are good relationships to use between those things?

In CSS "normal" line-height is supposed to be between 1.0 and 1.2 times
font-height (where font-height is distance from ascender to descender,
aka "em-height" I think).

But how this looks depends a lot on the font. In some fonts line spacing
looks quite crunched up at 1.0, but in others too spaced out at
1.1.

When you say margin, do you mean paragraph margin? The default
stylesheet for CSS 2.1 sets 1.12em for some reason.

Re: Hyphens and IE, an observation

Ben C wrote:
> On 2007-10-25, Dylan Parry wrote:
> [...]
>> I've actually taken to applying traditional typesetting techniques to my
>> online texts and started to write stylesheets working on a baseline with
>> text, line-height and margin all relative to each other. It really does
>> make text so much more visually appealing and easier on the eye.
>
> So what are good relationships to use between those things?

Depends entirely on the chosen fonts and the size of your baseline. It's
not something I'd really want to try and explain, so try a search for
"baseline grid". FWIW, the first few results in Google look like useful
reading on this matter.

Essentially, the line-height should be equal to baseline/font-size,
which for a baseline of 2em, and a font size of 1.5em (say for H2
elements) the line-height would be 1.33333em. The margins would then be
either 1.33333em top and bottom, or you could move the margins around as
long as the top and bottom added up to 2.66666em (1.33333*2). It's a
little more complicated than that, but that's the basics.

I'm far from being a typography expert though, so I'd read up on it
anyway ;)

> In CSS "normal" line-height is supposed to be between 1.0 and 1.2 times
> font-height (where font-height is distance from ascender to descender,
> aka "em-height" I think).
>
> But how this looks depends a lot on the font. In some fonts line spacing
> looks quite crunched up at 1.0, but in others too spaced out at
> 1.1.

Indeed, which is why it depends on your font etc.

> When you say margin, do you mean paragraph margin? The default
> stylesheet for CSS 2.1 sets 1.12em for some reason.

Yes, the top and bottom margins on block elements that usually contain
text, eg. P, UL, OL, H# etc.

I've found it helpful to use a "Reset" stylesheet that removes all
padding and margins etc from elements and causes all browsers to display
everything the same so you have a clear starting point for your own
styles. Of course, that means that paragraphs have no default margin and
STRONG/EM are by default regular text instead of bold/italicised, but it
does give you a nice blank canvas where you can predict things more easily.

--
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.

Re: Hyphens and IE, an observation

Scripsit Ben C:

> In CSS "normal" line-height is supposed to be between 1.0 and 1.2
> times font-height

CSS specifications are particularly confused and confusing in this issue.
Typical browser defaults are less than 1.2 and typically too small for
Arial, which is everyone's and his brother's choice in web authoring these
days.

> But how this looks depends a lot on the font.

Surely, but people tend to set font without thinking of line height at all.

> In some fonts line
> spacing looks quite crunched up at 1.0,

All normal fonts look very crunched that way, since 1.0 makes ascenders
touch (or even cross - font size is a tricky concept) the descenders of the
line above them.

> but in others too spaced out at 1.1.

That would be an odd font.

> When you say margin, do you mean paragraph margin? The default
> stylesheet for CSS 2.1 sets 1.12em for some reason.

The reason is that it sets line height to 1.12, to the margin corresponds to
one empty line. This reflects the typewriter tradition.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Re: Hyphens and IE, an observation

Scripsit Dylan Parry:

> Safalra (Stephen Morley) wrote:
>
>> it's also difficult for an algorithm to tell that there should be an
>> en-dash in the phrase "the letters B-Z occur after A" but a hyphen in
>> the phrase "the B-Z reaction demonstrates non-equilibrium
>> thermodynamics".
>
> Hmm, if the "B-Z" in the second example of some sort of compound noun,
> then it would be correctly written with an en-dash as the hyphen
> should only be used in compounds where the meaning of the words
> involved are changed by one another.

This depends on the human language and its rules, as well as the meaning of
the expression.

> For example, "Bose-Einstein" should use an en-dash, as opposed to
> "American-football player" which should use a hyphen.

In some forms of English, yes. There's not much to be said about this in
terms of HTML authoring. You just find out or decide which rules to follow,
and then use the appropriate characters.

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
B-Z (nonstandard but simple)
or
B-Z
with
..nobr { white-space: nowrap; }

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Re: Hyphens and IE, an observation

In article ,
Dylan Parry wrote:

> Ben C wrote:
> > On 2007-10-25, Dylan Parry wrote:
> > [...]
> >> I've actually taken to applying traditional typesetting techniques to my
> >> online texts and started to write stylesheets working on a baseline with
> >> text, line-height and margin all relative to each other. It really does
> >> make text so much more visually appealing and easier on the eye.
> >
> > So what are good relationships to use between those things?
>
> Depends entirely on the chosen fonts and the size of your baseline.

Doesn't this mean that if someone does not have the font you
design for then they don't get the benefit of the special
typesetting you are implementing? Or worse, that what is
particularly excellent in your preferred font, can look
unacceptable in some other fonts?

--
dorayme

Re: Hyphens and IE, an observation

dorayme wrote:

> Doesn't this mean that if someone does not have the font you design
> for then they don't get the benefit of the special typesetting you
> are implementing? Or worse, that what is particularly excellent in
> your preferred font, can look unacceptable in some other fonts?

Not really. Typefaces, although varied, don't tend to be so overly
different as to look terrible when working to a baseline that wasn't
originally developed with that font. If you work with EM units, because
they are relative to the typeface's own size, the only difference you'd
notice is that some typefaces would take up more space on a page than
others, but overall they would look consistent with themselves, which is
what matters.

For example, if I develop a site using the Calibri typeface and a
baseline grid of approx[1] 20px, then a user visits the site and only
has Arial, the text on the page would simply appear slightly larger than
it would have done if they had Calibri installed. This doesn't matter
though as the line-height and margins would still be relative to the
font-size, ie. not fixed units, so they would look perfectly readable.

____
[1] which you can't guarantee unless you use PX units in your
stylesheet, but you can get a close approximation based on browser
defaults. The beauty of using a baseline grid based on EMs though is
that even if you don't get the exact 20px you aimed for, the page will
still have a consistent layout due to the nature of EMs.

--
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.

Re: Hyphens and IE, an observation

In article ,
Dylan Parry wrote:

> dorayme wrote:
>
> > Doesn't this mean that if someone does not have the font you design
> > for then they don't get the benefit of the special typesetting you
> > are implementing? Or worse, that what is particularly excellent in
> > your preferred font, can look unacceptable in some other fonts?
>
> Not really. Typefaces, although varied, don't tend to be so overly
> different as to look terrible when working to a baseline that wasn't
> originally developed with that font. If you work with EM units, because
> they are relative to the typeface's own size, the only difference you'd
> notice is that some typefaces would take up more space on a page than
> others, but overall they would look consistent with themselves, which is
> what matters.
>

Perhaps when you have finished you might supply an example. My
motivation was stirred a bit by your "I've actually taken to
applying traditional typesetting techniques to my online texts
and started to write stylesheets working on a baseline with text,
line-height and margin all relative to each other. It really does
make text so much more visually appealing and easier on the eye."
caught my eye". Most authors, including me, tend to rely on the
defaults probably too much...

--
dorayme

Re: Hyphens and IE, an observation

dorayme wrote:

> 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.

Re: Hyphens and IE, an observation

In article ,
Dylan Parry wrote:

> dorayme wrote:
>
> > 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 ;)

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...

--
dorayme

Re: Hyphens and IE, an observation

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

--
C'est pas parce qu'ils sont nombreux à avoir tort qu'ils ont raison!
(Coluche)

Re: Hyphens and IE, an observation

Thomas Mlynarczyk wrote:

> 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.

Re: Hyphens and IE, an observation

On Fri, 26 Oct 2007 18:57:41 +0100, Dylan Parry wrote:
> Thomas Mlynarczyk wrote:
>
>> 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.


--
Safalra (Stephen Morley)

Web Typography:
http://www.safalra.com/web-design/typography/

Re: Hyphens and IE, an observation

Safalra (Stephen Morley) wrote:

> 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.

Re: Hyphens and IE, an observation

On Oct 25, 6:07 pm, "Jukka K. Korpela" wrote:
[...]
> 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
> B-Z (nonstandard but simple)
> or
> B-Z
> with
> .nobr { white-space: nowrap; }
>
[...]

What about marking up with B-Z, 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
(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 but the user has disabled style sheets, for
some reason.

Nick

--
Nick Theodorakis
nick_theodorakis@hotmail.com
contact form:
http://theodorakis.net/contact.html