Vertical Spacing

Posted 08/09/22, by Dan Vis

Starting in version 7.08, I've completely swapped out how vertical space is managed in BoltWire, and it involves pretty much ditching the longstanding <p> tag. Here's what is happening...

From the beginning, I've attempted to create intuitive vertical spacing in BoltWire and have been reasonably successful. When you enter line breaks into your text, they show up in the html. And for the most part, it's wysiwyg: what you see is what you get...

But it's never been perfect. Sometimes you have to fiddle with things a bit to get the exact vertical spacing you desire. Maybe add an extra <br> or use css to slightly shift the height of a table or div, or add some hardspaces to force a line break, etc. And the more you try and fine tune things the more you have to tweak other things to get it all to work together. It's not a huge issue, but it's one of those minor nuisances that keeps popping up now and then.

Well, today I was trying to improve the brains in BoltWire to solve an irritating detail related to this, and ended up deconstructing the whole vertical spacing process and rebuilding it. Turns out there was a far easier way to manage things, and so far it's giving pretty amazing results (both in the displayed output and in the underlying html). And while I may not have accounted for every possible markup or combination thereof, so far it's all working flawlessly--and producing beautiful, elegant code. And it's far simpler, meaning we could easily tweak things further if I did miss something.

There's one drawback however: I eliminated the <p> tag and switched to using a double <br> tag at the end of each line instead. I won't get into all the reasons, but essentially, forcibly inserting the <p> tag was the problem all along, because it was virtually impossible to tell when a line was a paragraph or something else--at least not in every case. And that ambiguity was really the root problem. Leading to more and more complex code, and flawed output. Using line breaks just solves the whole issue.

I went back through most of my main site and the display was pretty much identical. And wherever things were shifted one way or another, by the change, in editing the page, I found every time, it was caused by some jury-rigging fix that was no longer needed. Deleting those "tweaks", and everything fixed itself beautifully. In other words, the only problems were my complicated, time consuming, and hard to figure out, wonky, workarounds... :)

Anyway, I've decided to put this new approach into the core. I suspect it may cause some issues with html validation--and there may be accessibility implications--but I'm not really sure about either. And in every other way, it's just better.

I recognize, in some cases there may be a need for p tags so I'm planning to add some markup to manually indicate when a line of text should be wrapped in a paragraph tag. At the moment I'm thinking of a single "." at the beginning of a line of text would work nicely.

The change might also require a change in your css so the paragraph vspace and the line break vspace don't double up in your output. But that's easy enough.

On my site, I haven't found a single instance where the absence of <p> tag adversely affects the display, and the html is actually a lot more readable. And as usual, if you don't like the new approach--I'll be adding a plugin to the core for restoring the old behavior. Just put enableVspace in your site.config page, and everything will go back to the way it was. :)

So what do you think? The BoltWire site is running on this right now. Notice any changes? Any feedback on introducing this change? Are we being just a bit too much of a rebel?


Posted by Dan Vis on 08/17/20
For what it's worth, I made the jump. BoltWire is now running on 7.08 with the new vertical spacing system described above. Fortunately it was a pretty smooth transition for this site. Just a couple very minor adjustments to a few divs where I wanted a slight shift in vspacing from normal. Everything else is working pretty much perfect. In fact, I could hardly find an issue anywhere...

Still looking though... :)

But it's going to be a bit of a problem though, because to get everything to work like it's supposed to I had to update the code in several places--where I had also built in some minor tweaks to compensate. Which means switching between the old and new vspacing system is not a simple toggle. Because there's markup that has to be changed along with it...

On my main site, which has been running BoltWire for ages and has thousands of files, there are lots of small tweaks in the page content that have to gradually be ironed out too. The vast majority looks the same, but there are little things here and there. Inevitably, I just have to undo some tweak I did before to fix the issue. Which at least gives me some confidence this is the right direction to go.

Not sure when I'll release this version publically as I want to test it some, but I think I'm too far into this to turn back now...

Join Us

To read more posts, or to leave a comment, join our FREE community...