Change tab spaces length in CSS

Question

I need change the default behavior of tabs (\t key) of 8 spaces to 4 spaces via CSS. Is it possible?
If not, I can simulate it with javascript? There are some library or method to do it?

Example

From:

[tabtab][tabtab][tabtab]Hello World
[tabtab]  Hey!

Change to:

[tb][tb][tb]Hello World
[tb]  Hey!

Edit

Note that: if I have 1 to 3 character before a tab character, the tab will make only 1 space, instead of 4.

H[tabtb]ello World! --will be--
H[t]ello World!

Another example, without [tab] pseudo-key:

TAB GRID
---4---8---4---8-...

H       ello World (1 tab key after H = 7 spaces, instead of 8) --will be--
H   ello World (1 tab key sized 4 will be 3 spaces because of H)

He      llo World
He  llo World

Hel     lo World
Hel lo World

Hell    o World
Hell    o World*

* This example will not remove the that, just send to next block.

Edit 2

I post an issue to Chrome: read here.

Duplicate? http://stackoverflow.com/questions/667200/specifying-tab-width — Mikko Ohtamaa, Jan 08 '12 at 23:34
Note that tabs are set to a distance, whereas spaces are proportional depending on the font. About the only use for spaces instead of tabs is for programers (and other die-hard users of plain text documents in a mono-spaced font). You should really be using a span set to a specific width, or a div or p with margin or padding set, to emulate a tab. — RobG, Jan 09 '12 at 00:27
@MikkoOhtamaa 1/2 duplicate... The other post want CSS property, I want CSS or JS mode. :) — David Rodrigues, Jan 09 '12 at 14:35
You use `[tabtab]`, `[tb]`, `[tabtb]`, and `[t]` and I still have no idea what you are talking about. If those are all the same thing, I recommend just `\t` will do. — vol7ron, Jan 09 '12 at 14:37
Which context is this in? I mean, it's clear that the CSS `tab-size` property doesn't do the work for you, so what kind of environment are we looking at here? — Mr Lister, Jan 09 '12 at 14:47
@vol7ron my guess is he means an 8-space tab with [tabtab] and a 4-space tab with [tb]. His last edit doesn't make sense to me either though. — Mr Lister, Jan 09 '12 at 15:14
@vol7ron @MrLister you're right! The last edit mean that the TAB character uses 3 spaces instead of 4, because the 1st is the `H` character :) — David Rodrigues, Jan 09 '12 at 15:18
@DavidRodrigues I think your edit is a little confusing. If I understand it correctly, you're also asking for a conditional tab length. Is that based on the 1-3 character before the tab? I guess it might be helpful to see the source document, or an example of what you're actually doing. My guess is this is something that could be much easier to handle in JS than done with strictly CSS. — vol7ron, Jan 09 '12 at 16:38
@vol7ron Sure... It's complicate make an example with umprintable character, so I used [tab] *pseudo-key* to show. I updated the edit again with better examples, using spaces only, simulating tabs ;) — David Rodrigues, Jan 09 '12 at 17:58
@DavidRodrigues the difficulty wasn't in your description but seeing where the input was coming from and how you're outputting it. — vol7ron, Jan 09 '12 at 18:14

score 4 · Accepted Answer · answered Jan 09 '12 at 15:01

4

div,p,span,textarea {
   -tab-size     : 3;
   -o-tab-size   : 3;
   -moz-tab-size : 3;
}

answered Jan 09 '12 at 15:01

vol7ron

40,809
21
119
172

Well, I need exactly what you suggest here. But it doesn't works on Chrome, currently. I need a JS solution for that. The @powers1 solutions is good, but is *bugged* ([see this example](http://jsfiddle.net/Fgypn/1/)). – David Rodrigues Jan 10 '12 at 02:13
in chrome use without the prefix `tab-size: 3;` – Savrige Feb 21 '20 at 13:03

score 2 · Answer 2 · answered Jan 09 '12 at 00:00

It can be done in JavaScript by converting tabs to spaces, with you controlling the number of spaces per tab. Used in conjunction with a white-space style would make it work.

The JavaScript would look something like this:

function tabs2spaces(str, spaces) {
  return str.toString().replace(/\t/g, (new Array(spaces+1)).join(' '));
}
alert(tabs2spaces("\thello world\there\twe\tgo", 4));

Change tab spaces length in CSS

2 Answers2