C'è un modo per controllare automaticamente le parole orfane in un documento HTML?

Question

Mi chiedevo se c'è un modo per controllare automaticamente le parole orfane in un file HTML, possibilmente usando CSS e/o Javascript (o qualcos'altro, se qualcuno ha un suggerimento alternativo).

Per "parole orfane", intendo parole singolari che appaiono su una nuova riga alla fine di un paragrafo. Per esempio:

"This paragraph ends with an undesirable orphaned 
word."

Invece, sarebbe preferibile avere la rottura paragrafo come segue:

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

Anche se so che avrei potuto correggere manualmente questo mettendo uno spazio HTML non divisibile (  tra le ultime due parole, mi chiedo se c'è un modo per automatizzare il processo, dal momento che le regolazioni manuali come questa possono diventare noiose per grandi blocchi di testo su più file.

Per inciso, le proprietà CSS 2.1 orphans (e widows) si applicano solo a intere righe di testo, e anche allora solo per la stampa di pagine HTML (per non parlare del fatto che queste proprietà sono in gran parte non supportata dalla maggior parte dei principali browser).

Molte applicazioni di impaginazione professionale, come Adobe InDesign, possono automate the removal of orphans aggiungendo automaticamente spazi ininterrotti dove si verificano gli orfani; c'è qualche soluzione equivalente per HTML?

Answer 1

In breve, no. Questo è qualcosa che ha fatto impazzire gli stampatori per anni, ma HTML non fornisce questo livello di controllo.

Se si vuole assolutamente positivamente questo, e capire le implicazioni di velocità, si può provare il suggerimento qui:

detecting line-breaks with jQuery?

Questa è la soluzione migliore che posso immaginare, ma che non lo rende un buon soluzione.

Answer 2

È possibile evitare parole orfane sostituendo lo spazio tra le ultime due parole di una frase con uno spazio non interruttivo ( ).

Ci sono plug-in che lo fanno, ad esempio jqWidon't o this jquery snippet.

Esistono anche plugin per framework comuni (come typogrify per django e widon't for wordpress) che essenzialmente fa la stessa cosa.

Answer 3

Se si desidera gestire da soli, senza di jQuery, è possibile scrivere un frammento javascript per sostituire il testo, se siete disposti a fare un paio di ipotesi:

1. Una frase si conclude sempre con un periodo .
2. Si desidera sempre sostituire gli spazi bianchi prima dell'ultima parola con & nbsp;

Supponendo di avere questo html (che è stato progettato per interromperlo prima della fine del browser ...scimmia con la larghezza, se necessario):

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

È possibile creare questo javascript e metterlo alla fine della pagina:

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

La regex trova semplicemente tutte le istanze (utilizzando il flag g) di un carattere di spazio bianco (\S) seguito da un numero qualsiasi di caratteri non di spazi bianchi (\s) seguito da un punto. Crea un riferimento di ritorno allo spazio non bianco che è possibile utilizzare nel testo di sostituzione.

È possibile utilizzare una regex simile per includere altri segni di punteggiatura di fine.

Answer 4

So che volevi una soluzione javascript, ma nel caso qualcuno abbia trovato questa pagina una soluzione ma per le e-mail (dove Javascript non è un'opzione), ho deciso di pubblicare la mia soluzione.

Usa CSS white-space: nowrap. Quindi quello che faccio è racchiudere le ultime due o tre parole (o dove voglio essere la "pausa"), aggiungere un CSS incorporato (ricorda, mi occupo di email, creare una classe secondo necessità):

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

In un layout fluido/reattivo, se lo si fa correttamente, le ultime parole si romperanno su una seconda riga finché non ci sarà spazio per quelle parole da apparire su una riga.

Per saperne di più sulla proprietà white-space su questo link: http://www.w3schools.com/cssref/pr_text_white-space.asp

EDIT: 2015/12/19 - Dal momento che questo non è supportato in Outlook, ho l'aggiunta di uno spazio unificatore tra il   ultime due parole in una frase. È meno codice e supportato ovunque.

EDIT: 2018/02/20 - ho scoperto che l'App Outlook (iOS e Android) non supporta l'entità  , così ho dovuto combinare entrambe le soluzioni: ad esempio:

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

Answer 5

Se JavaScript di terze parti è un'opzione, è possibile utilizzare typogr.js, un'implementazione JavaScript "typogrify". Questo particolare filtro è chiamato, non sorprende, 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>