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?