squaretext

This package takes a string of text and breaks it into lines so that it fits a square nicely. The square has width equal to height what makes it easy to place square-formatted text into shapes such as circles or stars without sacrificing readability.

The main use cases include the labels of nodes in a network visualization. The nodes usually have a round shape and textual labels in various lengths. Therefore a piece of text composed into square will fit the node nicely.

The package is designed for client-side web applications. It requires the browser to support TextMetrics Web API.

Install

Via npm

$ npm install squaretext

Via yarn:

$ yarn add squaretext

Via unpkg:

<script src="https://unpkg.com/[email protected]/dist/squaretext.min.js"></script>

Usage

Just do a simple function call:

> import fitParagraph from 'squaretext'
> fitParagraph('Fit me inside a square!', 200, 'Arial')
HTMLElement <p style="width: 200px; padding: 0; font-size: 42.3px; line-height: 52.9px;">Fit me inside a square!</p>

API

squaretext.fitParagraph(str, width[, fontName[, fontStyle]])

Place the text into a paragraph and adjust the paragraph font size and line height so that the text flows roughly into a square shape. The font dimensions are computed based on the given font family name and style.

Parameters:

str: a string
width: an integer, the paragraph width in pixels.
fontName: optional string, the font family name. Names containing whitespace should be quoted, for example "Comic Sans MS". The default is sans-serif.
fontStyle: optional string, the font style e.g italics. Default is an empty string.

Return: HTMLElement, the paragraph element with inline styles.