Scale Text Element Relative To Its Parent Container – Textblock

Category: Javascript , Text | May 28, 2019
Author: glyphic-co
Views Total: 339
Official Page: Go to website
Last Update: May 28, 2019
License: MIT

Preview:

Scale Text Element Relative To Its Parent Container – Textblock

Description:

The Textblock JavaScript library dynamically adjusts the font size, font weight, and line-height to fit text within its parent container when resizing.

Install & Download:

# NPM
$ npm install textblock --save

How to use it:

Import the Textblock or directly load the compiled version from a CDN.

<script src="https://unpkg.com/textblock"></script>

Create a new Textblock object and define the target text elements:

Textblock([
  {
    target: ".element-1",
  },
  {
    target: "#element-2"
  }
]);

Pass the following parameters to customize the Textblock.

  • minWidth: min width of text element
  • maxWidth: max width of text element
  • minWidth_FontSize: min font size
  • maxWidth_FontSize: max font size
  • minWidth_LineHeight: min line height
  • maxWidth_LineHeight: max line height
  • minWidth_VariableGrade: min font weight
  • maxWidth_VariableGrade: max font weight
  • container: defaults to ‘parent’
  • fontSize_Units: em, px, rem, etc
Textblock([
  {
     target: ".element-1",
     minWidth: 280,
     maxWidth: 800,
     minWidth_FontSize: 1.9,
     maxWidth_FontSize: 2.6,
     minWidth_LineHeight: 1.33,
     maxWidth_LineHeight: 1.25,
     minWidth_VariableGrade: 366,
     maxWidth_VariableGrade: 300,
     container: "self",
     fontSize_Units: "rem"
  },
  {
     target: "#element-2",
     minWidth: 280,
     maxWidth: 800,
     minWidth_FontSize: 1.9,
     maxWidth_FontSize: 2.6,
     minWidth_LineHeight: 1.33,
     maxWidth_LineHeight: 1.25,
     minWidth_VariableGrade: 366,
     maxWidth_VariableGrade: 300,
     container: "self",
     fontSize_Units: "rem"
  }
]);

v0.12.0 (05/28/2019)

  • Ability to use as a Node Module
  • Remove unused dependencies

You Might Be Interested In:


Leave a Reply