Hyphens and IE, an observation

[Dylan Parry]

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.

 

[Safalra (Stephen Morley)]

[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

 

[Els]

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?

 

[Neredbojias]

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.

 

[Safalra (Stephen Morley)]

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.

 

[Els]

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?

 

[Dylan Parry]

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.

 

[Dylan Parry]

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.

 

[Safalra (Stephen Morley)]

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

 

[Dylan Parry]

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.

 

[Jukka K. Korpela]

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.

 

[Animesh K]

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

 

[Dylan Parry]

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.

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.

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.

 

[Ben C]

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.

 

[Dylan Parry]

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.

 

[Jukka K. Korpela]

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]

Scripsit Dylan Parry:

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

 

[dorayme]

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?

 

[Dylan Parry]

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.

 

[dorayme]

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