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

Strip white space

P: n/a
Is it possible to make two inline elements to appear adjacent
stripping any white space appearing in between in the source?

Example:

<span class="adj">1</span>
<span class="adj">2</span>
<span class="adj">3</span>

--
Stanimir

Jul 20 '05 #1
Share this Question
Share on Google+
17 Replies


P: n/a
Stanimir Stamenkov <s7****@netscape.net> wrote:
Is it possible to make two inline elements to appear adjacent
stripping any white space appearing in between in the source?

Example:

<span class="adj">1</span>
<span class="adj">2</span>
<span class="adj">3</span>


Not 100% sure what you mean, but does this do it?

<span class="adj">1</span><span class="adj">2</span><span
class="adj">3</span>

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #2

P: n/a
Steve Pugh wrote:
Stanimir Stamenkov <s7****@netscape.net> wrote:
Is it possible to make two inline elements to appear adjacent
stripping any white space appearing in between in the source?


Not 100% sure what you mean, but does this do it?

<span class="adj">1</span><span class="adj">2</span><span
class="adj">3</span>


:-) Yeah, but I've asked about the case where there's (think of it
like: there should be) a white space between the elements in the source.

--
Stanimir

Jul 20 '05 #3

P: n/a
Stanimir Stamenkov wrote on 04 nov 2003 in
comp.infosystems.www.authoring.stylesheets:
Is it possible to make two inline elements to appear adjacent
stripping any white space appearing in between in the source?

Example:

<span class="adj">1</span>
<span class="adj">2</span>


<style>
.adj {font-size:40pt;}
.outer {font-size:0;}
.corr {margin-left:-12px;}
</style>

<span class="adj">1</span><span class="adj">2</span>

<br>

<span class="outer">
<span class="adj">1</span>
<span class="adj">2</span>
</span>

<br>

<span class="adj">
<span class="adj">1</span>
<span class="adj corr">2</span>
</span>
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 20 '05 #4

P: n/a
Stanimir Stamenkov <s7****@netscape.net> wrote:
Steve Pugh wrote:
Stanimir Stamenkov <s7****@netscape.net> wrote:
Is it possible to make two inline elements to appear adjacent
stripping any white space appearing in between in the source?


Not 100% sure what you mean, but does this do it?

<span class="adj">1</span><span class="adj">2</span><span
class="adj">3</span>


:-) Yeah, but I've asked about the case where there's (think of it
like: there should be) a white space between the elements in the source.


Fix whatever is the cause of the whitespace in the source.

..adj {float: left;] works for your simple test case, but probably
isn't appropriate for whatever real world problem you're trying to
solve.

I thought about display: run-in; but that doesn't seem to be the
solution (not supported by IE, has no effect in this case in Moz 1.5,
works for the 2 and 3 but causes the 1 to vanish in O7.21).

A negative margin-left is, of course, the brute force approach and is
likely to cause as many problems as it solves.

I think that any solution will depend on what else is in the
surrounding markup. The problem is more complex if the code snippet
provided is preceeded and/or followed by text than if it is alone
inside a block element.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #5

P: n/a
Steve Pugh wrote:
Stanimir Stamenkov <s7****@netscape.net> wrote:
Steve Pugh wrote:
<span class="adj">1</span><span class="adj">2</span><span
class="adj">3</span>
:-) Yeah, but I've asked about the case where there's (think of it
like: there should be) a white space between the elements in the source.


Fix whatever is the cause of the whitespace in the source.


There's nothing to fix - the data should contain the white space. I
want to have such visual style presentation where this white space
doesn't appear, just like I could hide certain (non-white space)
elements (the 'display' property).
.adj {float: left;] works for your simple test case, but probably
isn't appropriate for whatever real world problem you're trying to
solve.
I've though of floats too, but then I don't know the height of the
inline element boxes and I want them baseline aligned.
I thought about display: run-in; but that doesn't seem to be the
solution (not supported by IE, has no effect in this case in Moz 1.5,
works for the 2 and 3 but causes the 1 to vanish in O7.21).

A negative margin-left is, of course, the brute force approach and is
likely to cause as many problems as it solves.
Yeah, negative margins are pretty relative because there's no unit
to specify exact 1 space width for the current element's font.
I think that any solution will depend on what else is in the
surrounding markup. The problem is more complex if the code snippet
provided is preceeded and/or followed by text than if it is alone
inside a block element.


I though there may be something which I've missed from the CSS specs
about stripping/collapsing white space, that's why I've given such a
generic example.

BTW, the example which Evertjan. gave in another reply with
'font-size: 0' on the parent element - almost did it :-) , though IE
and Opera still leave a pixel space.

--
Stanimir

Jul 20 '05 #6

P: n/a
Stanimir Stamenkov <s7****@netscape.net> wrote:
Steve Pugh wrote:
Stanimir Stamenkov <s7****@netscape.net> wrote:
Steve Pugh wrote:

<span class="adj">1</span><span class="adj">2</span><span
class="adj">3</span>

:-) Yeah, but I've asked about the case where there's (think of it
like: there should be) a white space between the elements in the source.
Fix whatever is the cause of the whitespace in the source.


There's nothing to fix - the data should contain the white space. I
want to have such visual style presentation where this white space
doesn't appear, just like I could hide certain (non-white space)
elements (the 'display' property).


The display property is exactly what you should be using.

<span class="adj">1</span><span class="foo">
</span><span class="adj">2</span><span class="foo">
</span><span class="adj">3</span>

..foo {display: none;}

The white space is part of the data, as you say, and not just an
artifact of how you format the source code. Therefore any display of
the whitespace/data should be handled by marking up that
whitespace/data.

Though I am curious what this data is that has meaningful whitespace
in it, but which doesn't lose meaning when that whietspace isn't
displayed.
BTW, the example which Evertjan. gave in another reply with
'font-size: 0' on the parent element - almost did it :-) , though IE
and Opera still leave a pixel space.


I didn't know whether that would work for you because I didn't know
whether there was text to either side of the spans in your real data.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #7

P: n/a
Steve Pugh wrote:
The white space is part of the data, as you say, and not just an
artifact of how you format the source code. Therefore any display of
the whitespace/data should be handled by marking up that
whitespace/data.

Though I am curious what this data is that has meaningful whitespace
in it, but which doesn't lose meaning when that whietspace isn't
displayed.
It's a separating space. An application could process it whatever it
wants. :-)

I though more of a "generic" way (if CSS provides such) to suppress
the white space as a text node (in the DOM means).

Just like this:

<p>
<span>
text
</span>
</p>

A HTML application should strip the leading and trailing space but
this can't be expressed with CSS (as far as I find out).
Stanimir Stamenkov <s7****@netscape.net> wrote:
BTW, the example which Evertjan. gave in another reply with
'font-size: 0' on the parent element - almost did it :-) , though IE
and Opera still leave a pixel space.


I didn't know whether that would work for you because I didn't know
whether there was text to either side of the spans in your real data.


If I markup even the white space then it really doesn't matter.

--
Stanimir

Jul 20 '05 #8

P: n/a
Steve Pugh <st***@pugh.net> wrote:
The display property is exactly what you should be using.
I wouldn't vote on the solutions before knowing the real problem.
<span class="adj">1</span><span class="foo">
</span><span class="adj">2</span><span class="foo">
</span><span class="adj">3</span>

.foo {display: none;}

The white space is part of the data,
In this case, it isn't. There is no white space in the textual content
above, by the specifications. There is just white space generated by white
space bugs, which are known to be common in browsers. By SGML rules,
the line breaks between <span ...> and </span> tags above shall be ignored
on two accounts: the line breaks immediately follow a start tag _and_
precede an end tag.

So if you use such a trick, you should at least use real spaces between the
tags.
Though I am curious what this data is that has meaningful whitespace
in it, but which doesn't lose meaning when that whietspace isn't
displayed.


Me too. I'm just making wild guesses right now, and thinking whether
letter-spacing or word-spacing with a negative value might be a solution.
But knowing the problem would surely help.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #9

P: n/a

"Stanimir Stamenkov" <s7****@netscape.net> wrote in message
news:bo*************@ID-207379.news.uni-berlin.de...
Is it possible to make two inline elements to appear adjacent
stripping any white space appearing in between in the source?

Example:

<span class="adj">1</span>
<span class="adj">2</span>
<span class="adj">3</span>

--
Stanimir


I asked a very similar question a while ago in relation to making sure
images display adjacently regardless of whether there's a cr/lf in the HTML
between the <img>'s. I didn't get any definite answer, but it was probably
when everyone was on holiday.
--
Tony T
Replace 'from' with 'to' (twice) for e-mail
Jul 20 '05 #10

P: n/a
Jukka K. Korpela wrote:
I wouldn't vote on the solutions before knowing the real problem.


There's really nothing more to explain. It's a pretty generic
question. If I have an XML:

<root>
<el>12</el>
<el>34</el>
<en>ab</en>
<en>cd</en>
</root>

and an UA which could display it using CSS (Mozilla, for example) I
want the <root/> to be 'display: block' (for example) and <el/> and
<en/> elements to be 'display: inline' (not exactly)... however I
want no white space to appear between the <el/> elements. It is
pretty much like if they are table row cells but more like if they
are adjacent 'inline-block's (they could wrap if needed).

With IE and HTML I've noticed some weird behavior were default block
elements (like H1, DIV, etc.) if made 'display: inline' appear
adjacent ignoring the white space between elements:

<div>
<h1>Main</h1>
<h2>Sub</h2>
</div>

h1, h2 { display: inline }

May be I'll post this on the w3-style mailing list to see what the
other gurus will say about it.

--
Stanimir

Jul 20 '05 #11

P: n/a
Stanimir Stamenkov wrote:
With IE and HTML I've noticed some weird behavior were default block
elements (like H1, DIV, etc.) if made 'display: inline' appear adjacent
ignoring the white space between elements:

<div>
<h1>Main</h1>
<h2>Sub</h2>
</div>

h1, h2 { display: inline }


Hm, I was too hurry. Seems like this behavior is triggered by
something different (in addition) but then it shows only in IE and I
haven't found the exact cause, yet.

--
Stanimir

Jul 20 '05 #12

P: n/a
Stanimir Stamenkov <s7****@netscape.net> wrote:
Jukka K. Korpela wrote:
I wouldn't vote on the solutions before knowing the real problem.
There's really nothing more to explain.


I still don't see a description of the problem, just various technical
approaches to some unknown problem.
It's a pretty generic question. If I have an XML:
As far as I can see, this is the first time you mention XML in this
discussion - and you _don't_ describe how you would like it to be rendered
and why. (Your description is vague, even without the "(not exactly)" part.)
With IE and HTML I've noticed some weird behavior were default block
elements (like H1, DIV, etc.) if made 'display: inline' appear
adjacent ignoring the white space between elements:
Maybe, but why would you make consecutive h1 and h2 elements appear inline?

On the technical side, setting just h1, h2 { display: inline }

does not override the settings of other properties for those elements in
different style sheets, including browser style sheet. This is one reason
why the description of the situation is rather vague.

And your original question was very different.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #13

P: n/a
Jukka K. Korpela wrote:
I still don't see a description of the problem, just various technical
approaches to some unknown problem.
It is really nothing "real" that I'm currently working on. It came
to me while I was playing around.
Stanimir Stamenkov <s7****@netscape.net> wrote:
It's a pretty generic question. If I have an XML:
As far as I can see, this is the first time you mention XML in this
discussion - and you _don't_ describe how you would like it to be rendered
and why. (Your description is vague, even without the "(not exactly)" part.)


O.k. I'll use HTML if that makes you more comfortable. Still I don't
understand what you need me more to explain, what "real world"
examples you need. It is a generic CSS question and I don't see any
difference if I use HTML or XML. See my last comment.
With IE and HTML I've noticed some weird behavior were default block
elements (like H1, DIV, etc.) if made 'display: inline' appear
adjacent ignoring the white space between elements:


Maybe, but why would you make consecutive h1 and h2 elements appear inline?


Just an example: If I have a document where there's no content
between the H1 and H2 elements and I want the headings to appear
like that:

<H1>: <H2>

I would use this style:

h1, h2 { display: inline; font-size: 1.4em }
h1:after { content: ": " }

Does it make sense?
On the technical side, setting just
h1, h2 { display: inline }
does not override the settings of other properties for those elements in
different style sheets, including browser style sheet. This is one reason
why the description of the situation is rather vague.


Other properties are no of particular interest. This came as really
separate issue during my experiments.
And your original question was very different.


I'll try to construct a "real" example:

<html>
<ul>
<li>
<span class="name">Mania</span>
<span class="attr">&#x263B;</span>
<span class="attr">&#x2640;</span>
<span class="attr">&#x2663;</span>
<span class="rank">7</span>
</li>
<li>
<span class="name">Zeus</span>
<span class="attr">&#x266B;</span>
<span class="rank">9</span>
</li>
<li>
<span class="name">Shrek</span>
<span class="attr">&#x266A;</span>
<span class="attr">&#x263A;</span>
<span class="rank">2</span>
</li>
</ul>
</html>

So it is a list of items which have 'name', 'rank' and some 'attr'
(attributes). I want the attributes to appear adjacent
(ignoring/stripping/whatever white space between). Probably it isn't
possible using the CSS current state. I wonder if there's anything
targeting this in the current CSS3 drafts.

--
Stanimir

Jul 20 '05 #14

P: n/a
Stanimir Stamenkov <s7****@netscape.net> wrote:
It is really nothing "real" that I'm currently working on.
Then you can hardly expect "real" answers either.
O.k. I'll use HTML if that makes you more comfortable.
Look, this was _your_ problem. It is in your interests then to present the
problem concisely, consistently, and simply.
Still I don't
understand what you need me more to explain, what "real world"
examples you need.
Well, if it isn't a real world problem, then what is it?
It is a generic CSS question and I don't see any
difference if I use HTML or XML.
There is a huge difference. For HTML, CSS suggests presentational features
to be applied, upon the user's and browser's discretion, along with the
default rendering rules. For XML, CSS describes a presentation for a
document, and CSS is basically alone here - it starts from the scratch, so
to say.
Just an example: If I have a document where there's no content
between the H1 and H2 elements and I want the headings to appear
like that:

<H1>: <H2>
Then you have probably misunderstood the meanings of H1 and H2 elements.
They are headings of different levels, not a single heading with parts of
different importance.

A better example might be H2 followed by P. In small documents, the author
might prefer the idea of presenting the heading in bold face at the start of
the paragraph.
I would use this style:

h1, h2 { display: inline; font-size: 1.4em }
h1:after { content: ": " }

Does it make sense?
Not much, partly since you cannot rely on the :after and content constructs
(they are not supported by most browsers, counted by frequency of use) but,
for this particular element combination, mainly for logical reasons.
Other properties are no of particular interest.
They are if you use HTML.
I'll try to construct a "real" example:
It doesn't look very real to me. And maybe it is actually tabular
information and should be presented as table. But anyway, what is your CSS
problem with it?
I want the attributes to appear adjacent
(ignoring/stripping/whatever white space between).


So you have written whitespace between elements in HTML, and now you are
asking how to have it ignored in CSS? The question arises why you don't stop
creating the problem. Whitespace between inline elements is significant by
HTML rules (though collapsible, i.e. the amount and type of whitespace is
not significant) - why would you want to change this in CSS?

No, there is no direct way in CSS to tell that whitespace content be
ignored. It's arguable whether CSS ever _should_ have such features.
If your <span> elements contain data that should be separated by whitespace
from surrounding data in normal CSS-less presentation, put some whitespace
between them. If not, don't. Simple as that. You can always use CSS to
suggest _adding_ some spacing in the latter case.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #15

P: n/a
Jukka K. Korpela wrote:
No, there is no direct way in CSS to tell that whitespace content be
ignored. It's arguable whether CSS ever _should_ have such features.


That's what I wanted to discuss. I think CSS _should_ have such
feature but I'm not sure if it worths to continue this discussion.

--
Best Regards,
Stanimir

Jul 20 '05 #16

P: n/a
*Stanimir Stamenkov* <s7****@netscape.net>:
Jukka K. Korpela wrote:
No, there is no direct way in CSS to tell that whitespace content be
ignored. It's arguable whether CSS ever _should_ have such features.


I think CSS _should_ have such feature


See <http://www.w3.org/TR/css3-text/#text-wrapping>.
There you'll also see some of the illest named values ever considered for
CSS properties.

--
Useless Fact #6:
In most advertisements, including newspapers, the time displayed on a watch is
10:10.
Jul 20 '05 #17

P: n/a
Christoph Paeper wrote:
See <http://www.w3.org/TR/css3-text/#text-wrapping>.
There you'll also see some of the illest named values ever considered for
CSS properties.


Thanks for the pointer. Seems that's what I needed to know... and
really, the value names are really funny. :-)

--
Stanimir

Jul 20 '05 #18

This discussion thread is closed

Replies have been disabled for this discussion.