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.

Answer 2

Like this: http://codepen.io/anon/pen/GZLMjG

Use two DIVs, float them both left, with width: auto;. Put the text that's supposed to be on the left side into the first DIV, the rest into the second one. Use <br> tags to get the line breaks in the second DIV.

(The surrounding DIV in my codepen wouldn't be necessary, that's only to make it look nicer.)

P.S.: I put a   at the end of the first text part to keep the space after that word.

Answer 3

You can put whole aligned text in inline-block element and give it vertical-align:text-top;.

span.pre {
   display: inline-block;
   vertical-align: text-top;
 }

<p>« ... just <span class="pre">some random text. This<br>
is just some random text.<br>
This is just some random<br>
text. This is just random. »</span> 
</p>

EDIT: In Firefox vertical-align:top; seems to be working for me.

span.pre {
       display: inline-block;
       vertical-align: top;
     }

<p>« ... just <span class="pre">some random text. This<br>
    is just some random text.<br>
    This is just some random<br>
    text. This is just random. »</span> 
    </p>

This two values are defined differently, but I have no explanation why Chrome renders them in the same way and Firefox not:

top: Align the top of the element and its descendants with the top of the entire line.

text-top: Aligns the top of the element with the top of the parent element's font.

Answer 4

The flexible and easiest way is using before pseudo but if you need to make it dynamically you can accomplish that with a little JS code, style your paragraph with position relative and put your before text in span inside it and give it position absolute, then give it's left position based on it's width, so if span width = 50 then left position would be -50 and some px to make space between it and the paragraph https://jsfiddle.net/qhdxedxo/

$(document).ready(function () {

  var cont            = $('.cont');
  var contWidth       = $('.cont').width();
  var before          = $('.before');
  var beforeWidth     = before.width();
  var paragraph       = cont.find('p');

  cont.css({
    paddingLeft: beforeWidth
  });

  before.css({
    left: - beforeWidth - 5
  });

});

.cont {
  padding-left: 50px;
  padding-top: 20px;
  width: 300px;
  height: 400px;
  background-color: #eee;

}

p {
  display: block;
  position: relative;
  background-color: #eee;
  width: 80%;
  float: right
}

.before {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="cont">
  <p>
    <span class="before">« ...</span>
    Just some random text. This
    is just some random text.
    This is just some random
    text. This is just random
    is just some random
    text. This is just random. »</p>
</div>