473,395 Members | 1,679 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 software developers and data experts.

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
6 2410
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Porthos | last post by:
Hi All, I'm building an XSL document that puts two types of information in a table dimension: preformatted data and data extracted from my XML document (see below) <table> <tr>
1
by: Dan Jacobson | last post by:
In wdg-html-reference/html40/block/pre.html there is no mention about how ASCII tabs (^I) are to be rendered. I suppose all bets are off? Wait, my docs go thru html-tidy first, and it says...
21
by: Headless | last post by:
I've marked up song lyrics with the <pre> tag because it seems the most appropriate type of markup for the type of data. This results in inefficient use of horizontal space due to UA's default...
7
by: Alan Illeman | last post by:
How do I set several different properties for PRE in a CSS stylesheet, rather than resorting to this: <BODY> <PRE STYLE="font-family:monospace; font-size:0.95em; width:40%; border:red 2px...
3
by: Michael Shell | last post by:
Greetings, Consider the XHTML document attached at the end of this post. When viewed under Firefox 1.0.5 on Linux, highlighting and pasting (into a text editor) the <pre> tag listing will...
5
by: Porthos | last post by:
I'm authoring an XML document and using the <pre> html tag for the portions that are not dynamically generated. The <pre> text is displaying in a smaller font size (and I believe different font)...
9
by: Eric Lindsay | last post by:
I can't figure how to best display little snippets of shell script using <pre>. I just got around to organising to bulk validate some of my web pages, and one of the problems occurs with Bash...
10
by: Xah Lee | last post by:
there's a HTML odditity. That is, line break will be ignored inside <preif the adjacent lines are tags. see the source code and description here: http://xahlee.org/js/linebreak_after_tag.html...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.