Scale Text Element Relative To Its Parent Container – Textblock

Category: Javascript , Text | February 27, 2019
Author: glyphic-co
Views Total: 86
Official Page: Go to website
Last Update: February 27, 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
  • minWidthFontSize: min font size
  • maxWidthFontSize: max font size
  • minWidthLineHeight: min line height
  • maxWidthLineHeight: max line height
  • minWidthVariableGrade: min font weight
  • maxWidthVariableGrade: max font weight
  • units: em, px, rem, etc
Textblock([
  {
    target: ".element-1",
    minWidth: 400,
    maxWidth: 800,
    minWidthFontSize: 18,
    maxWidthFontSize: 24,
    minWidthLineHeight: 1.33,
    maxWidthLineHeight: 1.2,
    units: "px"
  },
  {
    target: "#element-2",
    minWidthFontSize: 1.8,
    maxWidthFontSize: 2.4,
    minWidthVariableGrade: 490,
    maxWidthVariableGrade: 400,
    container: "self"
  }
]);

 

You Might Be Interested In:


Leave a Reply