Invisibles Tab width of character


In other editors I’m used to have a wide character (em dash) representing a tab and while Atom has something like that, it doesn’t work quite how I’d expect it to work.

Currently, if you set an em dash in “Invisibles Tab” field and “Tab width” to 4 spaces, the em dash would be painted with the width of a single character. Here is a screenshot showing this:

Note that the em dash should have the width of 4 spaces.

Brackets fixed this in a really cool way, VIM has it also. This way, IMHO, should be how this should work. The “Invisibles Tab” setting has 2 field. The first field is for the character that should be used to fill the space of the tab. And the second field is for the character that should finish the drawing.

Practical examples of this setting:

Example A
First character: -
Second character: >
Result for 4 spaces: ---->

Example B
First character: -
Second character: -
Result for 4 spaces: ----



Hi @alexandernst,

I’m not sure if this is what you’re looking for, but I made a small fiddle to show how to make something alike using only css:

The reference markup is what I get with soft-tabs turned off and with 4 spaces tabs length. There’s probably many tweaking to do to adjust it to your use case and taste (for instance I purposely used a longer string in the indent-guide after content in order to have a more generalist approach than just solving the 4 spaces tab case).

Let me know if it helped you.


Thank you, this helps me, but it keeps being a hack. It would be good if we could get this into Atom.


The whole point of Atom is that people can customize it to work how they like. The Atom team has stated that they’re more interested in enabling people to write the extensions they need than to necessarily make Atom encompass every possible configuration.

If this works for you, then Atom is doing its job as “the hackable editor”.


Indeed, I like the idea of DIY, but there must be some essential thing that Atom should support, or it will end up being just like Vim, which is completely unusable without tons and tons of plugins and hacks/customizations. And IMHO, this is something basic. I’m not asking for the next greatest hack that will allow auto-reloading Chrome or auto-complete C++, this is some basic styling.


Hrmm, so does this mean that I’ll have to find a css modification if I want to get my tabs to look like they do in ST3?

Is there not a character I can use to fill the width of a tab, no matter how many spaces I set my tab widths to be?

Is CSS the only way to make this happen in Atom?


As an alternative to showing a perfect tab width character (like how I posted in my last message) I’ve opted to use a space character (i.e., " ") which shows nothing for a tab. I think I can live with this as all I want to know is the difference between tabs and spaces for indentation.

Here’s example output:

So, now I can see spaces when they’re there and tabs are invisible. I think I can live with that, and it doesn’t feel so hacky.


Here is what I put on my stylesheet

atom-text-editor::shadow .hard-tab {
	text-decoration: line-through;
atom-text-editor::shadow .indent-guide {
	box-shadow: inset 1px 0 rgba(48, 64, 71, 0.2);

And here is the result: