Hyphens and IE, an observation

Discussion in 'HTML' started by Dylan Parry, Oct 25, 2007.

  1. Dylan Parry

    Dylan Parry Guest

    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.
    Dylan Parry, Oct 25, 2007
    #1
    1. Advertising

  2. 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/
    Safalra (Stephen Morley), Oct 25, 2007
    #2
    1. Advertising

  3. Dylan Parry

    Els Guest

    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/
    Els, Oct 25, 2007
    #3
  4. Dylan Parry

    Neredbojias Guest

    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.
    Neredbojias, Oct 25, 2007
    #4
  5. 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/
    Safalra (Stephen Morley), Oct 25, 2007
    #5
  6. Dylan Parry

    Els Guest

    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/
    Els, Oct 25, 2007
    #6
  7. Dylan Parry

    Dylan Parry Guest

    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.
    Dylan Parry, Oct 25, 2007
    #7
  8. Dylan Parry

    Dylan Parry Guest

    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.
    Dylan Parry, Oct 25, 2007
    #8
  9. 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/
    Safalra (Stephen Morley), Oct 25, 2007
    #9
  10. Dylan Parry

    Dylan Parry Guest

    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.
    Dylan Parry, Oct 25, 2007
    #10
  11. 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/
    Jukka K. Korpela, Oct 25, 2007
    #11
  12. Dylan Parry

    Animesh K Guest

    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
    Animesh K, Oct 25, 2007
    #12
  13. Dylan Parry

    Dylan Parry Guest

    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.
    Dylan Parry, Oct 25, 2007
    #13
  14. Dylan Parry

    Ben C Guest

    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.
    Ben C, Oct 25, 2007
    #14
  15. Dylan Parry

    Dylan Parry Guest

    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.
    Dylan Parry, Oct 25, 2007
    #15
  16. 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/
    Jukka K. Korpela, Oct 26, 2007
    #16
  17. 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
    <nobr>B-Z</nobr> (nonstandard but simple)
    or
    <span class="nobr">B-Z</nobr>
    with
    ..nobr { white-space: nowrap; }

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Oct 26, 2007
    #17
  18. Dylan Parry

    dorayme Guest

    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
    dorayme, Oct 26, 2007
    #18
  19. Dylan Parry

    Dylan Parry Guest

    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.
    Dylan Parry, Oct 26, 2007
    #19
  20. Dylan Parry

    dorayme Guest

    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
    dorayme, Oct 26, 2007
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. VisionSet

    Roedy style observation ;-/

    VisionSet, Sep 21, 2003, in forum: Java
    Replies:
    30
    Views:
    822
    Thomas G. Marshall
    Sep 30, 2003
  2. Sameer

    An Interesting Observation

    Sameer, Jan 9, 2006, in forum: Java
    Replies:
    2
    Views:
    330
    Oliver Wong
    Jan 9, 2006
  3. James Harris
    Replies:
    46
    Views:
    988
    Ronald Landheer-Cieslak
    Jul 23, 2004
  4. jc
    Replies:
    5
    Views:
    292
    Mark Rae [MVP]
    Dec 11, 2007
  5. Robin Briggs

    Writing cookies from ASP with spaces and hyphens

    Robin Briggs, Mar 6, 2005, in forum: ASP General
    Replies:
    4
    Views:
    160
    Ben Strackany
    Mar 9, 2005
Loading...

Share This Page