Home  >  Article  >  Web Front-end  >  How can I left-align text along a slanted line in IE9 ?

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

Patricia Arquette
Patricia ArquetteOriginal
2024-11-02 08:41:02754browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn