Can you keep a secret?

Explore

Templates

The Glorious Spacer GIF

Don't knock it 'til you've tried it...

VAR Spacer GIF:

https://img.spacergif.org/v1/spacer.gif

⁠

A spacer gif is a 1px x 1px transparent GIF image. Used with Coda’s Image() formula, it’s my knight in shining armor when it comes to fixing ANY alignment issues in Coda. Although you can use it in a number of ways, there is one use-case which it’s perfect for, which nothing else will fix:

Pushing a row of text down.

I know that doesn’t sound glamorous, but it’s a god-sent if you’ve got a design eye. How this works, is that in Coda, images, text, buttons, and pretty-much anything else is all vertically-aligned to the baseline of the text.

⁠

How to Use:

This page just provides a Canvas Formula for the URL of an online spacer gif image. You use this with Coda’s Image() formula and specify a width and height in pixels. To use it as I’ve mentioned above (to move a row of text down), Concatenate() the Image() with the relevant text.

Image(Var Spacer GIF, 1, 30)

⁠

Example Code

Without

⁠

With Spacer GIF

👆 This toggle will update the preview on the right, and the sample code beneath it.

⁠

Here we need to align a profile picture with some text.

We use Coda’s Card() formula to place the items alongside each other.

We want to vertically center-align the text with the image, so we Concatenate() the Spacer GIF with the text

⁠
⁠ ⁠ Jono Bouwmeester
⁠

⁠

⁠ ⁠ ⁠ Card( Image("profile-pic.jpg", 50, 50), Concatenate( 👉 Image(VAR Spacer GIF, 1, 30), 👈 _Bold("Jono"), " Bouwmeester" ) )

⁠

The Before and After

Let’s compare the layout differences before and after implementation. I know this may not be a big deal to everyone. Perhaps the changes are small enough for most people not to be bothered. For me, this is something that would annoy me if I had to see it every day, and it gives the impression that I was rushed or don’t care enough to try and fix it.

For me, fixing something like this is the difference between “good” and “excellent”, which is one of the ways I show the people I build docs for that I genuinely care about them and the projects they’ve entrusted in my care. No shade at all to any fellow doc makers. I’m sure you’ll each find something in my docs that I haven’t got right and that would annoy you too.

⁠

Without Spacer GIF

Before

Here’s the alignment before we used the Spacer GIF:

The “Jono Bobo” isn’t aligned well with the pic

The padding at the bottom of the grey block is not the same as the padding at the top.

Similarly, the padding at the top of the red block isn’t the same as the bottom

⁠

With Spacer Gif

After

Look how gloriously well balanced everything is!

The “Jono Bobo” name is vertically centered with the profile pic.

The padding at the top, left and bottom of the profile pic is equidistant.

The padding above “Email.” is the same as the padding below “Mobile.”

⁠

Concatenate(), Card() and Spacer GIF

(Click an image to zoom in, if you need to)

⁠

Here we have Concatenate()ed an image, some text, and some buttons.

You’ll see they’re all aligned to the baseline of the text. Something that Coda did which is really nice, is align buttons such that their LABEL TEXT is used to align, rather than the edge of the button itself. This is great because putting buttons alongside text ends up aligning well without an effort.

⁠

Here instead of using Concatenate(), we’re using the Card() hidden formula. What it does is draw an invisible HTML Table with one table row <tr> and each parameter is drawn inside a <td>. It’s really handy, and I really hope they don’t depreciate the formula!!! With Card(), elements are aligned to the top of the row.

⁠

Here where the spacer GIF comes in handy. I’m still using Card(), but when I need to move elements down, I include an Image() and set the height to whatever I need.

Here’s a diagram of what I mean - the blue squares show where the spacer gifs are:

⁠

They work because, as we’ve said:

Card() aligns each item to the TOP

Then Concatenate() aligns each item to the text baseline. The Image() pushes the text and button’s baselines down to wherever we need them to be.

Here’s the formula in question, so you can check it out:

⁠

⁠ ⁠ Some text ⁠ ⁠ ⁠ Enlarge ⁠ Random Quote ⁠

⁠

Previously I used the Rectangle() formula, but for some reason it’s recently changed the way it’s vertically aligned. As of recently, rectangles align to the TOP of the text it’s Concatenate()ed with:

⁠

⁠ Some Text

⁠

Contact Card Demo

Here’s a real-life demo of the contact card we overviewed earlier. Click on a card to edit it. You’ll notice there’s a checkbox which enables/disables the Spacer GIF so you can compare the two renderings.

Using Spacer GIF

⁠

⁠
⁠
Jono Bobo

⁠

Email.

Mobile.

⁠

jonobobo@gmail.com

072 113 9096

NOT Using Spacer GIF

⁠

Kalem Baker

Email.

Mobile.

kalembaker@gmail.com

072 353 7266

⁠

Spacer GIF Code

Spacer GIF Code

⁠

Gallery

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.