17

Is it posible to make text left aligned on a slanted line? it's alignement should follow the slanted slanted image with required support for IE9+?

Text left aligned against slanted shape

My example code :

img {
  display: block;
  float: left;
  transform: rotate(-5deg);
  margin: 0 15px;
}
<div>
  <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>
</div>
web-tiki
  • 99,765
  • 32
  • 217
  • 249
Tymek
  • 3,000
  • 1
  • 25
  • 46
  • 2
    Here is a good explanation of how this can be done in CSS ([link](http://www.html5rocks.com/en/tutorials/shapes/getting-started/)). Though [browser support is poor](http://caniuse.com/#feat=css-shapes) – Turnip Jan 10 '15 at 13:52

4 Answers4

18

Using LESS

You guys made me think a bit more outside of the box, so I came out with my own ugly solution. My idea is to add a bunch of extra square elements and calculate its size:

.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;
}

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>

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

@chipChocolate.py, it was just a matter of principle for me NOT to use JavaScript for this. If anyone wants to write JS/jQuery code based on my solution, you're welcome. Please share it here afterwards.

Tymek
  • 3,000
  • 1
  • 25
  • 46
  • Curious if you have a version which will also with with negative degrees (the mask would go from larger to smaller)? – Louis W Nov 16 '17 at 21:22
  • Try reversing `` order in HTML, or change calculations to `width: floor(@hSize-@i*@hSize/(1/tan(5deg)));`. That's the lazy version - I don't want to check trigonometry again. – Tymek Nov 17 '17 at 13:17
16

WARNING: The shape-outside property should not be used in live projects1. This answer is here just to show how the desired output can be achieved with this property.

Here is an example using the shape-outside property (modern webkit browsers only) :

DEMO

img {
  display: block;
  float: left;
  transform: rotate(-5deg);
  margin: 0 20px;
  -webkit-shape-outside: polygon(0 3%, 85% -3%, 100% 97%, 15% 103%);
  shape-outside: polygon(0 3%, 85% -3%, 100% 97%, 15% 103%);
}
<div>
  <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>
</div>

1The CSS Shapes Module Level 1 actually (mai 2016) has the status of "Candidate Recommendation". As this means it is a work in progress, it may change at any moment and therefore should not be used other than for testing.

The same layout could be achieved with the shape-inside property and specify a containing box for the text but no browser I know of supports this property today.

For a cross browser approach please see Tymek's answer.

Mark Amery
  • 143,130
  • 81
  • 406
  • 459
web-tiki
  • 99,765
  • 32
  • 217
  • 249
10

img {
  display: block;
  float: left;
  transform: rotate(-5deg);
  margin: 0 15px;
}
p {
  transform: skew(6deg);
  font-style: italic;
}
<div>
  <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>
</div>
Vitorino fernandes
  • 15,794
  • 3
  • 20
  • 39
  • 4
    Though that looks convincing, obviously the right had edge of the text is also skewed – Turnip Jan 10 '15 at 13:57
  • 3
    Good one but not reliable since it will only work for angle values less than 5 or 7 and the text will never look normal. – Weafs.py Jan 10 '15 at 13:59
3

I can't give you a code example, this is more complicated than a skew transform.

You must parse the text and the related DOM contained in it and look for each new lines of text (not br or \n but each first character of every rendered line).

With this information you can add a padding-left calculated from the images position and dimension.

Luca Colonnello
  • 1,416
  • 12
  • 11