¿Hay alguna manera de controlar automáticamente palabras huérfanas en un documento HTML?

Question

Me preguntaba si hay una manera de controlar automáticamente palabras huérfanas en un archivo HTML, posiblemente mediante el uso de CSS y/o Javascript (o cualquier otra cosa, si alguien tiene una sugerencia alternativa).

Por 'palabras huérfanas', me refiero a palabras singulares que aparecen en una nueva línea al final de un párrafo. Por ejemplo:

"This paragraph ends with an undesirable orphaned 
word."

En cambio, sería preferible tener el salto de párrafo de la siguiente manera:

"This paragraph no longer ends with an undesirable 
orphaned word."

Aunque sé que pude corregir manualmente esto colocando un espacio HTML de no separación ( ) entre las dos últimas palabras, me pregunto si hay una manera de automatizar el proceso, ya que los ajustes manuales como este pueden convertirse rápidamente en tediosos para grandes bloques de texto en múltiples archivos.

Por cierto, las propiedades CSS2.1 orphans (y widows) sólo se aplican a líneas enteras de texto, e incluso entonces sólo para la impresión de páginas HTML (por no mencionar el hecho de que estas propiedades son en gran parte sin el apoyo de la mayoría de los principales navegadores)

Muchas aplicaciones profesionales de diseño de página, como Adobe InDesign, pueden automate the removal of orphans agregando automáticamente espacios sin interrupciones donde se producen huérfanos; ¿Hay algún tipo de solución equivalente para HTML?

Answer 1

En resumen, no. Esto es algo que ha enloquecido a los diseñadores de impresión durante años, pero HTML no proporciona este nivel de control.

Si a pesar de todo quiere positivamente este, y comprender las implicaciones de velocidad, puede intentar la sugerencia aquí:

detecting line-breaks with jQuery?

Esa es la mejor solución que puedo imaginar, pero eso no significa que sea un buen solución.

Answer 2

Puede evitar las palabras huérfanas al reemplazar el espacio entre las últimas dos palabras en una oración con un espacio sin interrupción ( ).

Existen complementos que hacen esto, por ejemplo jqWidon't o this jquery snippet.

También hay complementos para marcos populares (como typogrify para django y widon't for wordpress) que básicamente hacen lo mismo.

Answer 3

Si desea manejar por sí mismo, sin jQuery, se puede escribir un fragmento de código JavaScript para reemplazar el texto, si usted está dispuesto a hacer un par de supuestos:

1. Una frase siempre termina con un punto .
2. Siempre desea reemplazar el espacio en blanco antes de la última palabra con & nbsp;

Suponiendo que tienes este html (que está diseñado para romper justo antes de "finalizar" en mi navegador ...mono con el ancho si es necesario):

<div id="articleText" style="width:360px;color:black; background-color:Yellow;"> 
    This is some text with one word on its own line at the end. 
    <p /> 
    This is some text with one word on its own line at the end. 
</div> 

Puede crear este javascript y ponerlo al final de la página:

<script type="text/javascript"> 
    reformatArticleText(); 
    function reformatArticleText() 
    { 
     var div = document.getElementById("articleText"); 
     div.innerHTML = div.innerHTML.replace(/\S(\s*)\./g, "&nbsp;$1."); 
    } 
</script> 

la expresión regular se limita a declarar todos los casos (el uso de la bandera g) de un carácter de espacio en blanco (\S) seguido de cualquier número de caracteres que no sean espacios en blanco (\s) seguido de un punto. Crea una referencia retrospectiva al espacio no blanco que puede usar en el texto de reemplazo.

Puede usar una expresión regular similar para incluir otros signos de puntuación finales.

Answer 4

Sé que quería una solución de javascript, pero en caso de que alguien encontrara esta página una solución, pero para los correos electrónicos (donde Javascript no es una opción), decidí publicar mi solución.

Utilice CSS white-space: nowrap. Entonces lo que hago es rodear las últimas dos o tres palabras (o donde quiera que esté el "descanso") en un lapso, agregar un CSS en línea (recuerde, trato con el correo electrónico, hacer una clase según sea necesario):

<td> 
    I don't <span style="white-space: nowrap;">want orphaned words.</span> 
</td> 

En un diseño fluido/receptivo, si lo hace bien, las últimas palabras pasarán a una segunda línea hasta que haya espacio para que esas palabras aparezcan en una línea.

Leer más acerca de la propiedad white-space en este enlace: http://www.w3schools.com/cssref/pr_text_white-space.asp

EDIT: 19/12/2015 - Ya que este no es compatible con Outlook, que he ido añadiendo un espacio de no separación entre el   dos últimas palabras en una oración. Es menos código y es compatible con todos lados.

EDIT: 02/20/2018 - He descubierto que la aplicación de Outlook (iOS y Android) no soporta la entidad  , así que he tenido que combinar ambas soluciones: por ejemplo:

<td> 
    I don't <span style="white-space:nowrap;">want&nbsp;orphaned&nbsp;words.</span> 
</td> 

Answer 5

Si el JavaScript de terceros es una opción, se puede usar typogr.js, una implementación de JavaScript "typogrify". Este filtro en particular se llama, como era de esperar, Widont.

<script src="https://cdnjs.cloudflare.com/ajax/libs/typogr/0.6.7/typogr.min.js"></script> 
<script> 
document.body.innerHTML = typogr.widont(document.body.innerHTML); 
</script> 
</body>