0

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

code listing in a proportional font with alignment

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?

2
  • I'm sorry but HTML and CSS coding, and coding in general is off topic here. You can ask about website design and the general look and feel of a website, but code questions belong on Stack Overflow.
    – Billy Kerr
    Apr 11, 2022 at 22:43
  • I asked this on StackOverflow, and then I created a mostly good solution, an implementation of custom tabstops. Here it is.
    – matj1
    Apr 12, 2022 at 13:34

1 Answer 1

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

enter image description here

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
3
  • But if you ask: stackoverflow.com you will probably get different approaches, some probably with less work.
    – Rafael
    Apr 12, 2022 at 0:19
  • Whitespace alignment wouldn't be viable because there is alignment of symbols further in the line, like that all symbols marked green are aligned with the “:reader” on the second line. The problem with that, the solution with nested lists and others relying on finetuning is that the code could be displayed in a different font, which could have different widths of characters, which would mess the alignment up.
    – matj1
    Apr 12, 2022 at 11:28
  • Oh. I just saw the : on the first line. I did not notice them before.
    – Rafael
    Apr 12, 2022 at 20:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.