Skip to content

Commit

Permalink
New experiment in proportional font-sizing.
Browse files Browse the repository at this point in the history
  • Loading branch information
@joseph
joseph committed Jan 30, 2012
1 parent 4cc9237 commit bf51bc8
Show file tree
Hide file tree
Showing 3 changed files with 218 additions and 0 deletions.
44 changes: 44 additions & 0 deletions test/experimental/font-sizing/content.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<title>Content</title>
<style>
h3 {
font-size: 8px;
}
.medFont {
font-size: 10pt;
}
body.upsize {
font-size: 18pt;
}
</style>
</head>

<body>
<h3>I</h3>
<p style="font-size: 1.4em; color: #F0F;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis nec sapien libero.
</p>
<p>
<a
style="font: bold 0.8em Chalkboard, monospace"
href="javascript:(function() {document.body.className = 'upsize'})();"
>Change body font size using className.</a>
</p>
<p class="medFont">
Donec quis felis venenatis diam elementum pellentesque. Pellentesque ullamcorper, urna ac bibendum varius, odio est dictum purus, non euismod diam eros ac turpis. Sed vehicula semper nisi, id elementum orci semper accumsan. Morbi at neque id sapien eleifend hendrerit. Mauris interdum lectus vitae elit dapibus at viverra lorem semper. Nullam lacinia, lacus ut vulputate rutrum, erat purus vehicula libero, non varius felis felis sit amet sapien. Cras ornare nisi non nunc convallis rhoncus. In semper est eget diam imperdiet vitae dignissim justo lacinia. Morbi lorem arcu, feugiat non suscipit vitae, adipiscing ut tellus. Proin eget sem mi.
</p>
<p>
Aenean vitae elit augue. In blandit accumsan sem non aliquet. Quisque risus elit, pellentesque quis pharetra id, facilisis sit amet nibh. Aenean convallis tincidunt arcu quis posuere. Vivamus dictum facilisis felis eget vestibulum. Pellentesque lacinia lectus ac dolor lacinia eget commodo tellus mollis. In felis ante, ornare vitae fermentum vel, gravida sit amet sapien. Integer quis neque ut mi mollis rhoncus eget eget nisl. Nunc est elit, venenatis non lobortis in, interdum id orci. Phasellus malesuada, nibh non rutrum ornare, ligula risus viverra arcu, nec sagittis lectus est vel lorem. Aliquam et lectus id eros cursus scelerisque eu sed metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer pharetra dapibus euismod. Aliquam laoreet pharetra diam in aliquet. Vivamus leo ligula, bibendum sit amet sodales ac, ultrices volutpat orci. Mauris nec velit vel lectus lacinia tempus eget a massa.
</p>
<p>
Nullam faucibus, ante at ultrices tempor, nulla enim fringilla nunc, et vehicula risus tellus sit amet ipsum. Nullam ultrices imperdiet ligula, eget fermentum ante bibendum eu. Donec sollicitudin massa congue velit suscipit convallis. Quisque nec congue lacus. Etiam risus arcu, scelerisque et congue vitae, ullamcorper vitae felis. Etiam orci magna, viverra sit amet sodales at, sollicitudin eget dolor. Morbi congue diam sit amet magna fermentum vitae faucibus diam consequat. Phasellus et scelerisque lacus. Cras aliquam risus sed sem venenatis viverra. Nullam elit magna, vestibulum sed semper ut, tempus quis nisl. Pellentesque velit lectus, consequat vitae porttitor ac, adipiscing vel mi. Sed lobortis tincidunt dolor. Nulla placerat bibendum dui, pellentesque volutpat nisi tincidunt eu. Proin quis nulla nulla. Nullam interdum venenatis tempor. Nullam porta venenatis urna quis pharetra. Ut at purus id velit fermentum aliquam eget id justo. Sed vel urna ante. Suspendisse ligula dui, interdum quis venenatis vitae, egestas at turpis. Nulla eros elit, sollicitudin eu euismod vel, tincidunt non leo.
</p>
<p>
Nullam quis augue in erat dictum iaculis sed a tellus. Suspendisse tristique varius nisi, eget eleifend dolor commodo vestibulum. In auctor consequat venenatis. In bibendum tincidunt ipsum, ac faucibus tortor dapibus mollis. Vivamus a lorem metus, et aliquam turpis. Duis gravida pulvinar interdum. Morbi ut quam eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse nisl massa, interdum et elementum in, tincidunt id nisl. Nunc sodales risus et neque scelerisque porttitor. Etiam eget dui ipsum. Quisque vestibulum, quam sed adipiscing eleifend, arcu diam ornare leo, quis tincidunt nunc erat ultricies dui. Etiam libero tellus, adipiscing a volutpat sed, sagittis ac lorem. Integer sed erat nec nulla condimentum interdum. Integer mi metus, congue eget congue sed, accumsan at lectus. Nulla consequat venenatis odio sed tristique.
</p>

</body>
</html>
92 changes: 92 additions & 0 deletions test/experimental/font-sizing/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html>
<head>
<title>Proportional Font-sizing test</title>
<link rel="stylesheet" type="text/css" href="../../tests.css" />
<style>
iframe#reader {
border: 1px solid #F0F;
margin: 20px 0;
overflow: auto;
}
</style>
<script src="test.js"></script>
</head>

<body class="narrow">

<a href="../../index.html" class="backToGuide">&larr; Back to Guide</a>
<h1>Proportional Font-sizing test</h1>

<p>
Select a font-scale:
<select id="sizeSelect">
<option value="">&mdash;</option>
<option value="0.1">10%</option>
<option value="0.5">50%</option>
<option value="0.8">80%</option>
<option value="1.0">100%</option>
<option value="1.1">110%</option>
<option value="1.3">130%</option>
<option value="1.6">160%</option>
<option value="2.0">200%</option>
<option value="2.5">250%</option>
<option value="4.0">400%</option>
<option value="8.0">800%</option>
</select>
</p>

<iframe
id="reader"
src="content.html"
width="330"
height="400"
frameborder="0"
></iframe>
<!--
src="../../showcase/02-dickens/components/2.html"
-->

<hr />

<p>
Proportional font-sizing is tricky for a few reasons.
Firstly, we need to scale against the original font-size (in pixels)
for each element, so we have to traverse the DOM tree twice &mdash;
once to find font-size information and once to apply it.
</p>
<p>
Then, once applied, the font-size is "fixed" &mdash; it will no longer
respond to changes in the parent. So class changes triggered by
scripts won't work as expected for font-sizing.
</p>

<p>
The approach taken here mitigates the amount of behavioural modification
as a result of font-size changes. Primarily, whenever the scale is
unset (by choosing &mdash;), all font-size changes are reversed so that
full inheritance can again cascade.
</p>

<p>
To see this:
</p>

<ol>
<li>
Set scale to 100% &rarr; no change
</li>
<li>
Click 'Change body font size...' link &rarr; no change
because font-sizes do not cascade
</li>
<li>
Set scale to &mdash; &rarr; substantial increase to size of first para
</li>
<li>
Set scale to 100% &rarr; no change because calculating off new baseline
</li>
</ol>

</body>
</html>
82 changes: 82 additions & 0 deletions test/experimental/font-sizing/test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
(function () {

var sweptElements = false;

function init() {
var frame = document.getElementById('reader');
var sel = document.getElementById('sizeSelect');
sel.addEventListener('change', function (evt) {
adjustFontSize(frame.contentDocument, sel.value);
});
}


function adjustFontSize(doc, scale) {
var elems = doc.getElementsByTagName('*');
if (scale) {
scale = parseFloat(scale);
if (!sweptElements) {
sweepElements(doc, elems);
}

// Iterate over each element, applying scale to the original
// font-size. If a proportional font sizing is already applied to
// the element, update existing cssText, otherwise append new cssText.
//
for (var j = 0, jj = elems.length; j < jj; ++j) {
var newFs = fsProperty(elems[j].pfsOriginal, scale);
if (elems[j].pfsApplied) {
replaceFontSizeInStyle(elems[j], newFs);
} else {
elems[j].style.cssText += newFs;
}
elems[j].pfsApplied = scale;
}
} else if (sweptElements) {
// Iterate over each element, removing proportional font-sizing flag
// and property from cssText.
for (var j = 0, jj = elems.length; j < jj; ++j) {
if (elems[j].pfsApplied) {
var oprop = elems[j].pfsOriginalProp;
var opropDec = oprop ? 'font-size: '+oprop+' ! important;' : '';
replaceFontSizeInStyle(elems[j], opropDec);
elems[j].pfsApplied = null;
}
}

// Establish new baselines in case classes have changed.
sweepElements(doc, elems);
}
}


function sweepElements(doc, elems) {
// Iterate over each element, looking at its font size and storing
// the original value against the element.
for (var i = 0, ii = elems.length; i < ii; ++i) {
var currStyle = doc.defaultView.getComputedStyle(elems[i], null);
var fs = parseFloat(currStyle.getPropertyValue('font-size'));
elems[i].pfsOriginal = fs;
elems[i].pfsOriginalProp = elems[i].style.fontSize;
}
sweptElements = true;
}


function fsProperty(orig, scale) {
return 'font-size: '+(orig*scale)+'px ! important;';
}


function replaceFontSizeInStyle(elem, newProp) {
var lastFs = /font-size:[^;]/
elem.style.cssText = elem.style.cssText.replace(lastFs, newProp);
}


window.onload = init;
window.onpageshow = function () {
document.getElementById('sizeSelect').value = '';
}

})();

0 comments on commit bf51bc8

Please sign in to comment.