First, what the article is about. The Internet is full of articles on layouts and programming. Many authors choose to include code snippets on top of text and images. The code in those snippets is formatted one way or another. To make their life easier the authors use various tools like Source Code Highlighter or alike. Everything seems good – the syntax is highlighted, the tabulation is in place, lines are numbered. Yet all such utilities have one bid disadvantage that makes life difficult: tabulation replaces all symbols in the code with spaces. And since most layout editors and programmers use tabs for indentation – copying the snippet into the source code requires additional effort to fix the code hierarchy.

Noting the above, the topic of this article can be rephrased: how to format code in such a manner that copy-pasting it would keep the tab-ed indentation that most people are used to.

The first thought that came to mind would be to use the css attribute white-space with ‘pre’ as a parameter. Any tag with such augmentation will act like <pre>, it will keep the tab symbols, carriage returns and consequent spaces. This approach, however failed on the very first test. Surprisingly the failure occurred not in IE, as usual, but in Firefox. Even though it displays everything correctly copy/pasting from it produces text not only with spaces instead of tabs but also with missing carriage returns. As it turned out, this bug has been known for a long time.

At the same time the <pre> tag works perfectly fine in Firefox, but there’s a new problem: for reasons unknown to the author the tab symbols in <pre> become twice as long. While this issue is resolved in Firefox by adding the inline attribute to <pre>, Safari and Chrome insist on drawing the elongated indentations.

The solution

An elegant solution came as a result of many experiments. In essence – the indentation is displayed with the padding attribute and the tabs are wrapped into containers of zero length. In this way everything is displayed beautifully and upon copy/pasting the text the “hidden” tabs are copied with it.

Here’s an example:

HTML

1. <div class="cont">
2. <pre><span class="cs">function</span>(){
3. <span class="pb"><span class="tab"> </span><span class="cs">if</span>(i == 0){
4. <span class="pb"><span class="tab"> </span><span class="tab"> </span>some code here
5. <span class="tab"> </span><span class="tab"> </span>some other code here</span>
6. <span class="tab"> </span>}</span>
7. }</pre>
8. </div>

CSS

1. * {
2. margin: 0;
3. padding: 0;
4. }
5.  
6. .cont {
7. margin: 100px;
8. } <
9.  
10. .pb {
11. border-left: 1px dotted #ccc;
12. padding-left: 40px;
13. display: inline-block;
14. white-space: pre;
15. }
16.  
17. .cs {
18. color: #000090;
19. font-style: italic;
20. font-weight: bold;
21. }
22.  
23. .tab {
24.  display: inline-block;
25. white-space: pre;
26. width: 0;
27. //overflow: hidden;
28. }

More on the subject

Even though the code is inside the <pre> tag, IE6 requires to additionally requires setting white-space: pre for .tab and .pb classes. The same IE6 also requires overflow: hidden, otherwize width: 0 does not work.

The debates on what’s better – tabs or spaces with probably never seize as there are plenty of followers of either approach to indentation. The ideal source formatting and highlighting utility must have an option to chose the indentation type. Maybe someone who reads this article will decide to write this ideal source code formatting and highlighting utility.