How can I align code in code listings in HTML?

Question

I would like to have a code listing with alignment in HTML. This is an example of how it is supposed to look:

In this example, the beginning of the second line is aligned with the beginning of the last line, the parentheses before “url”, “method” and “parameters” are aligned, and the columns of symbols starting with colons are aligned. The distance from “url” to “:reader” and the like is supposed to be one text space. The distance between the two parentheses at the beginning of the second line is supposed to be zero, but one text space is acceptable.

How can I have that in HTML? Here are my ideas:

• Tables seem obvious here, but the HTML code would be hard to read if they were used because they would be nested and inline. This is the best that I could do. The code is ugly and the vertical alignment of the parenthesis on the second line is off.

• Custom tabstops would solve it, but I don't know that HTML would have such thing. Does HTML have custom tabstops, that I can mark a position in the text, and all tabs associated with it would horizontally extend to that mark? It would be like tabstops in Word or a similar text processor, but with the tabstop positions calculated based on the text, not manually placed. This could be hacked somehow, like that a dummy element would be placed at the point of alignment, and the alignment would be done with an element with the width calculated by some Javascript as the difference in the coordinates X of that element and the dummy element.

• The code is in a proportional typeface, so alignment with spaces isn't viable.

Which solution is the most viable? is there a cleaner solution that I missed?

Answer 1

Some ideas.

1. Whitespaces is indeed viable because they would be at the beginning of the line, so all whitespace would be equal. In fact, one option is to simply use a pre tag, and it takes into account those initial whitespace (or tabs). I am not sure how the code tag use them. I will check it later.

2. The idea of using tables is scary, it implies a lot of work. Unless you simply work with Excell, and export the table. If someone needs to copy the code, there is a chance they will have a mess.

3. One option could be nested lists.

In red I have what it seems to be the main ul

The green could be the child of the first li, and then define a margin-left for that series. Something like

li:first-child>ul {margin-left: 1em;}

In blue, the child of the second li

li:nth-child(2)>ul {margin-left: 2em;}

That is if I interpreted your hierarchy correctly.

---

For your second option "Custom tabstops" you could add a class.

p class="T1"
p class="T1"
p class="T2"
p class="T2"

And add, again a margin-left or padding-left

.T1 padding-left: 1em
.T2 padding-left: 2em