Border around <pre> and small screens

Hi,

A friend complained that the border around the lower code part on
http://tcl.sfs.uni-tuebingen.de/~hendrik/keyboard.shtml is too small for
the content. This is because his window size is so small that the size
of the containing <pre> is smaller than the text in it. Since it is
<pre>, the text is not wrapped, but the border and background color get
smaller. Thus the text pops out of its box.

Is there something one can do against this?

Cheers, H.
--
Hendrik Maryns
http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
http://aouw.org
Ask smart questions, get good answers:
http://www.catb.org/~esr/faqs/smart-questions.html

On 2008/06/23 12:45 (GMT+0200) Hendrik Maryns apparently typed:

A friend complained that the border around the lower code part on
http://tcl.sfs.uni-tuebingen.de/~hendrik/keyboard.shtml is too small for
the content. This is because his window size is so small that the size
of the containing <pre> is smaller than the text in it. Since it is
pre>, the text is not wrapped, but the border and background color get
smaller. Thus the text pops out of its box.

Is there something one can do against this?

Since most monospace fonts are the same actual width for any given nominal
size, set a width or min-width on the pre block that matches the width the
content requires. That way when the window is wider than it needs to be, the
background and border of the block will be a close fit too instead of being
wider than the content requires.
--
"Where were you when I laid the earth's
foundation?" Matthew 7:12 NIV

Team OS/2 ** Reg. Linux User #211409

Felix Miata *** http://fm.no-ip.com/

Hendrik Maryns wrote:

Hi,

A friend complained that the border around the lower code part on
http://tcl.sfs.uni-tuebingen.de/~hendrik/keyboard.shtml is too small for
the content. This is because his window size is so small that the size
of the containing <pre> is smaller than the text in it. Since it is
pre>, the text is not wrapped, but the border and background color get
smaller. Thus the text pops out of its box.

Is there something one can do against this?

No not really. You are giving conflicting rules. PRE in in monospace
font and preserves the whitespace and text newlines to the length of the
PRE text is fixed but the viewport may change...

3 options that I see, adjust the overflow property

pre.example {
padding: 3px 5px; border: 3px double silver;
background: #eee; overflow: auto;
/* causes a scrollbar if content does not fit */
}

pre.example {
padding: 3px 5px; border: 3px double silver;
background: #eee; overflow: hidden;
/* causes content to be clipped */
}

pre.example {
padding: 3px 5px; border: 3px double silver;
background: #eee; width: 20em;
/*
set width to static maximum line width
which is far from elegant and will probably
cause other problems...
*/
}

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

On 2008-06-23, Hendrik Maryns <gtw37bn02 (AT) sneakemail (DOT) com> wrote:

Hi,

A friend complained that the border around the lower code part on
http://tcl.sfs.uni-tuebingen.de/~hendrik/keyboard.shtml is too small for
the content. This is because his window size is so small that the size
of the containing <pre> is smaller than the text in it. Since it is
pre>, the text is not wrapped, but the border and background color get
smaller. Thus the text pops out of its box.

Is there something one can do against this?

You can make the <pre> shrink-to-fit (or grow-to-fit), by for example

pre { float: left; min-width: 100% }

working around unwanted side-effects as necessary, perhaps with:

pre:after
{
content: "";
display: block;
clear: left;
}

(might not work in IE).

On Mon, 23 Jun 2008 12:45:57 +0200
Hendrik Maryns <gtw37bn02 (AT) sneakemail (DOT) com> wrote in:
g3nut5$ulq$1 (AT) newsserv (DOT) zdv.uni-tuebingen.de

A friend complained that the border around the lower code part on
http://tcl.sfs.uni-tuebingen.de/~hendrik/keyboard.shtml is too small for
the content. This is because his window size is so small that the size
of the containing <pre> is smaller than the text in it. Since it is
pre>, the text is not wrapped, but the border and background color get
smaller. Thus the text pops out of its box.

Is there something one can do against this?

You could set display:table; for pre, and since IE does not do
display:table; you could use a conditional comment for IE and set
display:inline; zoom:1;

<style type="text/css">
pre {
display: table;
}
</style>
<!--[if IE]>
<style type="text/css">
pre {
display: inline;
zoom: 1;
}
</style>
<![endif]-->

--
BootNic Mon Jun 23, 2008 3:43 PM
Have no fear of perfection - you'll never reach it.
*Salvador Dali*


-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.9 (GNU/Linux)

iEYEARECAAYFAkhf/PMACgkQylMUzZO6jeKebQCaAkVbazkhS3mihAvYZZrQarQ2
xTYAnR/8Kl7rxAi2bOVvFhQCTp869KDS
=salh
-----END PGP SIGNATURE-----

Jonathan N. Little schreef:

Hendrik Maryns wrote:
Hi,

A friend complained that the border around the lower code part on
http://tcl.sfs.uni-tuebingen.de/~hendrik/keyboard.shtml is too small
for the content. This is because his window size is so small that the
size of the containing <pre> is smaller than the text in it. Since it
is <pre>, the text is not wrapped, but the border and background color
get smaller. Thus the text pops out of its box.

Is there something one can do against this?

No not really. You are giving conflicting rules. PRE in in monospace
font and preserves the whitespace and text newlines to the length of the
PRE text is fixed but the viewport may change...

3 options that I see, adjust the overflow property

pre.example {
padding: 3px 5px; border: 3px double silver;
background: #eee; overflow: auto;
/* causes a scrollbar if content does not fit */
}

I really like this one, thanks!

H.
--
Hendrik Maryns
http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
http://aouw.org
Ask smart questions, get good answers:
http://www.catb.org/~esr/faqs/smart-questions.html