Textscaler

Functions

Util.textscaler

Definition

Name
Util.textscaler
Syntax
Void = Util.textscaler( Node scope [, JSON _settings ] );

Description

Define text scaling on resizing.

Parameters

scope
Node scope of text scaling rules
_settings
JSON text scaling rules, grouped by tags
Options
unit
Unit to use for font-size
min_size
Minimum page width for scaling
min_width
Minimum font-size (on min_size)
max_size
Maximum page width for scaling
max_width
Maximum font-size (on max_size)

Returns

Void

Examples

u.textscaler(scene,{ "h2":{ "unit":"rem", "min_size":2, "min_width":200, "max_size":4, "max_width":1600 }, "p":{ "unit":"px", "min_size":12, "min_width":800, "max_size":20, "max_width":1200 }, });

Scales h2 from 2rem to 4rem between browser width 200px and 1600px and scales p from 12px to 20px between browser width 800px and 1200px.

Uses

JavaScript
  • document.createElement
  • document.setAttribute
  • document.head
  • document.createTextNode
  • document.appendChild
  • StyleSheet.insertRule
  • cssRule.style.setProperty
Manipulator
  • Util.randomString
  • Util.Events.addEvent
  • Util.browserW
  • Util.Events.removeEvent
  • Util.appendElement

Files

Main file

  • u-textscaler.js

Segment support files

  • none

Segment dependencies

desktop_edge
u-textscaler.js + u-dom.js + u-events.js + u-geometry.js + u-string.js
desktop_ie11
u-textscaler.js + u-dom.js + u-events.js + u-geometry.js + u-string.js
desktop
u-textscaler.js + u-dom.js + u-events.js + u-geometry.js + u-string.js
desktop_ie10
u-textscaler.js + u-dom.js + u-dom-desktop_ie10.js + u-events.js + u-geometry.js + u-string.js
desktop_ie9
u-textscaler.js + u-dom.js + u-dom-desktop_ie10.js + u-events.js + u-geometry.js + u-string.js
desktop_light
not supported
tablet
u-textscaler.js + u-dom.js + u-events.js + u-geometry.js + u-string.js
tablet_light
u-textscaler.js + u-dom.js + u-events.js + u-geometry.js + u-string.js
smartphone
u-textscaler.js + u-dom.js + u-events.js + u-geometry.js + u-string.js
mobile
not tested
mobile_light
not supported
tv
not tested
seo
not supported