467,077 Members | 1,002 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,077 developers. It's quick & easy.

Problem with text inside <pre> and narrow viewports

Hello all,

On the page located at

http://deimos.curious.be/~dusk/lyrics.php#gotn

I have put the lyrics text inside <pre> elements so that the UA renders
the linebreaks in the code. Because of this though some of the longer
lines will be clipped by the div they're in (or cross its borders if I
allow overflow) when viewed with a narrower viewport (or user-increased
font-size).

Can I do anything else to solve this, besides putting the text inside
<p> tags and at a <br> at the end of each line?

I tried setting the white-space property for pre elements to "normal",
but then I (obviously) just end up with <pre> elements acting as <p>
elements.
--
TomB - DrumScum
tomb <-at-> versateladsl <-punt-> be
http://www.duskmetal.be
Dec 14 '05 #1
  • viewed: 2125
Share:
6 Replies
TomB <ma**@invalid.mail> wrote:
I have put the lyrics text inside <pre> elements so that the UA renders
the linebreaks in the code.
<pre> also makes the font monospaced, which is not stylish, but you can
change this easily in CSS (with the usual caveats).
Because of this though some of the longer
lines will be clipped by the div they're in (or cross its borders if I
allow overflow) when viewed with a narrower viewport (or user-increased
font-size).


I would suggest using somewhat verbose but logical markup:
- put a poem inside <div class="poem">...</div>
- make each line a <div>...</div>
- use CSS to make continuation lines indented, as a visible indication that
a line of the poem has been wrapped, e.g. with
.poem div { margin-left: 1em; text-indent: -1em; }

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Dec 14 '05 #2
Jukka K. Korpela wrote:
TomB <ma**@invalid.mail> wrote:

I have put the lyrics text inside <pre> elements so that the UA renders
the linebreaks in the code.
Because of this though some of the longer
lines will be clipped by the div they're in (or cross its borders if I
allow overflow) when viewed with a narrower viewport (or user-increased
font-size).

I would suggest using somewhat verbose but logical markup:
- put a poem inside <div class="poem">...</div>
- make each line a <div>...</div>
- use CSS to make continuation lines indented, as a visible indication that
a line of the poem has been wrapped, e.g. with
.poem div { margin-left: 1em; text-indent: -1em; }


Indeed pretty verbose :-)
Using <p>'s with a <br> at the end of each line would be less bloated
then, no?

--
TomB - DrumScum
tomb <-at-> versateladsl <-punt-> be
http://www.duskmetal.be
Dec 14 '05 #3
TomB <ma**@invalid.mail> wrote:
Indeed pretty verbose :-)
You could use some simple tool to generate the markup.
Using <p>'s with a <br> at the end of each line would be less bloated
then, no?


It would be somewhat less logical and, more importantly, it would not let you
style the appearance as I suggested, since a line would not constitute an
element.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Dec 14 '05 #4
TomB wrote:

Indeed pretty verbose :-)
Using <p>'s with a <br> at the end of each line would be less bloated
then, no?


Yes, it would be the simple way to handle it.

And if you wanted different styling for a line, or a part of a line,
enclose it in a span.

The more verbose method suggested is nice, but probably a bit much for
a beginner. But it is something you may want to play with in the
future.

Dec 14 '05 #5
Jukka K. Korpela wrote:
I would suggest using somewhat verbose but logical markup:
- put a poem inside <div class="poem">...</div>
- make each line a <div>...</div>
- use CSS to make continuation lines indented, as a visible indication that
a line of the poem has been wrapped, e.g. with
.poem div { margin-left: 1em; text-indent: -1em; }

TomB <ma**@invalid.mail> wrote: Indeed pretty verbose :-)
Using <p>'s with a <br> at the end of each line would be less bloated
then, no?


Yes and no. The advantage of Jukka's approach is that each line of verse
can be styled as a separate element. That allows you to wrap a line of
verse onto multiple display lines, and to indent the second and following
display lines to indicate that they are a continuation of what is logically
a single line of verse.

With a little more work, you could indent the second line of a couplet
slightly. Then wrapped continuation lines could be indented further.

The display could look something like this:

The first couplet has a short line
Followed by another short line

The second couplet has a very long line that must be
wrapped unless the page/viewport is
extremely wide, or perhaps the font is
extremely small
Followed by a short line

The third couplet has a short line
Followed by a longer line that may or may not
wrap

If you don't want to style (or otherwise process) individual lines as
separate elements, then BR elements are adequate to force line breaks. But
then the lines are not distinct elements--they're just the inline content
of a block-level element, with a few line breaks thrown in.
--
Darin McGrew, mc****@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp.com, http://www.HTMLHelp.com/

"When strong encryption is outlawed, only outlaws jvyy hfr fgebat rapelcgvba."
Dec 14 '05 #6
Jukka K. Korpela wrote:
TomB <ma**@invalid.mail> wrote:

Indeed pretty verbose :-)

You could use some simple tool to generate the markup.

Using <p>'s with a <br> at the end of each line would be less bloated
then, no?

It would be somewhat less logical and, more importantly, it would not let you
style the appearance as I suggested, since a line would not constitute an
element.


I decided to use the mark-up/styling you suggested after all. Looks
smashing. Thanks.

--
TomB - DrumScum
tomb <-at-> versateladsl <-punt-> be
http://www.duskmetal.be
Dec 17 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Porthos | last post: by
1 post views Thread by Dan Jacobson | last post: by
21 posts views Thread by Headless | last post: by
7 posts views Thread by Alan Illeman | last post: by
3 posts views Thread by Michael Shell | last post: by
5 posts views Thread by Porthos | last post: by
9 posts views Thread by Eric Lindsay | last post: by
10 posts views Thread by Xah Lee | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.