Border around <pre> and small screens

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

Quote: Originally Posted by 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 <preis 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.

Quote: Originally Posted by 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:

Quote: Originally Posted by 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 <preis 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@sneakemail.comwrote:

Quote: Originally Posted by 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 <preis 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 <preshrink-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@sneakemail.comwrote in:
g3nut5$ulq$1@newsserv.zdv.uni-tuebingen.de

Quote: Originally Posted by 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 <preis 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:

Quote: Originally Posted by Hendrik Maryns wrote: Quote: Originally Posted by >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 <preis 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