Títulos, palavras órfãs e JavaScript


Leia em menos de um minuto

Tipografia na web é uma coisa muito complicada. Embora tenhamos evoluído bastante, ainda temos bastante caminho a andar. E uma das coisas que mais sinto falta é um controle fino sobre palavras e parágrafos órfãos.

Em se tratando de títulos, isso é uma coisa ainda mais complicada. Quando um título é alinhado ao centro, fica muito estranho ter apenas uma palavra na última linha. Veja, por exemplo, como ficaria o título desta página que você está lendo:

Título sem controle de palavras órfãs

Pensando nisso, enquanto eu estava implementando este novo layout, cheguei à seguinte solução: usar   entre as últimas palavras. Usando esta técnica, o mesmo título fica muito melhor!

Título com controle de palavras órfãs

Para fazer isso, usei um pequeno JavaScript que faz isso por mim.

var title = document.getElementById("title")
  , words = (title.textContent || title.innerText).split(" ")
  , widow = 3
;

title.innerHTML = words
  .slice(0, -widow)
  .concat(words.slice(-widow).join(" "))
  .join(" ")
;

Embora eu não esteja usando jQuery, o código é bastante simples. O mais interessante é que funcionou muito bem em quase todos os títulos deste blog.