how can I show spaces as spaces, part 2

  • Thread starter Tomasz Chmielewski
  • Start date
T

Tomasz Chmielewski

So, I thought that by adding "white-space: pre" I will force the
browsers to display spaces as they appear in HTML document.

However, adding it changes the way the "line-height" is displayed (free
space between the rows of text) - now I had really lots of free space
between any two lines of text.

So let's add "line-height: 7pt;" - this way, everything looks like it
should. At least in Firefox.

And IE8.
But not in IE8 in "compatibility mode" - with that mode enabled, lines
of text are printed on each other in IE8 (I didn't check any other IE
versions so far).

So it's not that easy with these browsers ;)


Is there something else than "line-height: " which would be understood
in the same way by Firefox, IE8 (with and without compatibility mode)
and perhaps other browsers?
 
J

Jukka K. Korpela

Tomasz said:
So, I thought that by adding "white-space: pre" I will force

You thought wrongly. You have missed the usual CSS Caveats. You cannot force
anything with CSS,
However, adding it changes the way the "line-height" is displayed

You may think so, and we have no way of finding out what really happened,
since you did not provide a URL.
So let's add "line-height: 7pt;"

Sounds very clueless.
 
T

Tomasz Chmielewski

Jukka said:
You thought wrongly. You have missed the usual CSS Caveats. You cannot
force anything with CSS,


You may think so, and we have no way of finding out what really
happened, since you did not provide a URL.


Sounds very clueless.

Basically, "white-space: pre" will force all whitespaces to show up
rendered.

The side effect here is that in addition to <br>, it "adds one more
<br>", because there is already an end-of-line character.
So, instead of one end-of-line, two end-of-lines are rendered with
"white-space: pre" and this code:

some text<br>
some more text<br>


The clueless "line-height: 7pt;" will remove this "end-of-line",
however, in a unique way in older IE.

Adding this instead seems to work better (at least on a limited set of
browsers I tried):


br {
line-height: 0px;
}
 
T

Tomasz Chmielewski

Ben said:
Why not just get rid of the <br>s? Or just use br { display: none } if
you must have them in the markup for some reason.

I can't remove <br>s, because the HTML is generated by an application
(written in C) - changing it would be too much effort.

And br in CSS is ignored by Safari:

br {
...
}

:)


So one day, I'll have to sit and see what's wrong with that application...
 
D

dorayme

Tomasz Chmielewski said:
I can't remove <br>s, because the HTML is generated by an application
(written in C) - changing it would be too much effort.

And br in CSS is ignored by Safari:

br {
...
}

:)

Not in my Safari.

I wish you had not ignored Korpela's suggestion for you to supply a URL.
It's not so hard to make a test case, you can modify this template if
you wish:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>BR</title>
<style type="text/css">
br {display: none;}
</style>
</head>
<body>
<p>Hello<br>World!</p>
</body>
 
T

Tomasz Chmielewski

dorayme said:
Not in my Safari.

I wish you had not ignored Korpela's suggestion for you to supply a URL.
It's not so hard to make a test case, you can modify this template if
you wish:

Is it Safari 4 with webkit?

The website is in internal LAN right now, but I'll try t upload a test
case tomorrow.
 
D

dorayme

Tomasz Chmielewski said:
Is it Safari 4 with webkit?

The website is in internal LAN right now, but I'll try t upload a test
case tomorrow.

My Safari is 3.1.2 on a Mac (Tiger)
 
T

Tomasz Chmielewski

dorayme said:
My Safari is 3.1.2 on a Mac (Tiger)

Indeed - Safari seems to understand:

br {display: none;}

But it doesn't seem to understand:

br {line-height: 0px;}


Using "br {display: none;}" has a side effect: <br> is not rendered at all.
So this code:

some<br>
text

Will be rendered as:

some text

Which is not what I want to achieve.

I want to achieve

some
text

without any excessive spacing between the texts.



This comes to one thing: how, in CSS, do I set setting for <br> elements
which are placed within "<div class="..." _only_, like here:


<br> - I want to render it normally
<div class="messageBody">
.....
<br> - I don't want to render this br (apply "display: none;")
.....
</div>


Sorry if it's a lame question.


The test case is here:

http://www1.wpkg.org/css/

You will have to click on the *.html page to view it; otherwise, you can
go to *.files directory to see the css.
 
T

Tomasz Chmielewski

Tomasz said:
This comes to one thing: how, in CSS, do I set setting for <br> elements
which are placed within "<div class="..." _only_, like here:


<br> - I want to render it normally
<div class="messageBody">
....
<br> - I don't want to render this br (apply "display: none;")
....
</div>


Sorry if it's a lame question.

My own answer to my lame question is:

div.messageBody br {
display: none;
}
 
T

Tomasz Chmielewski

Ben said:
You got it! Does it work then?

It does work in IE6/7/8 And Firefox 3.5; doesn't work in IE5.5 - but
it's too old to care for me / for this specific site.

I didn't try other browsers yet.
 
T

Tomasz Chmielewski

Ben said:
Not surprising really-- it is a weird corner case and it's not clear
what it's supposed to do.


But I thought you were using white-space: pre?

I meant:

some<br>text

Will be rendered as:

some text


It's just that <br> should be treated differently only within
"div.messageBody".
 
D

dorayme

Indeed - Safari seems to understand:

br {display: none;}

But it doesn't seem to understand:

br {line-height: 0px;}

To be perfectly frank, neither do I. The BR element does the job of
breaking a line so what follows goes onto the next line. It does not,
according to my simple view, have a line height in the way that oranges
do not have backfires, they are not the sort of thing that do,
(combustion engines do this).

The paragraph element or the span in which this breaking event happened
would determine the line height of the lines. But a break is neither the
line before nor the line after nor the gap between lines. At least that
would seem to be the intuitive view of things from the point of view of
a visitor to this planet.

Using "br {display: none;}" has a side effect: <br> is not rendered at all.
So this code:

some<br>
text

Will be rendered as:

some text

Again, not on my Safari (or iCab or FF)

<p>Hello<br>World!</p>

gives, as one would expect, HelloWorld. Whereas,

<p>Hello<br>
World!</p>

gives Hello World, the typing Return delivering the space that the
virtual removal of <br> would require.
 
J

Jan C. Faerber

On Sep 10, 11:40 am, Tomasz Chmielewski
My own answer to my lame question is:

div.messageBody br {
   display: none;

}

http://www1.wpkg.org/css/20090901.115944.d5788b57.en.html
This file looks nice in the browser -
the spaces make the text centered.

But if you use a simple html [1] on my desktop it does not work (in
Firefox)!!

[1]

div.messageBody {
padding: 4px;
margin-top: 1em;
white-space: pre;
}

div.messageBody br {
display: none;
}

</style>
</head>

<body>
<div class="messageBody"> Start text here
<br> Some text centered with spaces
</div>



If I do it like [2] - it works.

[2]

<div class="messageBody"><pre> Start text
here
<br> Some text centered with spaces
</pre></div>


I don't understand the difference between

file:///home/user/folder/20090901.115944.d5788b57.en.html
and
http://www1.wpkg.org/css/20090901.115944.d5788b57.en.html

along with
 
J

Jan C. Faerber

I don't understand the difference between

file:///home/user/folder/20090901.115944.d5788b57.en.html
andhttp://www1.wpkg.org/css/20090901.115944.d5788b57.en.html

along with

I try to answer my question:

It depends on the whitespaces I created with my editor (after saving
the file).
http://www.w3.org/TR/html401/struct/text.html#h-9.1

I will take me some more work on this topic (using different editors,
etc.)
to make sure for sure.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,734
Messages
2,569,441
Members
44,832
Latest member
GlennSmall

Latest Threads

Top