Home > Web Front-end > CSS Tutorial > Can text be left-aligned along a slanted line in IE9 ?

Can text be left-aligned along a slanted line in IE9 ?

Mary-Kate Olsen
Release: 2024-11-01 17:58:02
Original
382 people have browsed it

 Can text be left-aligned along a slanted line in IE9 ?

Align Text on Slanted Line

Can text be left aligned along a slanted line? The alignment should conform to the slanted shape, compatible with IE9 browsers.

Consider this code sample:

<code class="html"><img src="http://placehold.it/150x250&text=img" alt="image" />
<p>Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu,luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, paragraph.</p></code>
Copy after login
<code class="css">img {
  display: block;
  float: left;
  transform: rotate(-5deg);
  margin: 0 15px;
}</code>
Copy after login

Solution: Using LESS

Complementing the standard CSS approach, a more unconventional solution involves adding square elements and calculating their size:

<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>
Copy after login

With HTML as follows:

<code class="html"><p>
  <span class="space space1"></span>
  <span class="space space2"></span>
  <!-- (...) -->
  <span class="space space11"></span>
  Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, paragraph.
</p></code>
Copy after login

Proof of concept:

Here's a live example to demonstrate the solution in action: http://codepen.io/Tymek/pen/jEypOX?editors=110

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

source:php.cn
Statement of this Website
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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template