Webmaster forum - Hyphens and IE, an observation

Author

Hyphens and IE, an observation

Dylan Parry

2007-10-25, 6:22 pm

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)

2007-10-25, 6:22 pm

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 java script:
http://www.safalra.com/web-design/j...ortable-tables/

Els

2007-10-25, 6:22 pm

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/

Neredbojias

2007-10-25, 6:22 pm

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.

Safalra (Stephen Morley)

2007-10-25, 6:22 pm

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/

Els

2007-10-25, 6:22 pm

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/

Dylan Parry

2007-10-25, 6:22 pm

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.

Blinky the Shark

2007-10-25, 6:22 pm

Els wrote:
> Safalra (Stephen Morley) wrote:
>
>
> [snip]
>
> So, how does one ever get to use a "real hyphen" then?

I'm guessing by using the one that's not on the numeric keypad. But I
didn't know there was a difference until this thread.

--
Blinky RLU 297263
Killing all posts from Google Groups
The Usenet Improvement Project - http://improve-usenet.org

Dylan Parry

2007-10-25, 6:22 pm

Els wrote:
> Dylan Parry wrote:
>
>
> 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.

rob

2007-10-25, 6:22 pm

On Thu, 25 Oct 2007 17:55:10 +0100, Dylan Parry <usenet@dylanparry.com>
wrote:

>
>action, so http://dylanparry.com/usenet/hyphen_example.htm shows what I
>
>
>End of Ramblings.

What I see:

http://img148.imageshack.us/my.php?image=hyphenuf2.gif

Safalra (Stephen Morley)

2007-10-25, 6:22 pm

On Thu, 25 Oct 2007 20:54:34 +0100, Dylan Parry wrote:
> Els wrote:
>
> 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/

Dylan Parry

2007-10-25, 6:22 pm

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.

Jukka K. Korpela

2007-10-25, 6:22 pm

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/

Animesh K

2007-10-25, 6:22 pm

Dylan Parry

2007-10-25, 6:22 pm

Jukka K. Korpela wrote:

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

Jukka K. Korpela

2007-10-26, 3:37 am

Scripsit Dylan Parry:

> Safalra (Stephen Morley) wrote:
>
>
> 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/

Nick Theodorakis

2007-10-26, 10:18 pm

On Oct 25, 6:07 pm, "Jukka K. Korpela" <jkorp...@cs.tut.fi> 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