Balance text in web pages

-

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 code

The 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 more.

4) Already another line? Go back one step and it's done.


function balance(elemento) //text-wrap: balance;
{
   //Off with the margins
   elemento.style.paddingLeft = 'inherit';
   var w = 1;
   padea(elemento,w);
   var h = elemento.offsetHeight;

   var altura = parseInt(document.defaultView.getComputedStyle(elemento,null).getPropertyValue('line-height')); //May return "normal", so:
   if(isNaN(altura))
      altura = parseInt(document.defaultView.getComputedStyle(elemento,null).getPropertyValue('font-size'));

   var n_lines = elemento.offsetHeight / altura;
   var n_words = elemento.innerHTML.trim().split(' ').length;
  
   if((n_words > n_lines) && (n_lines > 1)) //More words than lines, and more than one line? {
      do{
         w++;
         elemento.style.paddingLeft = w+'px';
         elemento.style.paddingRight = w+'px';
      }
      while(elemento.offsetHeight == h)

      elemento.style.paddingLeft = (w-1)+'px';
      elemento.style.paddingRight = (w-1)+'px';
   }
}

Any modern browser will do the calculations in the blink of an eye.

Implementation

Now it's time to apply our function to the desired elements. The easiest way is defining a general function (let's say balanceAll) that searches for all the occurrences in the page and call the balance function on them.

The specific way of doing it depends on how you decide to mark these headings to be balanced. If it's by CSS class, you can do document.querySelectorAll('.classname'); and if it's by tag, then use document.getElementsByTagName('tagname');

Then you need to call it. My advice is to add a couple of events to the BODY tag: onload, so it will be fired when the page is loaded, and onresize, since a change in the page width could affect our balancing and it's necessary to recalculate it:


<body onload="javascript:balanceAll();" onresize=\"javascript:balanceAll();\">

And that's all. Your particular requirements may vary (what if the heading is not centered but left or right-aligned?), but I'm sure you'll find your way from here 😉.

Comentarios

Publicar un comentario

Entradas populares de este blog

SNMP library for LabVIEW

-
Imagen
SNMP (Simple Network Management Protocol) is a fairly common protocol for communicating with network equipment. It's fast, lightweight and standardized. Unfortunately it's not quite as simple as its name implies and LabVIEW doesn't support it natively. Some years ago I was in the necessity of using SNMP from a LabVIEW system to control some hardware. I started looking for already implemented solutions and found a library developed by Mark Yedinak (great work!). It was useful since it demonstrated it could be done and how, but I needed more control over the operations, so I had to read the protocol down to the low level bytes and implement what I need by myself. Yeah, pretty hard and with time constraints no less. Anyway, here it is. Download (Library in LLB file for LabVIEW 2016) See the examples folder to grasp the basic use. Probably you'll need no more than these sets of VIs to send and retrieve data and to get traps sent by your equipment. To integrate
Leer más

Base64 Encoding

-
Imagen
Long time no see! Today I'm here to talk about Base64 encoding and how to do it in LabVIEW. What is Base64 and what is used for? Base64 is a six-bit based encoding mechanism that uses only printable characters from the ASCII table (lower and upper case letters, numbers, and three more characters, usually "+/="). This means it can be represented in any textual environment, though obviously adds an overhead respect to the original code since two bits of every byte are unused. You will find B64 mainly in mail applications (to send attachments), but lately it's been popular in URLs and HTML too. The concept is to insert small chunks of data directly as B64 text to avoid recurrent callings for files through the web. For example, you can embed an image inside your HTML or CSS file. It's not my intention to delve too deep in this aspect, but for an image tag the resulting HTML code would look like this (let's assume a JPG file): <img src="data:imag
Leer más

Retrieve CPU temperature

-
Imagen
Lately I had to check the CPU temperature in a critical acquisition system, and I thought it could be a good thing to share here. I know there are several applications to do this and much more, but getting it from our code allows to react conveniently to any event. Now, IMPORTANT, the VI doesn't work on its own. First you must download the Open Hardware Monitor . Extract OpenHardwareMonitorLib.dll from the zip file and put it in the same folder the VI is located. The objects exposed in it use .NET Framework 2.0 and above, but that shouldn't be a problem in any modern machine. On the other hand, this works only for Windows , obviously. And remember, the application (either an .exe or the LabVIEW IDE) must run with administrator rights (otherwise you'll get error 1172 ). Download (VI for LabVIEW 2016) Now, if you haven't worked with .NET functions in LabVIEW, this can be a good opportunity to familiarize with them. Let's take a look at the code. First we
Leer más