Entradas

Mostrando entradas de febrero, 2018

Balance text in web pages

Imagen
Today we'll set aside LabVIEW for a change and try something with JavaScript. Consider these two headings, which one do you think is better?Hopefully you will find the second one more appealing to the eye, as me, since the title lines are nearly balanced. If you are formatting a publication by yourself this is easily achieved adjusting the text by hand, but in a web page is difficult.In fact this was proposed as a CSS standard by Adobe some years ago, as text-wrap: balance property, but W3C didn't adopt it and no web browser that I know of implements it. So we'll have to do it ourselves, and with vanilla JavaScript no less so no external library is needed.The codeThe concept behind our function is to "shrink" left and right borders around the heading just until the text needs another line, and stop there. So basically:1) Find number of words and lines in the heading.2) If balancing can be applied, start shrinking borders.3) Still the same lines? Shrink a little m…