Search code examples
htmlwhitespacepadding

Html character misalignment while padding with whitesapce

I'm trying to show an alignment of some protein subsequences in a simple HTML document printing the characters in constant width Courier typeface .

However left padding with space '&nbsp' is involved and there is a misalignment of characters, particularly when there is a long stretch of padding characters.

enter image description here

I guess this arises because of difference in width of the whitespace and when I pad with some other character like "X", it gets perfectly aligned.

I would like to pad with spaces for better appearance of the document. Can anybody suggest some simple HTML solution?

Solution

  • You probably want to use a "mono" font so that all char have the same width.

    For that, you can check the "font-family" CSS property: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family.

    For example:

    body {
 font-family: monospace;
}