Question

I’m trying to centre some text in a round box 100px x 100px;

The site im working on is here : http://www.blackcountrydesigns.co.uk/the1theme/

I’m using the following jQuery script to achieve this

$(document).ready(function()
{
   $('.header .menu li a').each(function(){
      padding = (100 - $(this).innerHeight())/2
      alert($(this).height());
      $(this).css({'padding-top' : padding+'px' , 'padding-bottom' : padding+'px'})
   });

});

The problem i’m having is that it thinks that some of the box or on 2 line when they are only on one.

Hope you can help!

Thanks

Answer 1

It is very likely that this is happening because the font that is used when the calculation is made is not the custom one that you are requesting, since custom fonts are loaded async in some browsers.

So when the default font is used the text is in two lines, however when the custom font is loaded it is displayed in one line. If you remove the google fonts stylesheets, you will see that the font is displayed in two lines inside the first and third menu item. This is what chrome detects on DOMready.

Here is a fiddle of the prototype without the custom fonts: http://jsfiddle.net/z7n7H/

To solve this, you can either force a non-breaking whitespace on the anchors if you know that no menu item should line break:

.header .menu li a{ white-space: nowrap }

Or try to listen for a font load event (if one exists) and do the calculations from there: https://developers.google.com/webfonts/docs/webfont_loader

You can also try to use a default font that has the same width as the custom one you are using, although this could quite easily break.

Another option would be to use the window.onload event, since the fonts should have been downloaded and applied by then.