Thinkrement: 10/7/12

Nowadays I get a lot of designs with vertically centered text in it. Sometimes the text is only a word but it can be multiple lines long too. The problem was, I could not determine, wether the printed text will be broken into multiple lines or not. Luckily, I have found a solution to this problem in pure CSS. This is instantly added to my sitebuilding template for future use.

Here is a little demo showing how it works:
http://cssdesk.com/K36px

Let's see the code:

HTML

<div class="outer">
   <div class="inner">
      <div class="element">Centered</div>
   </div>
</div>

Default CSS

.outer {
  display: table;
   height: 155px;
   overflow: hidden;
   width: 980px;
}

   .outer .inner {
      display: table-cell;
      vertical-align: middle;
      width: 100%;
      margin: 0 auto;
   }

CSS for IE

1
2
3

.outer { position: relative; }
.outer .inner { position: absolute; top: 50%; }
.outer .inner .element { position: relative; top: -50%; }

No matter how surprising it is, there was no solution to change the font size based on the font family. Until now. :)

What is the problem?

I used two different fonts on a webpage. One is a simple Arial, the other is a custom font. The custom font requires a much bigger font size, to get the same result as the Arial.

What needed to be done?

I needed a solution, to change font size CSS properties on some of the elements, if the custom font is loaded. For example IE could not load it, so there should be Arial everywhere, but with a correct font size.

How is it done?

With Javascript of course. The basic idea is, to create a hidden element with some characters in it. This text has a different with on each font family. So I measured it with Arial, then I have set the font family to the custom value, and measured it again. It the element's width is different than the previous one, then the font is loaded. If the width of the element doesn't changes in 10seconds, the checking interval is cleared, so it doesn't uses the resources anymore. In the callback funcion, I just removed the ".no-custom-font" class from the body, so everything should look good now. Note, that I had to create some other CSS rules (and with the additional class, these rules have a higher specificity than the default ones) to set the right font size values.

Okay, this worked fine in the project, so lets look at the code:

function onWebFontLoaded(font, callback) {
 
 // create a test element for each font
 jQuery("body").append("<div id=\'font_test\' style=\'position: absolute;left:-1000000px; top: -1000000px;font-size:300px;font-family:Arial;font-style:normal;font-weight:normal;letter-spacing:0px;\'>giItT1WQy@!-/#</div>");
 var width = jQuery("#font_test").width();
   
 jQuery("#font_test").css("font-family", font+", Arial");

 var timeWaited = 0;
 var intervalTime = 200; 
 var maxWaitingTime = 10000; // 10 sec
 var interval;
 function checkFont() {
  
  timeWaited += intervalTime;
  
  if(jQuery("#font_test").length > 0 && jQuery("#font_test").width() != width) {
   callback();
   jQuery("#font_test").remove();
   return true;
  }
  else if( timeWaited > maxWaitingTime) {
   clearInterval(interval);
   if( typeof console != "undefined") console.log("font ("+font+") not loaded.");
  }
  return false;
 }

 if(!checkFont()) {
  interval = setInterval(checkFont, intervalTime);
 }
   
};

jQuery(document).ready(function() {
 
 onWebFontLoaded('AGENCYR', function() {
  
  // remove the no-font-... class from the body tag
  jQuery(".no-font-AGENCYR").removeClass("no-font-AGENCYR");
 });
 
});

Thinkrement

Wednesday, October 10, 2012

Vertical centering text with CSS