how can I show spaces as spaces, part 2

Discussion in 'HTML' started by Tomasz Chmielewski, Sep 9, 2009.

  1. So, I thought that by adding "white-space: pre" I will force the
    browsers to display spaces as they appear in HTML document.

    However, adding it changes the way the "line-height" is displayed (free
    space between the rows of text) - now I had really lots of free space
    between any two lines of text.

    So let's add "line-height: 7pt;" - this way, everything looks like it
    should. At least in Firefox.

    And IE8.
    But not in IE8 in "compatibility mode" - with that mode enabled, lines
    of text are printed on each other in IE8 (I didn't check any other IE
    versions so far).

    So it's not that easy with these browsers ;)


    Is there something else than "line-height: " which would be understood
    in the same way by Firefox, IE8 (with and without compatibility mode)
    and perhaps other browsers?


    --
    Tomasz Chmielewski
    http://wpkg.org
    Tomasz Chmielewski, Sep 9, 2009
    #1
    1. Advertising

  2. Tomasz Chmielewski wrote:

    > So, I thought that by adding "white-space: pre" I will force


    You thought wrongly. You have missed the usual CSS Caveats. You cannot force
    anything with CSS,

    > However, adding it changes the way the "line-height" is displayed


    You may think so, and we have no way of finding out what really happened,
    since you did not provide a URL.

    > So let's add "line-height: 7pt;"


    Sounds very clueless.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Sep 9, 2009
    #2
    1. Advertising

  3. Jukka K. Korpela wrote:
    > Tomasz Chmielewski wrote:
    >
    >> So, I thought that by adding "white-space: pre" I will force

    >
    > You thought wrongly. You have missed the usual CSS Caveats. You cannot
    > force anything with CSS,
    >
    >> However, adding it changes the way the "line-height" is displayed

    >
    > You may think so, and we have no way of finding out what really
    > happened, since you did not provide a URL.
    >
    >> So let's add "line-height: 7pt;"

    >
    > Sounds very clueless.


    Basically, "white-space: pre" will force all whitespaces to show up
    rendered.

    The side effect here is that in addition to <br>, it "adds one more
    <br>", because there is already an end-of-line character.
    So, instead of one end-of-line, two end-of-lines are rendered with
    "white-space: pre" and this code:

    some text<br>
    some more text<br>


    The clueless "line-height: 7pt;" will remove this "end-of-line",
    however, in a unique way in older IE.

    Adding this instead seems to work better (at least on a limited set of
    browsers I tried):


    br {
    line-height: 0px;
    }



    --
    Tomasz Chmielewski
    http://wpkg.org
    Tomasz Chmielewski, Sep 9, 2009
    #3
  4. Ben C wrote:

    >> The clueless "line-height: 7pt;" will remove this "end-of-line",
    >> however, in a unique way in older IE.
    >>
    >> Adding this instead seems to work better (at least on a limited set of
    >> browsers I tried):
    >>
    >>
    >> br {
    >> line-height: 0px;
    >> }

    >
    > Why not just get rid of the <br>s? Or just use br { display: none } if
    > you must have them in the markup for some reason.


    I can't remove <br>s, because the HTML is generated by an application
    (written in C) - changing it would be too much effort.

    And br in CSS is ignored by Safari:

    br {
    ...
    }

    :)


    So one day, I'll have to sit and see what's wrong with that application...


    > But you have discovered rather an interesting corner case. I'm not sure
    > whether line-height on a line-break should have any effect.



    --
    Tomasz Chmielewski
    http://wpkg.org
    Tomasz Chmielewski, Sep 9, 2009
    #4
  5. Tomasz Chmielewski

    dorayme Guest

    In article <h897ml$hsv$>,
    Tomasz Chmielewski <> wrote:

    > Ben C wrote:
    >
    > >> The clueless "line-height: 7pt;" will remove this "end-of-line",
    > >> however, in a unique way in older IE.
    > >>
    > >> Adding this instead seems to work better (at least on a limited set of
    > >> browsers I tried):
    > >>
    > >>
    > >> br {
    > >> line-height: 0px;
    > >> }

    > >
    > > Why not just get rid of the <br>s? Or just use br { display: none } if
    > > you must have them in the markup for some reason.

    >
    > I can't remove <br>s, because the HTML is generated by an application
    > (written in C) - changing it would be too much effort.
    >
    > And br in CSS is ignored by Safari:
    >
    > br {
    > ...
    > }
    >
    > :)
    >


    Not in my Safari.

    I wish you had not ignored Korpela's suggestion for you to supply a URL.
    It's not so hard to make a test case, you can modify this template if
    you wish:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>BR</title>
    <style type="text/css">
    br {display: none;}
    </style>
    </head>
    <body>
    <p>Hello<br>World!</p>
    </body>
    </html>


    > So one day, I'll have to sit and see what's wrong with that application...


    --
    dorayme
    dorayme, Sep 9, 2009
    #5
  6. dorayme wrote:
    >
    > Not in my Safari.
    >
    > I wish you had not ignored Korpela's suggestion for you to supply a URL.
    > It's not so hard to make a test case, you can modify this template if
    > you wish:


    Is it Safari 4 with webkit?

    The website is in internal LAN right now, but I'll try t upload a test
    case tomorrow.


    --
    Tomasz Chmielewski
    http://wpkg.org
    Tomasz Chmielewski, Sep 9, 2009
    #6
  7. Tomasz Chmielewski

    dorayme Guest

    In article <h899j0$j9j$>,
    Tomasz Chmielewski <> wrote:

    > dorayme wrote:
    > >
    > > Not in my Safari.
    > >
    > > I wish you had not ignored Korpela's suggestion for you to supply a URL.
    > > It's not so hard to make a test case, you can modify this template if
    > > you wish:

    >
    > Is it Safari 4 with webkit?
    >
    > The website is in internal LAN right now, but I'll try t upload a test
    > case tomorrow.


    My Safari is 3.1.2 on a Mac (Tiger)

    --
    dorayme
    dorayme, Sep 9, 2009
    #7
  8. Tomasz Chmielewski

    Eric Bednarz Guest

    Tomasz Chmielewski <> writes:

    > Jukka K. Korpela wrote:


    >>> So, I thought that by adding "white-space: pre" I will force

    >>
    >> You thought wrongly. You have missed the usual CSS Caveats. You
    >> cannot force anything with CSS,


    > Basically, "white-space: pre" will force all whitespaces to show up
    > rendered.


    Basically, all communication will fail.
    Eric Bednarz, Sep 10, 2009
    #8
  9. dorayme wrote:
    > In article <h899j0$j9j$>,
    > Tomasz Chmielewski <> wrote:
    >
    >> dorayme wrote:
    >>> Not in my Safari.
    >>>
    >>> I wish you had not ignored Korpela's suggestion for you to supply a URL.
    >>> It's not so hard to make a test case, you can modify this template if
    >>> you wish:

    >> Is it Safari 4 with webkit?
    >>
    >> The website is in internal LAN right now, but I'll try t upload a test
    >> case tomorrow.

    >
    > My Safari is 3.1.2 on a Mac (Tiger)


    Indeed - Safari seems to understand:

    br {display: none;}

    But it doesn't seem to understand:

    br {line-height: 0px;}


    Using "br {display: none;}" has a side effect: <br> is not rendered at all.
    So this code:

    some<br>
    text

    Will be rendered as:

    some text

    Which is not what I want to achieve.

    I want to achieve

    some
    text

    without any excessive spacing between the texts.



    This comes to one thing: how, in CSS, do I set setting for <br> elements
    which are placed within "<div class="..." _only_, like here:


    <br> - I want to render it normally
    <div class="messageBody">
    .....
    <br> - I don't want to render this br (apply "display: none;")
    .....
    </div>


    Sorry if it's a lame question.


    The test case is here:

    http://www1.wpkg.org/css/

    You will have to click on the *.html page to view it; otherwise, you can
    go to *.files directory to see the css.


    --
    Tomasz Chmielewski
    http://wpkg.org
    Tomasz Chmielewski, Sep 10, 2009
    #9
  10. Tomasz Chmielewski wrote:

    > This comes to one thing: how, in CSS, do I set setting for <br> elements
    > which are placed within "<div class="..." _only_, like here:
    >
    >
    > <br> - I want to render it normally
    > <div class="messageBody">
    > ....
    > <br> - I don't want to render this br (apply "display: none;")
    > ....
    > </div>
    >
    >
    > Sorry if it's a lame question.


    My own answer to my lame question is:

    div.messageBody br {
    display: none;
    }


    --
    Tomasz Chmielewski
    http://wpkg.org
    Tomasz Chmielewski, Sep 10, 2009
    #10
  11. Ben C wrote:
    > On 2009-09-10, Tomasz Chmielewski <> wrote:
    >> Tomasz Chmielewski wrote:
    >>
    >>> This comes to one thing: how, in CSS, do I set setting for <br> elements
    >>> which are placed within "<div class="..." _only_, like here:
    >>>
    >>>
    >>> <br> - I want to render it normally
    >>> <div class="messageBody">
    >>> ....
    >>> <br> - I don't want to render this br (apply "display: none;")
    >>> ....
    >>> </div>
    >>>
    >>>
    >>> Sorry if it's a lame question.

    >> My own answer to my lame question is:
    >>
    >> div.messageBody br {
    >> display: none;
    >> }

    >
    > You got it! Does it work then?


    It does work in IE6/7/8 And Firefox 3.5; doesn't work in IE5.5 - but
    it's too old to care for me / for this specific site.

    I didn't try other browsers yet.


    --
    Tomasz Chmielewski
    http://wpkg.org
    Tomasz Chmielewski, Sep 10, 2009
    #11
  12. Ben C wrote:
    > On 2009-09-10, Tomasz Chmielewski <> wrote:
    >> dorayme wrote:
    >>> In article <h899j0$j9j$>,
    >>> Tomasz Chmielewski <> wrote:
    >>>
    >>>> dorayme wrote:
    >>>>> Not in my Safari.
    >>>>>
    >>>>> I wish you had not ignored Korpela's suggestion for you to supply a URL.
    >>>>> It's not so hard to make a test case, you can modify this template if
    >>>>> you wish:
    >>>> Is it Safari 4 with webkit?
    >>>>
    >>>> The website is in internal LAN right now, but I'll try t upload a test
    >>>> case tomorrow.
    >>> My Safari is 3.1.2 on a Mac (Tiger)

    >> Indeed - Safari seems to understand:
    >>
    >> br {display: none;}
    >>
    >> But it doesn't seem to understand:
    >>
    >> br {line-height: 0px;}

    >
    > Not surprising really-- it is a weird corner case and it's not clear
    > what it's supposed to do.
    >
    >> Using "br {display: none;}" has a side effect: <br> is not rendered at all.
    >> So this code:
    >>
    >> some<br>
    >> text
    >>
    >> Will be rendered as:
    >>
    >> some text
    >>
    >> Which is not what I want to achieve.

    >
    > But I thought you were using white-space: pre?


    I meant:

    some<br>text

    Will be rendered as:

    some text


    It's just that <br> should be treated differently only within
    "div.messageBody".


    --
    Tomasz Chmielewski
    http://wpkg.org
    Tomasz Chmielewski, Sep 10, 2009
    #12
  13. Tomasz Chmielewski

    dorayme Guest

    In article <h8ahgc$gd5$>,
    Tomasz Chmielewski <> wrote:

    > dorayme wrote:
    > > In article <h899j0$j9j$>,
    > > Tomasz Chmielewski <> wrote:
    > >
    > >> dorayme wrote:
    > >>> Not in my Safari.


    > Indeed - Safari seems to understand:
    >
    > br {display: none;}
    >
    > But it doesn't seem to understand:
    >
    > br {line-height: 0px;}
    >


    To be perfectly frank, neither do I. The BR element does the job of
    breaking a line so what follows goes onto the next line. It does not,
    according to my simple view, have a line height in the way that oranges
    do not have backfires, they are not the sort of thing that do,
    (combustion engines do this).

    The paragraph element or the span in which this breaking event happened
    would determine the line height of the lines. But a break is neither the
    line before nor the line after nor the gap between lines. At least that
    would seem to be the intuitive view of things from the point of view of
    a visitor to this planet.

    <http://dorayme.netweaver.com.au/line-height_breaks_spans.html>

    >
    > Using "br {display: none;}" has a side effect: <br> is not rendered at all.
    > So this code:
    >
    > some<br>
    > text
    >
    > Will be rendered as:
    >
    > some text
    >


    Again, not on my Safari (or iCab or FF)

    <p>Hello<br>World!</p>

    gives, as one would expect, HelloWorld. Whereas,

    <p>Hello<br>
    World!</p>

    gives Hello World, the typing Return delivering the space that the
    virtual removal of <br> would require.

    --
    dorayme
    dorayme, Sep 10, 2009
    #13
  14. On Sep 10, 11:40 am, Tomasz Chmielewski
    > My own answer to my lame question is:
    >
    > div.messageBody br {
    >    display: none;
    >
    > }


    http://www1.wpkg.org/css/20090901.115944.d5788b57.en.html
    This file looks nice in the browser -
    the spaces make the text centered.

    But if you use a simple html [1] on my desktop it does not work (in
    Firefox)!!

    [1]

    div.messageBody {
    padding: 4px;
    margin-top: 1em;
    white-space: pre;
    }

    div.messageBody br {
    display: none;
    }

    </style>
    </head>

    <body>
    <div class="messageBody"> Start text here
    <br> Some text centered with spaces
    </div>



    If I do it like [2] - it works.

    [2]

    <div class="messageBody"><pre> Start text
    here
    <br> Some text centered with spaces
    </pre></div>


    I don't understand the difference between

    file:///home/user/folder/20090901.115944.d5788b57.en.html
    and
    http://www1.wpkg.org/css/20090901.115944.d5788b57.en.html

    along with

    > div.messageBody br {
    > display: none;
    Jan C. Faerber, Sep 10, 2009
    #14
  15. On 10 Sep., 17:24, "Jan C. Faerber" <> wrote:

    > I don't understand the difference between
    >
    > file:///home/user/folder/20090901.115944.d5788b57.en.html
    > andhttp://www1.wpkg.org/css/20090901.115944.d5788b57.en.html
    >
    > along with
    >
    > > div.messageBody br {
    > > display: none;


    I try to answer my question:

    It depends on the whitespaces I created with my editor (after saving
    the file).
    http://www.w3.org/TR/html401/struct/text.html#h-9.1

    I will take me some more work on this topic (using different editors,
    etc.)
    to make sure for sure.
    Jan C. Faerber, Sep 10, 2009
    #15
    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. John B. Matthews
    Replies:
    4
    Views:
    657
    John B. Matthews
    Sep 12, 2008
  2. Roedy Green
    Replies:
    3
    Views:
    613
  3. Tomasz Chmielewski

    [CSS] how can I show spaces as spaces?

    Tomasz Chmielewski, Sep 5, 2009, in forum: HTML
    Replies:
    21
    Views:
    1,576
    Jan C. Faerber
    Sep 10, 2009
  4. johkar
    Replies:
    2
    Views:
    2,852
    Mayeul
    Dec 10, 2009
  5. Jack
    Replies:
    8
    Views:
    265
Loading...

Share This Page