Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change tab spaces length in CSS

  1. I need change the default behavior of tabs (\t key) of 8 spaces to 4 spaces via CSS. Is it possible?

  2. 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.

like image 868
David Rodrigues Avatar asked May 17 '26 15:05

David Rodrigues


2 Answers

div,p,span,textarea {
   -tab-size     : 3;
   -o-tab-size   : 3;
   -moz-tab-size : 3;
}
like image 160
vol7ron Avatar answered May 20 '26 06:05

vol7ron


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));
like image 27
leepowers Avatar answered May 20 '26 04:05

leepowers



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!