Cómo alinear texto con una imagen diagonal

Un cliente de OSTraining solicitó una forma de alinear el texto junto a una imagen en diagonal, manteniendo el espacio entre ambos elementos.

Mi primer pensamiento fue agregar líneas de corte en puntos específicos del texto, sin embargo, eso no funcionó porque el sitio respondía.

Después de hablar con el cliente, se nos ocurrió una solución más elegante...

el caso de uso

En este ejemplo, el texto debe estar alineado a la izquierda y la imagen a la derecha. El verdadero desafío aquí es que el texto no debe superponerse a la imagen. El resultado que queremos se muestra a continuación:

La solución

Podemos agregar divisiones vacías que flotan a la derecha con valores de ancho dinámico para forzar que el texto no se superponga a la imagen. Tenga en cuenta que en este ejemplo, la imagen se agrega como fondo con CSS.

el html

El HTML para este ejemplo se ve de esta manera:

 <div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <p>A buch of dummy text goes here...</p> </div>

Puede notar los múltiples divs vacíos con clase de espaciado . Esos elementos en combinación con algo de CSS generan el espacio entre el texto y la imagen.

El número de divisiones de espaciado es igual al número de líneas de texto necesarias para llenar la altura de la imagen. En este ejemplo, la imagen debe cubrirse con 14 líneas.

el css

Dividiré el CSS requerido en varias partes para una mejor explicación.

 #container {  background-image: url(bg.png);  background-repeat: no-repeat;  background-position: right top;  background-size: 300px auto;  min-height: 300px; }

Define la imagen como fondo con una posición y tamaño específicos.

 #container p {  line-height: 22px;  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;  font-size: 14px; }

El selector p #container hace referencia al texto. Es muy importante definir el tamaño de fuente y la altura de línea para calcular los valores de otras propiedades más adelante.

 .spacing {  float: right;  clear: right;  height: 22px; }

Esta propiedad le dice a los divs vacíos que floten a la derecha. Tenga en cuenta que el valor de altura es el mismo que usamos para la altura de línea en los párrafos.

 .spacing:nth-child(1) {  width: 305px; } .spacing:nth-child(2) {  width: 283px; } .spacing:nth-child(3) {  width: 261px; } .spacing:nth-child(4) {  width: 239px; } .spacing:nth-child(5) {  width: 217px; } .spacing:nth-child(6) {  width: 195px; } .spacing:nth-child(7) {  width: 173px; } .spacing:nth-child(8) {  width: 151px; } .spacing:nth-child(9) {  width: 129px; } .spacing:nth-child(10) {  width: 107px; } .spacing:nth-child(11) {  width: 85px; } .spacing:nth-child(12) {  width: 63px; } .spacing:nth-child(13) {  width: 41px; } .spacing:nth-child(14) {  width: 19px; }

El código anterior es la parte divertida que puede requerir el uso de una calculadora.

El valor de ancho elegido para .spacing:nth-child(1) se aplicará al primer div con clase de espaciado, de la misma manera .spacing:nth-child(2) define un ancho ligeramente menor y así sucesivamente hasta que alcanza el elemento de espaciado numero 14

La razón para definir valores dinámicos de mayor a menor para cada div vacío a la derecha hace posible mantener el texto alineado a la izquierda sin superponer la imagen.

Dicho esto, ¿cómo podemos calcular el ancho de cada uno de esos divs vacíos? La respuesta requiere una pequeña fórmula basada en los valores de:

• altura de línea para el texto (22px en mi ejemplo)
• tamaño de fondo (300px en este ejemplo)

El ancho del primer div vacío es de 305 px, que es el valor del ancho del fondo definido más 5 píxeles adicionales que decidí incluir para evitar que el texto esté demasiado cerca del borde de la imagen.

Soporte receptivo

Usando el código de ejemplo, el diseño funcionará bien en cualquier tamaño de pantalla. Eche un vistazo a la demostración y cambie el tamaño del navegador para verlo en acción.

Ver una demostración

Bono: MENOS

Una alternativa a ir directamente a CSS es LESS. Tenemos un tutorial si eres nuevo en LESS.

Puede generar el mismo resultado usando LESS para crear dinámicamente los valores de ancho múltiple para cada div con clase de espaciado fácilmente sin preocuparse por las matemáticas.

 @textHeight: 22px; @backgroundWidth: 300px; @extraSpacing: 5px; @initialWidth: @backgroundWidth + @extraSpacing; @textLines: @backgroundWidth / @textHeight;

Decide la altura del texto y el ancho del fondo a través de las variables.

 #container {    background-image: url(bg.png);    background-repeat: no-repeat;    background-position: right top;    background-size: @backgroundWidth auto;    min-height: @backgroundWidth; }

Las propiedades del contenedor.

 #container p {    line-height: @textHeight;    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;    font-size: @textHeight - 8; } .spacing {    float: right;    clear: right;    height: @textHeight; }

Las propiedades de texto y espaciado se calculan dinámicamente en función de algunas variables.

 .generate-spacing(@i, @end) when (@i <= @end) {    .spacing:nth-child(@{i}) {        width: @initialWidth - ((@i - 1) * @textHeight);    }    .generate-spacing((@i + 1), @end); } .generate-spacing(1, @textLines);

El ciclo que genera el ancho dinámico para todos los divs vacíos.

Prueba este código en Codepen