Archive

Archive for January 14th, 2010

CSS+JavaScript technique for setting font-size based on the page size.

January 14th, 2010 nawaman No comments

Interlude

Skip to Concept HOW DEMO

I am preparing for my thesis defense which bring me to come in contact with PowerPoint. The problem is I don’t use MS Office (Linux dude) and OOImpress is just not for me. So I do what do best, I program.

No no no …, I am not programming a presentation program. I am just create a small JavaScript (using jQuery) code so that I can use my web browser as a presentation program. There is certain things to do to realize that and I will talk about that a little later. In this article, I will show you a technique that I found. The technique to set font-size of an element to be based on the size of a page.

Every presentation programs, resize the text in ratio to the displayable area. This is proven to be quite impossible to achieve directly (as far as I know).
So I here is how I did it.

Concept

First of all, when we specified a font size using the unit em, the size of the font will be set in related to the font size of its parent.

So for example, if the font size of the parent is set to 20px and the font-size of the child is set to 0.5em, it will be equivalent to setting the child’s font-size to 10px.

  <div id='parent' style='font-size: 20px;'>
    Text in parent.
    <div id='child' style='font-size: 0.5em;'> Text in child. </div>
  </div>

equivalent to

  <div id='parent' style='font-size: 20px;'>
    Text in parent.
    <div id='child' style='font-size: 10px;'> Text in child. </div>
  </div>

So How?

Armed with the above knowledge, we can achieve what we want by setting the size of parent’s font to in ratio with the page size. Then the size of children’s fonts that are set to em unit will be in ratio with the page size. This involve two steps.

1. Let create the html.

...
<body style='height: 100%>
  <div id='body-content''>
    <span style='font-size: 1em'>10%</span>
    <span style='font-size: 2em'>20%</span>
    <span style='font-size: 3em'>30%</span>
    <span style='font-size: 4em'>40%</span>
  </div>
</body>
...

Note: that you need to set the height of body to 100% so that it will be changed when the browser window change.

2. JavaScript program to ensure the font size.

...
$(function() {
  // Set the font size now
  EnsureFontSize();

  // Set an event to the body
  const aBody = $('body');
  aBody.attr('onResize', 'EnsureFontSize()');
});

function EnsureFontSize() {
  // Set the font size of body to exactly 10% of the its actual height
  const aBody         = $('body');
  const aBodyFontSize = Math.round(aBody[0].offsetHeight * 0.1) + 'px';
  aBody.css('font-size', aBodyFontSize);
}
...

This way, you can set any font under body (well that is almost all) in ratio with 10% of the page height. So setting a font-size to 1em means 10% and 0.5em means 5%. If you want to use an absolute font size, simply set it to be in px.

Of course, you can apply it to individual div instead of body. In that case, you need to change the EnsureFontSize() to set font size of the parent div but you still have to listen to onResize of the body.

The size of the font is not exact accurate due to the complicated nature font metric but it should give you an approximate result.

Also note that if you are using IE, you can set the event to listen to window.onresize so you not need to set the body’s height to 100%.

Demo

Demo page can be find here.

That is it

I hope that this will be useful for anyone who what to do it.
Any question? Feel free.

font-size:
Categories: Uncategorized Tags: , ,