From ea2fa655330b4902f45e182d4fe4360c2fd7c951 Mon Sep 17 00:00:00 2001 From: Nathan Ford Date: Mon, 14 Jul 2014 17:10:56 +0100 Subject: [PATCH] First commit --- css/styles.css | 19 ++++ demo.html | 95 ++++++++++++++++++ js/typography.js | 256 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 370 insertions(+) create mode 100644 css/styles.css create mode 100644 demo.html create mode 100644 js/typography.js diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..2bfe373 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,19 @@ +/* Example CSS - external file */ + +p { + min-font-size: 14px; +} + +p, li, h3, dd { + font-size: 2vw; + max-width: 32em; + min-font-size: 12px; +} + +p { + margin: 0; +} + +p + p { + text-indent: 1em; +} \ No newline at end of file diff --git a/demo.html b/demo.html new file mode 100644 index 0000000..96a5f5c --- /dev/null +++ b/demo.html @@ -0,0 +1,95 @@ + + + + + + + + +Min-Max-Font-Size Demo + + + + + + + + + +
+ +

A quick brown fox jumps over the lazy dog.

+ +

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+ +

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

+ +

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

+ +

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

+ +

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

+ +

Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

+ +

Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.

+ + +
+ + + + + \ No newline at end of file diff --git a/js/typography.js b/js/typography.js new file mode 100644 index 0000000..744b76b --- /dev/null +++ b/js/typography.js @@ -0,0 +1,256 @@ +/* Stylefill.js – https://github.com/nathanford/stylefill + +This script acts as a bridge between your CSS and your JavaScript, allowing your scripts to read your invented CSS properties and then run whatever function using the assigned selector and property value. + +*/ + +var stylefill = { + + allRules : new Object(), + + allFills : new Object(), + + objSize : function(obj) { + + var size = 0, key; + + for (key in obj) { + if (obj.hasOwnProperty(key)) size++; + } + + return size; + + }, + + arraySliceShim : function () { // fixes Array.prototype.slice support for IE lt 9 + + 'use strict'; + var _slice = Array.prototype.slice; + + try { + _slice.call(document.documentElement); + } + catch (e) { // Fails in IE < 9 + + Array.prototype.slice = function (begin, end) { + + var i, arrl = this.length, a = []; + + if (this.charAt) { + + for (i = 0; i < arrl; i++) { + a.push(this.charAt(i)); + } + + } + else { + + for (i = 0; i < this.length; i++) { + a.push(this[i]); + } + + } + + return _slice.call(a, begin, end || a.length); + + }; + + } + + }, + + init : function (params) { + + this.allFills = params; + + this.getStyleSheet(params); + + }, + + loadFile : function(params, url, scount) { + + var req; + + if (window.XMLHttpRequest) req = new XMLHttpRequest(); + else req = new ActiveXObject("Microsoft.XMLHTTP"); + + req.open("GET", url, true); + + req.onreadystatechange = function() { + + if (this.readyState == 4 && this.status == 200) stylefill.findRules(params, this.responseText, scount); + + }; + + req.send(null); + + }, + + getStyleSheet : function (params) { + + var sheetstext = new Array(), + sheets = Array.prototype.slice.call(document.getElementsByTagName('link')); // grab stylesheet links - not used yet + + sheets.push(Array.prototype.slice.call(document.getElementsByTagName('style'))[0]); // add on page CSS + + sheets.reverse(); + + var scount = this.objSize(sheets); + + while (scount-- > 0) { + + var sheet = sheets[scount]; + + if (sheet.innerHTML) this.findRules(params, sheet.innerHTML, scount); + else if (sheet.href.match(document.domain)) this.loadFile(params, sheet.href, scount); + + } + + }, + + checkRule : function (property) { + + var propertyCamel = property.replace(/(^|-)([a-z])/g, function (m1, m2, m3) { return m3.toUpperCase(); }); + + if (('Webkit' + propertyCamel) in document.body.style + || ('Moz' + propertyCamel) in document.body.style + || ('O' + propertyCamel) in document.body.style + || property in document.body.style) return true; + + else return false; + + }, + + findRules : function (params, sheettext, scount) { + + if (sheettext) { + + var pcount = this.objSize(params); + + for (property in params) { + + var selreg = new RegExp('([^}{]+){([^}]+)?' + property.replace('-', '\\-') + '[\\s\\t]*:[\\s\\t]*([^;]+)', 'gi'), + selmatch, + + support = stylefill.checkRule(property); + + while (selmatch = selreg.exec(sheettext)) { + + var sels = selmatch[1].replace(/^([\s\n\r\t]+|\/\*.*?\*\/)+/, '').replace(/[\s\n\r\t]+$/, ''), + val = selmatch[3]; + + sels = sels.split(','); + + for (sel in sels) { + + var s = sels[sel]; + + if (!stylefill.allRules[s]) stylefill.allRules[s] = new Object(); + stylefill.allRules[s][property] = { + 'support': support, + 'value': val + }; + + } + + } + + } + + if (scount == 1) this.runFills(); + + } + + }, + + runFills : function () { + + var allRules = stylefill.allRules, + allFills = stylefill.allFills; + + for (i in allRules) { + + var rules = allRules[i]; + + for (j in rules) { + + var rule = rules[j], + func = allFills[j], + + newrule = { + + support : rule['support'], + selector: i, + property: j, + value: rule['value'] + + }; + + func(newrule); + + } + + } + + }, + + binder : function (object, events, func) { + + var events = events.split(','), + eventscount = events.length; + + while (eventscount-- > 0) { + + if (object.attachEvent) object.attachEvent('on' + events[eventscount].trim(), func); + else object.addEventListener(events[eventscount].trim(), func, false); + + } + + } + +}; + +/* Begin min-max-font-size functions */ + +var typo = { + + minMaxFontSize : function (selector) { + + var eles = document.querySelectorAll(selector), + elescount = eles.length; + + while (elescount-- > 0) { + + var ele = eles[elescount], + + selRules = stylefill.allRules[selector], + max = selRules['max-font-size'] ? selRules['max-font-size']['value'] : false, + min = (selRules['min-font-size']) ? selRules['min-font-size']['value'] : false; + + ele.style.fontSize = ''; + + var eleFontSize = parseFloat(window.getComputedStyle(ele, null).getPropertyValue('font-size')); + + if (min && eleFontSize <= parseFloat(min)) ele.style.fontSize = min; + else if (max && eleFontSize >= parseFloat(max)) ele.style.fontSize = max; + + } + + } + + +}; + +typo.maxFontSize = typo.minFontSize = function (rule) { + + typo.minMaxFontSize(rule.selector); + + stylefill.binder(window, 'resize', function () { typo.minMaxFontSize(rule.selector); }); + +}; + +// assign the CSS property to the function +stylefill.init({ + 'max-font-size' : typo.maxFontSize, + 'min-font-size' : typo.minFontSize +}); \ No newline at end of file