Aligning words in html

Question

[HTML]
What is the simplest solution (least amount of code) to align words when using non-monospace font ?

I need to achieve this:

 « ... Just some random text. This
       is just some random text.
       This is just some random
       text. This is just random. »

"is" should be exactly aligned with the word "just" above

 
What I tried so far:

(1) would be the solution, but doesn't work for me, seems deprecated:

text text text text <tab id=t1>target text<br>
<tab to=t1>Should be aligned with target.

(Adding quotes to "t1" in both lines doesn't make it work either.)

(2) negative indent for first line:

text-indent: -3em;

This works, but it's not an exact method, as I have to visually adjust the em number to make the alignment match. Plus: depending on the user's font and size, etc. the alignment won't necessarily match for the user.

Not finding a solution to simple problems drives me crazy :(

Answer 1

You can do this with dirty ::before hacks:

span.aligned {
  font-family: sans-serif;
  display: block;
  white-space: pre;
  position: relative;
  margin-left: 30px;
}

span.aligned::before {
  content: "« ...";
  position: absolute;
  left: -30px;
}

span.aligned::after {
  content: " »";
}

<span class="aligned">Just some random text. This
is just some random text.
This is just some random
text. This is just random.</span>

It requires you to hard-code the space you want between the < ... and the content, but it's pretty flexible beyond that small detail.