Scale Text Element Relative To Its Parent Container – Textblock

Category: Javascript , Text | February 27, 2019
Author: glyphic-co
Views Total: 158
Official Page: Go to website
Last Update: February 27, 2019
License: MIT


Scale Text Element Relative To Its Parent Container – Textblock


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 install textblock --save

How to use it:

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

<script src=""></script>

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

    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
    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