Border around <pre> and small screens

**Felix Miata** · Jun 27 '08, 07:19 PM

Re: Border around <pre> and small screens

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 <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?

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/

**Jonathan N. Little** · Jun 27 '08, 07:19 PM

Re: Border around <pre> and small screens

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 <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

Little Works Studio Site Maintainance

http://www.LittleWorksStudio.com

**Ben C** · Jun 27 '08, 07:19 PM

Re: Border around <pre> and small screens

On 2008-06-23, Hendrik Maryns <gtw37bn02@snea kemail.comwrote :

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).

**BootNic** · Jun 27 '08, 07:19 PM

Re: Border around <pre> and small screens

On Mon, 23 Jun 2008 12:45:57 +0200
Hendrik Maryns <gtw37bn02@snea kemail.comwrote in:
g3nut5$ulq$1@ne wsserv.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 <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>


--
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)

iEYEARECAAYFAkh f/PMACgkQylMUzZO6 jeKebQCaAkVbazk hS3mihAvYZZrQar Q2
xTYAnR/8Kl7rxAi2bOVvFh QCTp869KDS
=salh
-----END PGP SIGNATURE-----

**Hendrik Maryns** · Jun 27 '08, 07:20 PM

Re: Border around <pre> and small screens

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 <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/

=============== ===

SHAGADELICA - hier wird alles nur nicht gestottert... shagadings

http://aouw.org

Ask smart questions, get good answers:

How To Ask Questions The Smart Way

http://www.catb.org/~esr/faqs/smart-questions.html