Tabs vs Spaces for formatting

[Almost]

There was some confusion in the shoutbox about formatting with tabs and spaces, namely: “Why does it look fine on my computer, but look like shit on github?”

The answer is in the difference between tabs and spaces.

Part 1 - Tabs vs Spaces

In a monospaced font, a space character is exactly 1 character in width.
In a monospaced font, a tab character’s width is defined by whatever is rendering it.

It is common for a tab character to have a width of 4 characters, but 3, 6, and 8 show up on occasion.

For example, this markdown and the gist below it are using the exact same text:

    Hello - 4 spaces
	Hello - 1 tab

https://gist.github.com/Kern--/52be2592e8517d6b7625 (Sorry -- become – outside of quotes)

You’ll notice that the top line looks the same in both places, but the line below it is aligned on the forum, but not aligned in the gist. That’s because the forum uses 4 character wide tabs but the gist uses 8 character wide tabs.

Part 2 - Why are tabs stupid?

You may be thinking “why would you want tabs to render differently? Why isn’t there a standard width?”

The answer is because people have preference. Lets say you think everything should be indented 6 spaces and your reaction is “6 spaces?!? Are you fucking out of your mind? 3 spaces is the perfect indentation!”

If I go out and use 6 spaces, while you’re using 3, our code would look terrible and inconsistent and no one is happy. If we both agreed to use tab characters, I can set my editor to display tabs as 6 characters, and you can set yours as 3 characters. Then, we each see indentation how we want and even if we both look at a computer that’s using 8 characters and think “This is the ugliest code ever”, at least the indentation is consistent.

So actually tabs aren’t stupid. They allow the look you want without causing inconsistency with other people’s look.

Part 3 - Text Editors FTL

At some point the idea that tabs are stupid came back. “Why does this look different here? Why aren’t we all seeing the code the same way? Minimizing differences between our view of the code is the only way we can be productive”

So let’s pretend we’ve agreed that tabs are dumb. We’ve all decided we can live with 4 spaces of indentation, but I’m a lazy computer scientist and that tab button was really convenient. :/ But wait! We’re not using tabs any more! So the tab button won’t be used, right? Why don’t we make the tab button insert 4 spaces?

Most text editors let you override tab to insert a specified number of spaces. That way, you can still use the tab button, but it will look the same for everyone.

In my opinion, this is a huge mistake. Especially if you’re using a number spaces corresponding to a common rendering of tab, it makes it easy to accidentally mix them.

E.G. on my computer, tab inserts 4 spaces. Then I switch computers and keep working, but I forgot to set the editor on this computer to replace tab characters. Well, if this editor renders tabs as 4 characters, it looks fine on my computer, but once I switch back to my old computer (which used 8 characters), I’ve got the same inconsistency issues I was trying to get rid of!

The “replace tab with x space characters” is a useful option for the lazy programmer, but it also pushes the issue into the background, making it easy to accidentally mix tabs back in.

Part 4 - Conclusions

There were a few things I wanted you to get out of this post:

1. The difference between tabs and spaces
2. Why people want to use tabs
3. Why people don’t want to use tabs
4. How text editors made the whole issue that much more confusing

What does this all mean for you?
Make sure you know whether the existing codebase is using tabs or spaces AND know whether your editor is replacing tab characters with spaces

Keep that in mind, and formatting issues should be easy to resolve. (P.S. the nodebb source uses tab characters)

I hope you guys got something out of this. <3 Almost