Is it possible to align text horizontally by character?

Question

Say I have a text like this:

x = 2 / y a + b + c = x 

Is it possible through CSS (or perhaps other tricks) to align these lines so that they look like this?

  x = 2 / y a + b + c = x 

I suppose I could insert the left side into one column of the table, the = sign in the next and right side in the third, and then use the right, center and left alignment, but this is not particularly clean or semantically correct: p

Answer 1

Use the CSS text-align property to align text.
If you want to align by the number of spaces in the text, use white-space to save spaces in combination with a monospace font, Fiddle: http://jsfiddle.net/cCLZy/

 <style> .right-align { /*text-align: right;*/ white-space: pre; font-family: monospace; } </style> <!-- Spaces and newlines are preserved --> <div class="right-align"> x = 2 a + b + c = x </div> 

Answer 2

You always put text in a table. Allows you to align everything.

Answer 3

Well, this is a little disgusting, but hope this help: http://jsfiddle.net/7RgcY/1/

The trick, as you can see, is in the display: table-cell property. I set the width to 6 meters in the span tags, which can work for short sentences, but you have to set a “fixed” width to make it work.

Unfortunately, the code is not too clean ...

Answer 4

text-align:right ??

http://jsfiddle.net/Q42U4/

Answer 5

I have not tested this approach, it may need some tweaking, but it should work. If you want to align the same characters, you can do this:

 <style> .left { width: x; /*You have to give them width to make the effect of two columns*/ text-align: right; float: left; } .right { width: x; /*You have to give them width to make the effect of two columns*/ text-align: left; float: left; } .clr { clear: both; } /*Clear to keep next elements from floating too*/ </style> <div class="left"> <p>x = <br /> a + b + c =</p> </div> <div class="right"> <p>2 / y<br /> x</p> </div> <div class="clr"></div>