Scale Text Element Relative To Its Parent Container – Textblock

Preview:

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"
  }
]);

Changelog:

v0.12.3 (07/20/2019)

• Update

v0.12.0 (05/28/2019)

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