-
-
Save eykd/599812 to your computer and use it in GitHub Desktop.
Sets the size of the body text to whatever works best for the current device. Based on code from http://blog.romeda.org/2010/06/beautiful-lines.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var setTextMeasure = function (contentElement, targetMeasure, maxSize, minSize) { | |
if (!contentElement) contentElement = document.createElement('p'); | |
if (!targetMeasure) targetMeasure = 66; | |
if (!maxSize) maxSize = 16; | |
if (!minSize) minSize = 9; | |
var sizer = contentElement.cloneNode(); | |
sizer.style.cssText = 'margin: 0; padding: 0; color: transparent; background-color: transparent; position: absolute;'; | |
var letters = 'aaaaaaaabbcccddddeeeeeeeeeeeeeffgghhhhhhiiiiiiijkllllmmnnnnnnnooooooooppqrrrrrrsssssstttttttttuuuvwxyyz'; | |
sizer.textContent = letters; | |
document.body.appendChild(sizer); | |
var characterWidth = sizer.offsetWidth / letters.length; | |
document.body.removeChild(sizer); | |
var contentWidth = contentElement.offsetWidth; | |
var measuredFontSize = parseFloat( | |
document.defaultView. | |
getComputedStyle(document.body, null). | |
getPropertyValue('font-size'). | |
replace('px', '') ); | |
var actualMeasure = contentWidth / characterWidth; | |
var newMeasure = measuredFontSize * actualMeasure / targetMeasure; | |
if (newMeasure > maxSize) newMeasure = maxSize; | |
if (newMeasure < minSize) newMeasure = minSize; | |
document.body.style.fontSize = newMeasure + "px"; | |
} |
Author
eykd
commented
Sep 27, 2010
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment