Ajuste de texto llenar-última-línea-primero

Tengo un diseño peculiar para una página web que tengo que implementar a partir de un diseño ya hecho, y algunas de las envolturas de texto se rellenan de abajo hacia arriba (en mi caso, es para texto delgado alineado en la parte inferior izquierda dentro de mosaicos cuadrados de colores, se ve mejor de lo que suena). Es decir, en un bloque de texto que abarca varias líneas, la línea inferior se rellena primero (horizontalmente), de modo que cualquier espacio horizontal restante después del ajuste se deja para la primera línea.

¿Es este un tipo conocido de ajuste de texto y cómo podría implementarlo en una página web sin agregar manualmente saltos de línea en el texto de origen? ¿O al menos podría nombrar esa "característica" para que pueda buscarla en Google?

Editar: por ejemplo, en el texto "Aquí está el enlace" si no hay suficiente espacio en una línea, entonces la línea debe representarse como "Aquí \n está el enlace" en lugar del estándar "Aquí está el \n enlace". , donde "\n" es un salto de línea.

¿Podrías agregar una imagen? No puedo imaginar que se vea bien.

Respuestas (2)

El efecto del que estás hablando se llama Alineación vertical , en este caso alineación vertical inferior. En aplicaciones de diseño como InDesign (pero no Illustrator sin piratear , gemir, gemir, gemir... ) hay un botón simple para ello.

En HTML/CSS, la alineación vertical no es tan simple . La alineación vertical para una celda de tabla es fácil, vertical-align: bottom;comienza el texto en la parte inferior como lo describe, pero fuera de las celdas de la tabla, la alineación vertical se refiere a cómo las imágenes y otros elementos en línea con altura se alinean con cada bloque de texto.

Sin embargo , puede forzar un div HTML (o cualquier elemento de bloque) para que tenga una alineación vertical, diciéndole que finja que es una celda de tabla con la regla CSS display: table-cell;(he visto a personas decir que tiene que ser algo que pretende ser una tabla, o que esto es de alguna manera una 'mala práctica': lo confundieron con tablas HTML normales, está bien así). Luego, puede agregar la regla CSS vertical-align: bottom;y funcionará.

Desafortunadamente, necesita una solución alternativa para que esto funcione en versiones anteriores de Internet Explorer que ignoran display: table-cell;, y puede ser complicado hacer que esto funcione donde floatestán involucrados CSS, que se usa comúnmente para cuadros en una línea o columnas ( table-celllos no float): una cuadrícula de mosaicos como se describe en la pregunta seguramente usará float.

Aquí hay un ejemplo editable en vivo reducido en el sitio JSbin que demuestra cómo hacer que funcione en todas partes, incluidas las versiones antiguas de IE, incluso en mosaicos flotantes. Presione el botón 'Editar en JSbin' para ver el código y jugar con él: hay muchos comentarios de código que explican qué es esencial y qué es opcional.

El principio básico: usar envoltorios y un truco alternativo para Internet Explorer con un position: absolute;envoltorio y position: relative;contenido.

(el cuadro gris aleatorio es IE7 arruinando el botón de edición de JSbin...)

ingrese la descripción de la imagen aquí

El ejemplo más simple de alineación inferior que funciona en el viejo IE es este HTML:

<!--[if lte IE 7]><div class="old-ie"><![endif]-->

<div class="bottom wrapper">
<div class="content">
 This text is bottom aligned
</div>
</div>

<div class="middle wrapper">
<div class="content">
 This text is bottom aligned
</div>
</div>

<!--[if lte IE 7]></div><![endif]-->

...y este CSS:

/* for normal browsers... 
*******************/

.content {
    display: table-cell;
    height: 200px;
}
.bottom .content {
    vertical-align: bottom;
}
.middle .content {
    vertical-align: middle;
}

/* make it more-or-less work in IE6, IE7 
*******************/

.old-ie {
    position: relative;
}
.old-ie .wrapper {
    position: absolute;
}
.old-ie .content {
    position: relative;
}
.old-ie .bottom .wrapper, .old-ie .bottom .content {
    bottom: 0;
}
.old-ie .middle .wrapper {
    top: 50%;
}
.old-ie .middle .content {
    top: -50%;
}

Finalmente, aquí hay un enlace a una respuesta de StackOverflow (sitio de preguntas y respuestas de codificación) que escribí hace un tiempo , explicando con un poco más de detalle, si es necesario, cómo hacer que vertical-alignel navegador cruzado funcione con flotadores (probablemente el caso más complicado) y cuáles son las limitaciones.

En primer lugar, gracias por tomarse el tiempo para escribir esto, pero me temo que no me entendió (o más probablemente lo expliqué mal en la pregunta). No se trata de una alineación vertical inferior, se trata de la "forma" del texto envuelto. Por ejemplo, en el texto "Aquí está el enlace" si no hay suficiente espacio en una línea, entonces la línea debe representarse como "Aquí \n está el enlace" en lugar del estándar "Aquí está el \n enlace".
Cierto, no estaba claro. Eso es mucho más difícil, si tiene un nombre, nunca he oído hablar de él: es probable que las personas asuman que la ruptura inesperada significa algo en el texto, como una pausa. Para la web, primero deberá alinear verticalmente en la parte inferior, luego necesitará algo de Javascript que analice el texto y calcule dónde colocar un salto de línea. Ese es un problema de programación complicado y probablemente debería preguntar a los programadores sobre el desbordamiento de la pila. Supongo que la mejor manera implicaría construir una visibility: hidden;palabra a la vez de atrás hacia adelante, probando el ancho contra el espacio.
PD: si el propósito de esto es evitar un título, ¿no puedes simplemente hacer el título float: left;o justo en el mosaico? Esto haría que el texto del mosaico principal fluya alrededor del título y podría ser una forma más convencional de hacer que las cosas funcionen. La tipografía convencional suele ser buena porque si un lector se distrae descifrando un diseño inusual, está prestando menos atención al contenido.
Estoy completamente de acuerdo, pero en realidad no es mi elección, el diseñador interno de los clientes hizo el diseño y se supone que debo implementarlo... :(
Tal vez podría usar el lado del servidor para crear mosaicos con fondos de mapa de bits y recrear los mosaicos cuando el texto del mosaico cambia en el CMS. Debería ser más fácil hacerlo del lado del servidor, ya que podría usar bibliotecas gfx reales en lugar de JS. Y con el almacenamiento en caché de imágenes, debería ser rápido, pero aún tendría muchas imágenes. O podría tratar de convencer al cliente de que renuncie a este envoltorio de texto novedoso :)
¡Tienes mi simpatía! Si existiera ese tipo de alineación, me imagino que se llamaría "arriba irregular" (el lado irregular en la alineación tipográfica es el lado desigual).
Lo único que se me ocurre que se acerca es el texto justificado verticalmente, que es como lo que dices pero sin la parte superior irregular. Probablemente muy difícil de hacer para la web, este enlace podría ayudar stackoverflow.com/questions/9188969/… realmente es un problema de programación
Lo peor es que el diseño no se ve nada mal. El texto está alineado en la parte inferior del mosaico y generalmente tiene alrededor de 3 líneas de texto, y cuando esa última línea se llena hasta el final, se ve un poco mejor que con el ajuste normal, que deja un espacio en la parte inferior derecha del mosaico.

No estoy muy seguro de si este es el sitio correcto para hacer esta pregunta, pero aquí hay un ejemplo de lo que necesita (para IE, funciona en 8 y superior):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.tile {width:200px; height:100px; background-color:#FFFF00; vertical-align:bottom; display:table-cell;}
</style>
</head>
<body>
<div class="tile">123</div>
</body>
</html>

Tenga en cuenta el vertical-align:bottom;y display:table-cell;en el estilo y siéntase libre de jugar con fuentes, márgenes, etc.

Ajuste de texto llenar-última-línea-primero
RespuestasAquíPolítica de privacidad1y, 0v