Alinear texto en línea inclinada

¿Es posible hacer texto alineado a la izquierda en una línea inclinada ? su alineación debe seguir la imagen inclinada inclinada con soporte requerido para IE9 +?

Texto alineado a la izquierda contra forma inclinada

Mi código de ejemplo:

img { display: block; float: left; transform: rotate(-5deg); margin: 0 15px; } 
 
image

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.

Usando LESS

Ustedes me hicieron pensar un poco más fuera de la caja, así que salí con mi propia y fea solución. Mi idea es agregar un grupo de elementos cuadrados extra y calcular su tamaño :

 .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:

 

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.

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

@ chipChocolate.py , era solo una cuestión de principios NO usar JavaScript para esto. Si alguien quiere escribir el código JS / jQuery basado en mi solución, de nada. Por favor, compártelo aquí después.

ADVERTENCIA: la propiedad de forma externa no se debe usar en proyectos en vivo 1 . Esta respuesta está aquí solo para mostrar cómo se puede lograr el resultado deseado con esta propiedad.

Aquí hay un ejemplo que usa la propiedad shape-outside ( navegadores webkit modernos solamente ):

MANIFESTACIÓN

 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%); } 
 
image

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.

 img { display: block; float: left; transform: rotate(-5deg); margin: 0 15px; } p { transform: skew(6deg); font-style: italic; } 
 
image

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.

No puedo darte un ejemplo de código, esto es más complicado que una transformación oblicua.

Debe analizar el texto y el DOM relacionado que contiene y buscar cada nueva línea de texto (no br o \ n sino cada primer carácter de cada línea representada).

Con esta información, puede agregar un padding-left calculado a partir de la posición y la dimensión de las imágenes.