Question

I have the following code to generate some spans using cakephp’s helper

<div id="numberRow">
    <?php echo $this->Paginator->numbers(array('class' => 'numbers', 'separator' => '', 'before' => '', 'after' => '', 'first' => 1, 'last' => 1)); ?>
</div>

This generates the following code:

<div id="numberRow">
    <span class="current">1</span><span><a href="/posts/show/barter/page:2" class="numbers">2</a></span>
</div>

The problem is that the browser renders a space after the <span> which I do not want.

My solution so far is to write the cake as follows:

<div id="numberRow">
            <span class="current">1</span><span><a href="/posts/show/barter/page:2" class="numbers">2</a></span></div>

with the closing tag on the same row as the <span> but that breaks up the format and makes the source harder to read.

Is there a better way?

Answer 1

Good news! There is a CSS style which is aimed at solving this exact problem. It’s called white-space-collapse, and it looks like this in your stylesheet:

#numberRow {white-space-collapse: discard;}

In browsers which support it, this will cause white space between tags within the <div> to be dropped if there aren’t any other characters around them.

Now for the bad news… there isn’t a single browser which supports it yet. 🙁

The faster moving browsers will probably support it very soon — I’d be willing to bet it’ll be in Chrome at least by the end of the year — but that’s not going to be enough support to make it worth using for some time to come.

In the meanwhile, this is a common problem which plagues a lot of site designers.

The most common solution is simply to remove the white spaces from your source code, as per the example you gave in the question. Its not ideal, but it does solve the problem, and without any messy hacks.

If you’re determined to keep your source code tidy (or you simply can’t avoid it due to a framework you’re using, or whatever), there are a few more hacky solutions:

First is to use a Javascript string replacement when the page loads to trim out the unwanted spaces. This is messy, but does work, except in the rare occasion when the user has disabled javascript. You may get some page refresh problems as it loads first with the one layout and then immediately resyncs itself to the correct layout, but it’ll probably be minimal (depending on the browser speed and the scale of the problem).

An even messier solution, but undoubtedly a clever hack, is to set font-size:0; for the parent element (in your case, the <div>), and then set font-size back to the correct size for the content elements. eg:

#numberRow {font-size:0;}
#numberRow>span {font-size:12px;}

(replacing ’12px’ with whatever size you happen to want them to be, of course)

The disadvantages of this are: Firstly, it’s a horrible hack; secondly, it’s a horrible hack; and thirdly, it can make your font sizing difficult to control if you’re using and em-based size layout rather than fixed pixel sized fonts. But it does work.

All in all, my recommendation is to go with the easy answer, and remove the spaces in your PHP code. At least until the proper CSS solution is in place in most people’s browsers.

Hope that helps.