By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,760 Members | 1,585 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,760 IT Pros & Developers. It's quick & easy.

Problem with pre {display: inline}

P: n/a
Hello.

I'm using the following code:

<html>
<head>
<style type="text/css">
pre {display: inline;}
</style>
</head>
<body>
<div><pre>hello</pre world</div>
</body>
</html>

IE6.0 deletes all spaces after <preblock and outputs "helloworld". Opera
and Firefox retains at least one space after <preblock. How to resolve
this problem in IE? <prein inline context is needed for outputing all
spaces inside <preas is.

--
Best regards, Vadim.

Nov 20 '06 #1
Share this Question
Share on Google+
12 Replies


P: n/a
Scripsit Vadim Guchenko:
I'm using the following code:
Why? You're using <preand yet you want it to be inline, perhaps containing
just one word as in your example. Do you realize what happens in non-CSS
browsing situations then? What are you _really_ trying to achieve? As usual,
a URL would help (us to help you).
<div><pre>hello</pre world</div>
What have you _really_ got?
IE6.0 deletes all spaces after <preblock and outputs "helloworld".
So does IE 7. A strange bug, but why do you want to invoke it?
Opera and Firefox retains at least one space after <preblock.
A sequence of spaces should be equivalent to one space, so I don't know what
you mean by "at least".
<prein inline context is needed for
outputing all spaces inside <preas is.
No it isn't. You can use <spanwith white-space: pre. But why do you want
to preserve all spaces in inline content?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Nov 20 '06 #2

P: n/a
Hello.

JKKWhy? You're using <preand yet you want it to be inline, perhaps
JKKcontaining
JKKjust one word as in your example. Do you realize what happens in
JKKnon-CSS
JKKbrowsing situations then? What are you _really_ trying to achieve?

I want to achieve three things in one container:

1. Monospace font. I tried to use <tttag and {font-family: monospace}
style, but in Opera 9.02 such fixed-width font looks bigger than
variable-width font. Only inside <prefixed-width font looks the same size
as the variable-width font in Opera.
2. All spaces inside container must be outputed as is. {white-space: pre} is
not supported by IE6 and early versions.
3. Inline context.
><div><pre>hello</pre world</div>
JKKWhat have you _really_ got?

For example:

<style>pre {display: inline; border: 1px solid blue; background-color:
yellow}</style>
<div>The regular expression can be <pre>^hello world$</preor
<pre>^goodbye world$</pre(two spaces in regular expressions are
significant)</div>
--
Best regards, Vadim.

Nov 20 '06 #3

P: n/a
Scripsit Vadim Guchenko:
I want to achieve three things in one container:

1. Monospace font. I tried to use <tttag and {font-family:
monospace} style, but in Opera 9.02 such fixed-width font looks
bigger than variable-width font. Only inside <prefixed-width font
looks the same size as the variable-width font in Opera.
That's an illogical approach. You should select the logical markup first,
then worry about rendering issues. If you set, say, font-family: "Courier
New" and font-size: 90%, you should get a reasonable rendering in most
browsing situations for monospace text. It would be pointless to rely on the
idiosyncratic default rendering for this or that element in some browsers -
comparable to using <blockquotefor indentation.
2. All spaces inside container must be outputed as is. {white-space:
pre} is not supported by IE6 and early versions.
Huh? IE has supported white-space: pre since version 5.5. Anyone using
anything older than that surely needs to realize that he won't get the best
possible rendering of web pages in general and must concentrate on using
their content.

Actually, what I get when testing your code on IE 7, I can see an additional
problem: the browser may break elements into two lines.
3. Inline context.
Using <spanyou get that automatically. But...
>What have you _really_ got?

For example:

<style>pre {display: inline; border: 1px solid blue; background-color:
yellow}</style>
<div>The regular expression can be <pre>^hello world$</preor
<pre>^goodbye world$</pre(two spaces in regular expressions are
significant)</div>
This isn't a real example, but close enough. So what you _really_ want to do
is to present computer code where the number of consecutive spaces may be
signficant. Then you can apply the approach I suggested, just with <code>
instead of <span>, since _now_ you told us what the content really is.

In fact, if the spaces are _really_ relevant, you can use no-break spaces
and have the desired rendering _without_ line breaks inside the elements.
Even when CSS is off.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Nov 20 '06 #4

P: n/a
Hello.
>2. All spaces inside container must be outputed as is. {white-space:
pre} is not supported by IE6 and early versions.
JKKHuh? IE has supported white-space: pre since version 5.5.

My IE6 does not support white-space: pre.

JKKActually, what I get when testing your code on IE 7, I can see an
JKKadditional
JKKproblem: the browser may break elements into two lines.

This is desired behavior for me, but this behavior is only in IE. Is it
possible to force any browser to output all spaces as {white-space: pre} but
automatically break long lines into several lines? This can be useful for
outputing text inputed by a user in form field. Such text can be very long
and can break the layout of the page. On the other hand, the text should be
outputed with minimal changes. Several spaces should not be replaced with
one space and they should be visually distinguished.

--
Best regards, Vadim.

Nov 21 '06 #5

P: n/a
Scripsit Vadim Guchenko:
My IE6 does not support white-space: pre.
I wonder what you mean by that, especially considering the following...
>Actually, what I get when testing your code on IE 7, I can see an
additional
problem: the browser may break elements into two lines.

This is desired behavior for me, but this behavior is only in IE.
Desired as it might be, it's _against_ the specification, since white-space:
pre means honoring both consecutive whitespace (which is what I meant by
"support", expecting _that_ to be what you wanted) _and_ line breaks so that
no addition line breaks are introduced by a browser.
Is it possible to force any browser
No.

Get used to this. Welcome to the World Wide Web. It's _not_ your worldwide
desktop publishing system.
to output all spaces as
{white-space: pre} but automatically break long lines into several
lines?
How would the user then know how many spaces there are? Knowing that is
presumably relevant, so why do you suddenly want to lose that information in
some situations?
This can be useful for outputing text inputed by a user in
form field.
No it isn't. User input should be processed adequately, not displayed as
such. But this is something quite different from your previous example.

Either the spaces are significant, or they are not. There's little point in
treating them as significant unless some browsers finds a place to split
between words.
Such text can be very long and can break the layout of
the page.
It sounds that you have created yourself a problem by letting users enter
data onto your page without adequately preprocessing it. CSS is by far a
wrong tool for such issues. Justice will be served, in some sense, when
someone submits a gigabyte of junk onto your page.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Nov 21 '06 #6

P: n/a
Hello.
>My IE6 does not support white-space: pre.
JKKI wonder what you mean by that, especially considering the
JKKfollowing...
JKKDesired as it might be, it's _against_ the specification, since
JKKwhite-space:
JKKpre means honoring both consecutive whitespace (which is what I
JKKmeant by
JKK"support", expecting _that_ to be what you wanted) _and_ line
JKKbreaks so that
JKKno addition line breaks are introduced by a browser.

Try this code:

<span style="font-family: monospace; white-space: pre">hello world</span>

Firefox and Opera show three spaces between words while IE6 shows only one.
>Is it possible to force any browser
to output all spaces as
{white-space: pre} but automatically break long lines into several
lines?
JKKHow would the user then know how many spaces there are?

Visually. If background color of container with text differs from background
color of parent object and fixed-width font is used, it is possible to see
how many spaces there are even if line break occurs. On the other hand, user
can copy text from web-page and paste it somewhere else and he expects that
the text will be the same as he inputed it before. And all spaces should be
kept.
>Such text can be very long and can break the layout of
the page.
JKKIt sounds that you have created yourself a problem by letting users
JKKenter
JKKdata onto your page without adequately preprocessing it. CSS is by
JKKfar a
JKKwrong tool for such issues. Justice will be served, in some sense,
JKKwhen
JKKsomeone submits a gigabyte of junk onto your page.

My site is intended for internal use, therefore all is ok. On some page
users input the regular expressions and these regular expressions are showed
on the same page in a table. Of course, all they are preprocessed before
output, but all spaces should be retained and printed and long lines should
be break into several lines if needed.

I see, <preis not ideal for my task. Because when I copy/paste the text
that includes <precontainer with display: inline, I got newline characters
before and after <precontainer. Therefore, now I try to use <spanfor
that purpose. It looks like this:

<style>
..test {
font-family: 'Courier New', monospace;
font-size: 90%;
color: #000000;
background-color: #80e080;
padding: 0em 0.12em;
}
wbr:after {content: '\ad'}
</style>
<div>The regular expression can be <span
class="test">^hello&nbsp;<wbr>&nbsp;<wbr>world.$</spanor <span
class="test">^goodbye&nbsp;<wbr>&nbsp;<wbr>world.$ </span(two spaces
between words are significant)</div>

All spaces in output string are replaced with "&nbsp;<wbr>". It works in IE
and Firefox, but Opera doesn't support <wbrtag. Specially for Opera used
construction wbr:after {content: '\ad'}, that adds to the end of <wbrtag
the ­ entity. Opera shows ­ as a hyphen at the end of broken line. I
would like that Opera breaks the line without hyphen, but I don't know how
to do that.

--
Best regards, Vadim.

Nov 21 '06 #7

P: n/a
Scripsit Vadim Guchenko:
Try this code:

<span style="font-family: monospace; white-space: pre">hello world</span>
I actually tested things before posting my statement about IE support to
white-space: pre.

On your request, I now also created a test document containing a verbatim
copy of your code:
http://www.cs.tut.fi/~jkorpela/test/pre.html
Firefox and Opera show three spaces between words while IE6 shows
only one.
No, both IE 6 and IE 7 show three spaces.

You have probably got different results by using markup that does not
conform to HTML specifications, in a way that happens to throw IE 6 and IE 7
to "quirks mode". Basically, you have not used a DOCTYPE declaration that
conforms to the HTML 4.01 specification.

(It's puzzling why IE doesn't do white-space: pre in "quirks mode", but we
don't really need to worry about it.)
>>Is it possible to force any browser
to output all spaces as
{white-space: pre} but automatically break long lines into several
lines?
How would the user then know how many spaces there are?

Visually. If background color of container with text differs from
background color of parent object and fixed-width font is used, it is
possible to see how many spaces there are even if line break occurs.
Assuming the background color is used and the user happens to notice the
effect and its meaning. Why take such risks?
My site is intended for internal use,
So you don't have a question related to authoring for the WWW, do you?
All spaces in output string are replaced with "&nbsp;<wbr>".
It seems that you are trying to dig deeper, or another hole. Now you are
using a character that _means_ a space without line breaking opportunity
after it and you follow it with a tag that is supposed to tell about a line
breaking opportunity.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Nov 21 '06 #8

P: n/a
Hello.
>Firefox and Opera show three spaces between words while IE6 shows
only one.
JKKNo, both IE 6 and IE 7 show three spaces.
JKKYou have probably got different results by using markup that does
JKKnot
JKKconform to HTML specifications, in a way that happens to throw IE 6
JKKand IE 7
JKKto "quirks mode". Basically, you have not used a DOCTYPE
JKKdeclaration that
JKKconforms to the HTML 4.01 specification.

You are right, with a DOCTYPE declaration IE shows all spaces.
>My site is intended for internal use,
JKKSo you don't have a question related to authoring for the WWW, do
JKKyou?

Probably I have chosen wrong group.

--
Best regards, Vadim.
Nov 21 '06 #9

P: n/a
Scripsit Vadim Guchenko:
Probably I have chosen wrong group.
And you _started a new thread_ just to tell that (and to say that I was
right, which everyone could check himself if he cared). This way, you won't
have a very good starting point if you'll want to start a constructive
discussion some day.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Nov 21 '06 #10

P: n/a
Hello.
>Probably I have chosen wrong group.
JKKAnd you _started a new thread_ just to tell that (and to say that I
JKKwas
JKKright, which everyone could check himself if he cared). This way,
JKKyou won't
JKKhave a very good starting point if you'll want to start a
JKKconstructive
JKKdiscussion some day.

Thank you for your help.

--
Best regards, Vadim.
Nov 21 '06 #11

P: n/a
Jukka K. Korpela schrieb:
And you _started a new thread_ just to tell that
At least the message had a reference (via References:) to
<zP*******************@reader1.news.jippii.net>, the one he responded to.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
Nov 21 '06 #12

P: n/a
Els
Johannes Koch wrote:
Jukka K. Korpela schrieb:
>And you _started a new thread_ just to tell that

At least the message had a reference (via References:) to
<zP*******************@reader1.news.jippii.net>, the one he responded to.
My newsreader didn't show a new thread at all.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Talking Heads - Road To Nowhere
Nov 21 '06 #13

This discussion thread is closed

Replies have been disabled for this discussion.