How to render a heading as two lines?

Discussion in 'HTML' started by Greg N., Mar 22, 2006.

  1. Greg N.

    Greg N. Guest

    Suppose you need a heading <h1>Huddersfield Canal Society</h1> to be
    rendered as two lines. The result you want to see is:

    Huddersfield
    Canal Society

    It can be fudged by marking it up as

    <h1>Huddersfield<br>Canal Society</h1>

    or

    <h1>Huddersfield</h1>
    <h1>Canal Society</h1>

    But what would you suggest, that complies with HTML 4.01 strict, and is
    politically correct with respect to style/content separation?

    --
    Gregor mit dem Motorrad auf Reisen:
    http://hothaus.de/greg-tour/
     
    Greg N., Mar 22, 2006
    #1
    1. Advertising

  2. Greg N.

    Mark Parnell Guest

    Deciding to do something for the good of humanity, "Greg N."
    <> declared in alt.html:

    > Huddersfield
    > Canal Society
    >
    > It can be fudged by marking it up as
    >
    > <h1>Huddersfield<br>Canal Society</h1>


    Why is that a fudge? You want a line break, so you put one in.

    > <h1>Huddersfield</h1>
    > <h1>Canal Society</h1>


    Doesn't make sense. That's 2 headings - one says "Huddersfield" and the
    other "Canal Society".

    --
    Mark Parnell

    Now implementing http://blinkynet.net/comp/uip5.html
     
    Mark Parnell, Mar 22, 2006
    #2
    1. Advertising

  3. Greg N. wrote:
    > Suppose you need a heading <h1>Huddersfield Canal Society</h1> to be
    > rendered as two lines. The result you want to see is:
    >
    > Huddersfield
    > Canal Society
    >
    > It can be fudged by marking it up as
    >
    > <h1>Huddersfield<br>Canal Society</h1>
    >


    Some people don't like <br>, but I don't see anything so wrong about
    this example.

    > or
    >
    > <h1>Huddersfield</h1>
    > <h1>Canal Society</h1>
    >


    Yucky poo.

    > But what would you suggest, that complies with HTML 4.01 strict, and is
    > politically correct with respect to style/content separation?
    >


    How about:

    <h1>Huddersfield <span>Canal Society</span></h1>

    and in your css file:

    h1 span
    {
    display: block;
    }

    (Substitute another element for <span> if one is more appropriate.)


    --
    Nick Theodorakis

    contact form:
    http://theodorakis.net/contact.html
     
    Nick Theodorakis, Mar 22, 2006
    #3
  4. Greg N. wrote:

    > Suppose you need a heading <h1>Huddersfield Canal Society</h1> to be
    > rendered as two lines. The result you want to see is:
    >
    > Huddersfield
    > Canal Society
    >
    > It can be fudged by marking it up as
    >
    > <h1>Huddersfield<br>Canal Society</h1>


    Check.

    > or
    >
    > <h1>Huddersfield</h1>
    > <h1>Canal Society</h1>


    That's semantically wrong, because now you have two headers.


    --
    Blinky RLU 297263
    Killing all posts from Google Groups
    The Usenet Improvement Project: http://blinkynet.net/comp/uip5.html
    Coming Soon: Filtering rules specific to various real news clients
     
    Blinky the Shark, Mar 22, 2006
    #4
  5. Greg N.

    dorayme Guest

    In article <1notl74t9u3xq$>,
    Mark Parnell <> wrote:

    > Deciding to do something for the good of humanity, "Greg N."
    > <> declared in alt.html:
    >
    > > Huddersfield
    > > Canal Society
    > >
    > > It can be fudged by marking it up as
    > >
    > > <h1>Huddersfield<br>Canal Society</h1>

    >
    > Why is that a fudge? You want a line break, so you put one in.
    >


    Of course, one can do anything one likes! But OP surely means to
    be drawing attention here to the ideal of separating style from
    content and <br> is being used for presentational purposes.
    Perhaps you don't like the word "fudge" to indicate this. But it
    seems reasonable to me, given a certain context - ahem... lets
    say, the strict mood around here lately! This is a sensitive
    matter Mark, tread carefully. Spartanicus has greatly insulted a
    bikie and when this happens, the world goes still...

    > > <h1>Huddersfield</h1>
    > > <h1>Canal Society</h1>

    >
    > Doesn't make sense. That's 2 headings - one says "Huddersfield" and the
    > other "Canal Society".


    But on this, you are right.

    --
    dorayme
     
    dorayme, Mar 22, 2006
    #5
  6. Greg N. wrote:
    > Suppose you need a heading <h1>Huddersfield Canal Society</h1> to be
    > rendered as two lines. The result you want to see is:
    >
    > Huddersfield
    > Canal Society
    >
    > It can be fudged by marking it up as
    >
    > <h1>Huddersfield<br>Canal Society</h1>
    >
    > or
    >
    > <h1>Huddersfield</h1>
    > <h1>Canal Society</h1>
    >
    > But what would you suggest, that complies with HTML 4.01 strict, and is
    > politically correct with respect to style/content separation?
    >

    Since this refers back to the guy that with the heading in his banner

    #banner { ... }
    #banner IMG { vertical-align: middle; }
    #banner H1 { display: inline; }
    #banner #canal { float: right; }

    <div id="banner">
    <img id="canal" src="canal.jpg" alt="canal">
    <img src="logoGfx.gif" alt="logo">
    <h1>Huddersfield Canal Society</h1>
    </div>

    Would that not do what he wishes? If the H1 in the banner was inline it
    it would wrap when compressed.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 22, 2006
    #6
  7. Greg N.

    Jim Moe Guest

    Greg N. wrote:
    > Suppose you need a heading <h1>Huddersfield Canal Society</h1> to be
    > rendered as two lines. The result you want to see is:
    >
    > Huddersfield
    > Canal Society
    >
    > It can be fudged by marking it up as
    > <h1>Huddersfield<br>Canal Society</h1>
    >

    Not a "fudge" at all. <br>s are commonly abused to create
    inter-paragraph space where <p> or padding/margin styles are more
    appropriate. In this case, though, no problem.
    Also
    <h1><p>Huddersfield</p><p>Canal Society</p></h1>

    Is it the two line appearance you actually want? The <br> is best for that.
    Or are you just avoiding some messy text wrapping as the viewport width
    narrows? Then you could put a &nbsp; in between Canal and Society. That
    whole line of text would wrap as a unit.

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
     
    Jim Moe, Mar 22, 2006
    #7
  8. Greg N.

    Toby Inkster Guest

    Greg N. wrote:

    > <h1>Huddersfield<br>Canal Society</h1>


    This is the way.

    I often use a line break in a heading, combined with <small>, to mark up
    subtitles. (That is, not a *subheading*, which is the heading of a
    particular *part of the page, and should be marked up using <h2>; but a
    subtitle, which is clearly still part of the main <h1> heading.)

    e.g.

    <h1>Overcoming Procrastination;<br>
    <small>Or How to Think and Act Rationally in Spite of Life's Inevitable
    Hassles</small></h1>

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Mar 22, 2006
    #8
  9. Greg N.

    Toby Inkster Guest

    Toby Inkster, Mar 22, 2006
    #9
  10. Greg N. wrote:

    > Suppose you need a heading <h1>Huddersfield Canal Society</h1> to be
    > rendered as two lines. The result you want to see is:
    >
    > Huddersfield
    > Canal Society
    >
    > It can be fudged by marking it up as
    >
    > <h1>Huddersfield<br>Canal Society</h1>
    >
    > or
    >
    > <h1>Huddersfield</h1>
    > <h1>Canal Society</h1>
    >
    > But what would you suggest, that complies with HTML 4.01 strict, and is
    > politically correct with respect to style/content separation?



    Depending on your reasons for doing this, you may just be needing to do
    this for the space restrictions you have? If this is your reason, you may
    like to consider puting a style to your H1 element with a width

    eg...
    <h1 style="width:250px;">Huddersfield Canal Society</h1>


    --
    eat beef jerky
     
    Disco Octopus, Mar 22, 2006
    #10
  11. Greg N.

    Guest

    dorayme wrote:
    > In article <1notl74t9u3xq$>,
    > Mark Parnell <> wrote:
    >
    > > Deciding to do something for the good of humanity, "Greg N."
    > > <> declared in alt.html:
    > >
    > > > Huddersfield
    > > > Canal Society
    > > >
    > > > It can be fudged by marking it up as
    > > >
    > > > <h1>Huddersfield<br>Canal Society</h1>

    > >
    > > Why is that a fudge? You want a line break, so you put one in.
    > >

    >
    > .... OP surely means to
    > be drawing attention here to the ideal of separating style from
    > content and <br> is being used for presentational purposes.



    Perhaps I am wrong on this, after all, considering later posts. One
    <br> would be pc, two or more consequutive <br>s would be frowned on
    even in the context of <h1></h1>

    I need to know the details so that when i go around in a pickup truck
    with fellow HTML/CSS police to round up the politically incorrect, i do
    not overdo things...
     
    , Mar 22, 2006
    #11
  12. Greg N.

    Jim Moe Guest

    Toby Inkster wrote:
    >
    >> <h1><p>Huddersfield</p><p>Canal Society</p></h1>

    >
    > Invalid. See:
    >

    Arrrgghh!

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
     
    Jim Moe, Mar 23, 2006
    #12
  13. Greg N.

    BootNic Guest

    > "Greg N." <> wrote:
    > news:dvq74m$161$....
    >
    > Suppose you need a heading <h1>Huddersfield Canal Society</h1> to be
    > rendered as two lines. The result you want to see is:
    >
    > Huddersfield
    > Canal Society
    >
    > It can be fudged by marking it up as
    >
    > <h1>Huddersfield<br>Canal Society</h1>
    >
    > or
    >
    > <h1>Huddersfield</h1>
    > <h1>Canal Society</h1>
    >
    > But what would you suggest, that complies with HTML 4.01 strict,
    > and is politically correct with respect to style/content separation?


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <h1 style="white-space:pre;">Huddersfield
    Canal Society</h1>
    </body>
    </html>

    --
    BootNic Wednesday, March 22, 2006 9:23 PM

    Humor is just another defense against the universe.
    *Mel Brooks*
     
    BootNic, Mar 23, 2006
    #13
  14. Greg N.

    Greg N. Guest

    BootNic wrote:

    >><h1>Huddersfield<br>Canal Society</h1>
    >>
    >>But what would you suggest, that complies with HTML 4.01 strict,
    >>and is politically correct with respect to style/content separation?

    >
    > <h1 style="white-space:pre;">Huddersfield
    > Canal Society</h1>


    I like it! Seems to fit the bill exactly.

    --
    Gregor mit dem Motorrad auf Reisen:
    http://hothaus.de/greg-tour/
     
    Greg N., Mar 23, 2006
    #14
  15. Greg N.

    Martin Clark Guest

    Jim Moe wrote...
    >Greg N. wrote:
    >> Suppose you need a heading <h1>Huddersfield Canal Society</h1> to be
    >> rendered as two lines. The result you want to see is:
    >> Huddersfield
    >> Canal Society
    >> It can be fudged by marking it up as
    >> <h1>Huddersfield<br>Canal Society</h1>
    >>

    [snip]
    >
    > Is it the two line appearance you actually want? The <br> is best for that.
    > Or are you just avoiding some messy text wrapping as the viewport width
    >narrows? Then you could put a &nbsp; in between Canal and Society. That
    >whole line of text would wrap as a unit.
    >

    Sorry folks - I hadn't noticed that the discussion of this had moved to
    a new thread!

    Initially, the white text stayed on one line, so that at 800x600 it
    overlapped the right-hand banner photo. Not the end of the world, but
    not what I wanted. Several of the suggestions that were put forward
    resulted in solutions where, at some widths, text jumped down below the
    images or formed 3 lines, changing the appearance of the header area
    detrimentally.

    The <h1>Huddersfield</h1><h1>Canal Society</h1> solution produced the
    best result up to that point, where the text stayed within the original
    height of the header area and only overlapped the photo at about 700px
    width, which few people would see in the normal course of events.

    I didn't understand quite why Spartanicus was so angry at the
    "butchering" of his code by whoever suggested that solution, but having
    read this thread I now do understand that it is regarded as incorrect to
    turn it into what is in effect two headings.

    However, <h1>Huddersfield<br>Canal Society</h1> produces exactly the
    same effect and that is what I am going with:
    http://www.tamevalley.freeserve.co.uk/hcs/index.htm
    I am pleased with the way the page works and hope it does not offend the
    purists!

    What does style="white-space:pre;" do please, as suggested by BootNic?
    --
    Martin Clark
     
    Martin Clark, Mar 24, 2006
    #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. Lau Lei Cheong

    Page.Render do not render complete page

    Lau Lei Cheong, May 15, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    2,094
    Lau Lei Cheong
    May 15, 2004
  2. mark4asp
    Replies:
    2
    Views:
    622
    Jasbird
    Nov 11, 2006
  3. lovecreatesbeauty

    How to know two lines are a pare parallel lines

    lovecreatesbeauty, Apr 27, 2006, in forum: C Programming
    Replies:
    11
    Views:
    682
    Old Wolf
    Apr 28, 2006
  4. PerlFAQ Server
    Replies:
    0
    Views:
    175
    PerlFAQ Server
    Jan 14, 2011
  5. PerlFAQ Server
    Replies:
    0
    Views:
    160
    PerlFAQ Server
    Apr 19, 2011
Loading...

Share This Page