css - para - Alinear texto en línea inclinada

justificar un texto en bootstrap

Question

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

Mi code ejemplo:

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>

Answer 1

ADVERTENCIA: La propiedad de forma exterior no debe usarse en proyectos en vivo ¹ . 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 ( solo navegadores webkit modernos ):

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>

¹ _{El Módulo CSS Shapes Nivel 1 en realidad (mayo de 2016) tiene el estado de "Recomendación de candidato". Como esto significa que es un trabajo en progreso, puede cambiar en cualquier momento y, por lo tanto, no debe usarse más que para pruebas.}

Se podría lograr el mismo diseño con la propiedad de shape-inside y especificar un cuadro que contenga el texto, pero ningún navegador que conozca admite esta propiedad hoy.

Para un enfoque de navegador cruzado, consulte la respuesta de Tymek .

Answer 2

Usando MENOS

Ustedes me hicieron pensar un poco más fuera de la caja, así que salí con mi propia solución fea. Mi idea es agregar un montón de elementos cuadrados adicionales 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:

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

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

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

Answer 3

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

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 dimensión de las imágenes.

Answer 4

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>