Fixing the "2 space indent problem"


#1

Dear lord how I hate 2 space indent. I’d love to visually see 4 spaces when there are actually only two in the file. For those 2-space-indented files run across everywhere.

I brought up inspector on an editor and saw indentation is actually classed with a “leading-whitespace” class. Tried adding a new style:

.leading-whitespace {
    -webkit-transform: scale(2,1);
}

Doesn’t quite do what I want it to do, but … get the idea? stretch the whitespace by 2x.

It does change the spans, but they then overlap, and so nothing changes. Except for the indentation guides which are now TOTALLY screwed up.

Other idears?


#2

If you’re using indent guides, this is a quick hack to get some additional padding and keep the lines sync’d up:

.indent-guide {
  margin-right: 1em;
}

Probably not the best way, but it seems to work.


#3

There’s a Tab Length field at the bottom of the Settings menu that you can modify.


#4

thanks plbarnes; that actually seems to work, especially when I set the Tabs 2; at least for reading.

the cursor goes all wonky after that, not matching the actual insertion point

IT’S A START


#5

thanks thgaskell; along with the tip from plbarnes; this visually works, but as mentioned, cursor gets confused

I had assumed the Tab setting was just handling how many spaces to insert, but it also does change the indent guides, I guess by chunking the leading spaces by Tab settings value. Makes sense.

The other hack I was thinking about was finding/building a font with height <= the size of the normal font I use, but double-width whitespace characters. Atom seems to handle variable sized fonts ok, just set the base font to Helvetica and … wow :smile:


#6

Yeah I’m in the same boat. Want to keep the 2 spaces since that’s a good standard, but I’d love for them to appear a bit wider. Tried a few hacks but as you say the cursor goes a bit crazy.


#7

I’ve also been playing with this but having the same cursor issues. Has anyone had any luck here? :smiley:


#8

Any ideas how to make this work?


#9
.indent-guide {
  letter-spacing: .5em;
}

this will work.


#10

I recently started playing with this, and more, again. Here’s what I’m currently using:

.leading-whitespace, .trailing-whitespace {
    letter-spacing: 0.5em;
  }

Here’s the full set of things I’m playing with: https://gist.github.com/pmuellr/99caae1d3382afde2ee62fa1f9402acf


#12

Do a Find and Replace for " " to " " (2 spaces to 4 spaces) and then uses Tabs to Spaces to replaces spaces with tabs.