javascript - sheet - title tag html5

JavaScript para evitar a las viudas

Question

Esta pregunta ya tiene una respuesta aquí:

• Control de viudas / huérfanos con JavaScript? 7 respuestas

Un problema común cuando se trabaja con tipografía en HTML / CSS es algo que llamamos "horunge" en sueco (" widow " en inglés).

Lo que es:

Digamos que tienes una caja con un ancho de 200px y con el texto "Me encanta la tipografía". Ahora el texto se rompe y se convierte en:

Me encanta la tipografía muy
mucho

Como diseñador no quiero una palabra bastardo (una sola palabra / fila). Si se tratara de un documento / PDF, etc. Rompería la palabra antes y se vería así:

Me encanta la tipografía
mucho

que se ve mucho mejor

¿Puedo resolver esto con una regla CSS o con un javascript? La regla debería ser nunca dejar una palabra vacía en una fila.

Sé que se puede resolver agregando un <br /> pero esa no es una solución que funcione con anchos dinámicos, contenido de fuentes, diferentes traducciones, problemas de representación de fuentes del navegador, etc.

Actualización (solución) Resolví mi problema con este complemento jquery: http://matthewlein.com/widowfix/

Answer 1

Hice un pequeño script aquí , con la ayuda de esta función para encontrar la altura de la línea.

Es solo un enfoque, puede o no funcionar, no tuvo tiempo de probar a fondo.

A partir de ahora, text_element debe ser un objeto jQuery.

function avoidBastardWord( text_element )
{
var string = text_element.text();
var parent = text_element.parent();
var parent_width = parent.width();
var parent_height = parent.height();
// determine how many lines the text is split into
var lines = parent_height / getLineHeight(text_element.parent()[0]);
// if the text element width is less than the parent width,
// there may be a widow
if ( text_element.width() < parent_width )
{
// find the last word of the entire text
var last_word = text_element.text().split('' '').pop();
// remove it from our text, creating a temporary string
var temp_string = string.substring( 0, string.length - last_word.length - 1);
// set the new one-word-less text string into our element
text_element.text( temp_string );
// check lines again with this new text with one word less
var new_lines = parent.height() / getLineHeight(text_element.parent()[0]);
// if now there are less lines, it means that word was a widow
if ( new_lines != lines )
{
// separate each word
temp_string = string.split('' '');
// put a space before the second word from the last
// (the one before the widow word)
temp_string[ temp_string.length - 2 ] = ''<br>'' + temp_string[ temp_string.length - 2 ] ;
// recreate the string again
temp_string = temp_string.join('' '');
// our element html becomes the string
text_element.html( temp_string );
}
else
{
// put back the original text into the element
text_element.text( string );
}
}
}

Diferentes navegadores tienen diferentes configuraciones de fuente. Intenta jugar un poco para ver las diferencias. Lo probé en IE8 y Opera, modificando la cadena cada vez y parecía funcionar bien.

Me gustaría escuchar algunos comentarios y mejorar porque creo que puede ser útil de todos modos.

¡Sólo juega con él! :)

Answer 2

Manualmente, podría reemplazar el espacio intermedio con  

He estado buscando formas de agregarlo dinámicamente. Encontré algunas, pero no he podido hacer que funcione.

Answer 3

Solo quería agregar a esta página ya que me ayudó mucho.

Si tiene (viudas) en realidad debería ser huérfano, ya que las viudas son palabras simples que aparecen en la página siguiente y no palabras individuales en una nueva línea.

Trabajar con códigos postales como "N12 5GG" dará como resultado que el código postal completo esté en una nueva línea juntos, pero todavía se clasifique como huérfano, por lo que es una solución. (Cambió la clase a "noWidow2" para que pueda usar ambas versiones.

123 Some_road, Some_town, N12 5GG

$(''.noWidows2'').each(function(i,d){
var value=" "
$(d).html($(d).text().replace(//s(?=[^/s]*$)/g, value).replace(//s(?=[^/s]*$)/g, value));
}); 

Esto dará como resultado que los últimos 3 espacios en blanco estén en una nueva línea juntos haciendo que el problema del código postal funcione.

Resultado final

123 Some_road,
Some_town, N12 5GG

Answer 4

También hay propiedades CSS viudas y huérfanas: consulte el artículo de about.com .

No estoy seguro sobre el soporte del navegador ...

EDIT: más información sobre la implementación de WebKit aquí: https://bugs.webkit.org/buglist.cgi?quicksearch=orphans .

Answer 5

Una solución jQuery / regrex simple podría parecerse a la siguiente, si agrega la clase "noWidows" a la etiqueta de cualquier elemento que contenga texto que le preocupa.

Como:

<p class="noWidows">This is a very important body of text.</p>

Y luego usa este script:

$(''.noWidows'').each(function(i,d){
$(d).html( $(d).text().replace(//s(?=[^/s]*$)/g, " ") )
});

Esto usa expresiones regulares para encontrar y reemplazar el último espacio en la cadena con un carácter que no se rompa. Lo que significa que las dos últimas palabras serán forzadas en la misma línea. Es una buena solución si tiene espacio alrededor del final de la línea porque esto podría hacer que el texto se ejecute fuera de un elemento con un ancho fijo, o si no lo está, puede hacer que el elemento sea más grande.

Answer 6

$(''span'').each(function() {
var w = this.textContent.split(" ");
if (w.length > 1) {
w[w.length - 2] += " " + w[w.length - 1];
w.pop();
this.innerHTML = (w.join(" "));
}
});

#foo {
width: 124px;
border: 1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<span class="orphan">hello there I am a string really really long, I wonder how many lines I have</span>
</div>