Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > How to render a heading as two lines?

Reply
Thread Tools

How to render a heading as two lines?

 
 
Greg N.
Guest
Posts: n/a
 
      03-22-2006
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/
 
Reply With Quote
 
 
 
 
Mark Parnell
Guest
Posts: n/a
 
      03-22-2006
Deciding to do something for the good of humanity, "Greg N."
<(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
 
Nick Theodorakis
Guest
Posts: n/a
 
      03-22-2006
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
http://www.velocityreviews.com/forums/(E-Mail Removed)
contact form:
http://theodorakis.net/contact.html
 
Reply With Quote
 
Blinky the Shark
Guest
Posts: n/a
 
      03-22-2006
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

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      03-22-2006
In article <1notl74t9u3xq$(E-Mail Removed)>,
Mark Parnell <(E-Mail Removed)> wrote:

> Deciding to do something for the good of humanity, "Greg N."
> <(E-Mail Removed)> 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
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      03-22-2006
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
 
Reply With Quote
 
Jim Moe
Guest
Posts: n/a
 
      03-22-2006
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)
 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      03-22-2006
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

 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      03-22-2006
Jim Moe wrote:

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


Invalid. See:

http://www.w3.org/TR/html401/struct/global.html#h-7.5.5

where H1 through to H6 are defined as containing only inline content
-- that is, not block-level content such as paragraphs.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
Disco Octopus
Guest
Posts: n/a
 
      03-22-2006
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Accessing rails render method outside of view / Decorating render Glenn Gillen Ruby 0 11-17-2006 02:30 PM
Can 2 columns of a DataGrid have a single heading OR can I have two controls in 1 column? mark4asp ASP .Net 2 11-11-2006 02:13 AM
Heading to Vegas tomorrow.... and I want to pick up a HD DVD title or two... Allan DVD Video 0 04-23-2006 12:54 AM
DataGrid Heading =?Utf-8?B?SmltIEhlYXZleQ==?= ASP .Net 3 12-10-2004 08:23 PM
Page.Render do not render complete page Lau Lei Cheong ASP .Net 1 05-15-2004 04:10 AM



Advertisments