August 25, 2005

CSS: changing the width of tab spacing

It's popular (and good markup) to format code on a website inside some pre and code tags. The former ensures that any whitespace within the contained markup is preserved and the latter tells the browser to render it as a code block (won't get into the semantics of it all here).

The problem is that within a website, horizontal space is usually at a premium and you don't really want to break your design because your nicely formatted code sample is too wide.

Standard tab-spacing in code is fairly wide when rendered in a browser, once the code samples get fairly nested they can quite easily take the full page width. What we want is a way of making the tabs take up less space but without losing the tabs or treating them as spaces. Ideally when the code is copied out of the browser the tabs should be preserved.

Here's a solution, it's not neat since it has to be done for every instance of a tab, but it makes the tabs take up less space and preserves the formatting for copying out of the browser (obviously replace "A SINGLE TAB HERE" with a real tab, this blog software automatically removes tabs from entries it seems):

<span style="display:none">A SINGLE TAB HERE</span><span style="margin-left:YOUR NEW TAB WIDTH"></span> 

Basically, replace every instance of a tab in your code with that code snippet (after choosing a suitable width, you could do it in a stylesheet pretty easily). The code artificially inserts the margin whilst keeping the original tab in the code ready for copy/pasting.

Here's a comparison when the left margin is set as 1em (it's an image i'm afraid, blog software again):

Working Example

The main flaw is that you may have to fiddle around a bit with the margin to get the fixed width font columns lining up correctly.

- No comments Not publicly viewable

Add a comment

You are not allowed to comment on this entry as it has restricted commenting permissions.


Blog archive



Feed Me


Not signed in
Sign in

Powered by BlogBuilder