How can I left-align text along a slanted line in IE9 ?

Aligning Text on a Slanted Line

Question:

Can text be left-aligned along a slanted line while following the angle of the slanted image and supporting IE9 ?

Solution:

Using LESS:

To achieve the desired alignment, you can add extra square elements and calculate their size using LESS:

<code class="less">.loop(@i) when (@i > 0){
  .loop((@i - 1));
  .space@{i}{
    width: floor(@i*@hSize/(1/tan(5deg)));
  }
}
@hSize: 15px;
.space {
  float: left;
  clear: left;
  width: @hSize;
  height: @hSize;
}</code>

HTML:

<code class="html"><p>
  <span class="space space1"></span>
  <span class="space space2"></span>
  <!-- (...) -->
  <span class="space space11"></span>
  Lorem ipsum ...
</p></code>

Proof of Concept:

http://codepen.io/Tymek/pen/jEypOX?editors=110

The above is the detailed content of How can I left-align text along a slanted line in IE9 ?. For more information, please follow other related articles on the PHP Chinese website!