Responsive Text Size

The size of its text content can change automatically when a div width changes.

Div size can change when a device is turned from portrait to landscape, or vice versa. And div width can change on a laptop when the width of the browser window changes.

When certain text must always fit within a specific div, and the div width may change, then the text size must also change. If the text size did not change, then, depending on whether the div got smaller or larger, the text may overflow the div or the text may leave an abundance of white space in the div.

JavaScript is used to adjust the text size according to the div width when the page loads.

When the device orientation is changed or when the browser's window size is changed, and the div width changes, the JavaScript kicks in to adjust the text size as needed.

Example

Here is an example. If you change the div width by reorienting your device or change the width of your browser window, you'll see the text size change. (That is, assuming the div width change was sufficient to use a text size change.)

On laptop or desktop computers with browser windows wide enough to accomodate the natural width of this column, the text in the above div will appear quite large. On portrait-oriented phones, with the div being smaller, the text will be closer to the size used for the rest of this article.

The content may allow more space at the bottom of the div than at the top — the content not quite filling up the div. One of the reasons for that is the next larger text size may overflow the div. Another reason is that bottom margins of paragraph (<p>) tags or other elements may be taken into consideration.

The JavaScript will not adjust the height of the div. If you need a specific height, the height needs to be specified with the div's CSS. See the notes below the div source code, further below.

Unless the div content is composed of more text than it can hold with 1-point size text, the content does not extend below the div.

The Source Code

To implement, there is (1) the div with the text content and (2) the JavaScript that manages the text size within the div.

(1) The Div

Here is example code for the div. Notes follow.

<div id="testing-div" style="font-size:15px; height:200px;">
[DIV CONTENT]
</div>

Notes —

The div must have an id value so the JavaScript can access the text for resizing. The div must also have a CSS font-size declaration so the JavaScript has a size to start with. Generally, you would also have a a CSS height declaration because the JavaScript won't resize the div, just the text.

If you need padding, place the content into a div with padding specified. Here is how it's done in the example further above on this page.

   <div style="padding:10px; border:1px solid #ccc; border-radius:10px;">
<div id="testing-div" style="font-size:15px; height:200px;">
[DIV CONTENT]
</div>
   </div>

(1) The JavaScript

The source code of the JavaScript that controls the text size in the div is below. There is one place to customize. Notes follow.

<script type="text/javascript">
function AdjustTextSize()
{
   var d=document.getElementById("testing-div");
   d.style.overflow="visible";
   var size=parseInt(d.style.fontSize);
   var previous=parseInt(d.scrollHeight);
   var latest=0;
   var makebigger=true;
   var makesmaller=true;
   while(makebigger)
   {
      size++;
      d.style.fontSize=size+"px";
      latest=parseInt(d.scrollHeight);
      if( latest>previous ) { makebigger=false; }
      previous=latest;
   }
   while(makesmaller)
   {
      size--;
      d.style.fontSize=size+"px";
      latest=parseInt(d.scrollHeight);
      if(size<1 || latest==previous)
      {
         size++;
         d.style.fontSize=size+"px";
         makesmaller=false;
      }
      previous=latest;
   }
} // function AdjustTextSize()
var addEventHandler=function(element,eventType,functionRef)
{
    if( element==null || typeof(element)=='undefined' ) { return; }
    if( element.addEventListener ) { element.addEventListener(eventType,functionRef,false); }
    else if( element.attachEvent ) { element.attachEvent("on"+eventType,functionRef); }
    else { element["on"+eventType]=functionRef; }
}; // var addEventHandler;
addEventHandler(window,"resize",AdjustTextSize);
setTimeout(AdjustTextSize,1000);
</script>

Notes —

The id of the div needs to be specified in the JavaScript. You'll see it on the fourth line of the above source code. Conform testing-div to match the id value of the div that contains the text to resize.

Put the JavaScript in the web page source code that also contains the div with text to size adjust. The JavaScript needs to be somewhere below the div. Immediately above the cancel </body> tag is generally a good place.

The JavaScript works best with divs containing one or more free-flowing blocks of text ("free-flowing" being text that allows the browser to insert line breaks at any point between words).

When the page loads, the JavaScript adjusts the text size so it fits within the target div.

Thereafter, when the device orientation is changed or when the browser's window size is changed, the JavaScript adjusts the text size again.

(This article first appeared in Possibilities newsletter.)

Will Bontrager