Awesome

CircleType

A JavaScript library that lets you curve type on the web.

Demo: https://circletype.labwire.ca

Installation

In a browser:

<script src="circletype.min.js"></script>

Using CDN:

<script src="https://cdn.jsdelivr.net/gh/peterhry/CircleType@2.3.1/dist/circletype.min.js"></script>

Using npm:

$ npm i circletype --save

Load ES module:

import CircleType from `circletype`;

API

<a name="CircleType"></a>

CircleType

A CircleType instance creates a circular text element.

Kind: global class

• CircleType
  • new CircleType(elem, [splitter])
  • .radius(value) ⇒ <code>CircleType</code>
  • .radius() ⇒ <code>number</code>
  • .dir(value) ⇒ <code>CircleType</code>
  • .dir() ⇒ <code>number</code>
  • .forceWidth(value) ⇒ <code>CircleType</code>
  • .forceWidth() ⇒ <code>boolean</code>
  • .forceHeight(value) ⇒ <code>CircleType</code>
  • .forceHeight() ⇒ <code>boolean</code>
  • .refresh() ⇒ <code>CircleType</code>
  • .destroy() ⇒ <code>CircleType</code>

<a name="new_CircleType_new"></a>

new CircleType(elem, [splitter])

Example

// Instantiate `CircleType` with an HTML element.
const circleType = new CircleType(document.getElementById('myElement'));

// Set the text radius and direction. Note: setter methods are chainable.
circleType.radius(200).dir(-1);

// Provide your own splitter function to handle emojis
// @see https://github.com/orling/grapheme-splitter
const splitter = new GraphemeSplitter()
new CircleType(
  document.getElementById('myElement'),
  splitter.splitGraphemes.bind(splitter)
);

<a name="CircleType+radius"></a>

circleType.radius(value) ⇒ <code>CircleType</code>

Sets the desired text radius. The minimum radius is the radius required for the text to form a complete circle. If value is less than the minimum radius, the minimum radius is used.

Kind: instance method of <code>CircleType</code>
Returns: <code>CircleType</code> - The current instance.

Example

const circleType = new CircleType(document.getElementById('myElement'));

// Set the radius to 150 pixels.
circleType.radius(150);

<a name="CircleType+radius"></a>

circleType.radius() ⇒ <code>number</code>

Gets the text radius in pixels. The default radius is the radius required for the text to form a complete circle.

Kind: instance method of <code>CircleType</code>
Returns: <code>number</code> - The current text radius.
Example

const circleType = new CircleType(document.getElementById('myElement'));

circleType.radius();
//=> 150

<a name="CircleType+dir"></a>

circleType.dir(value) ⇒ <code>CircleType</code>

Sets the text direction. 1 is clockwise, -1 is counter-clockwise.

Kind: instance method of <code>CircleType</code>
Returns: <code>CircleType</code> - The current instance.

Example

const circleType = new CircleType(document.getElementById('myElement'));

// Set the direction to counter-clockwise.
circleType.dir(-1);

// Set the direction to clockwise.
circleType.dir(1);

<a name="CircleType+dir"></a>

circleType.dir() ⇒ <code>number</code>

Gets the text direction. 1 is clockwise, -1 is counter-clockwise.

Kind: instance method of <code>CircleType</code>
Returns: <code>number</code> - The current text radius.
Example

const circleType = new CircleType(document.getElementById('myElement'));

circleType.dir();
//=> 1 (clockwise)

<a name="CircleType+forceWidth"></a>

circleType.forceWidth(value) ⇒ <code>CircleType</code>

Sets the forceWidth option. If true the width of the arc is calculated and applied to the element as an inline style.

Kind: instance method of <code>CircleType</code>
Returns: <code>CircleType</code> - The current instance.

Example

const circleType = new CircleType(document.getElementById('myElement'));

circleType.radius(384);

console.log(circleType.container);
//=> <div style="position: relative; height: 3.18275em;">...</div>

// Enable the force width option
circleType.forceWidth(true);

console.log(circleType.container);
//=> <div style="position: relative; height: 3.18275em; width: 12.7473em;">...</div>

<a name="CircleType+forceWidth"></a>

circleType.forceWidth() ⇒ <code>boolean</code>

Gets the forceWidth option. If true the width of the arc is calculated and applied to the element as an inline style. Defaults to false.

Kind: instance method of <code>CircleType</code>
Returns: <code>boolean</code> - The current forceWidth value
Example

const circleType = new CircleType(document.getElementById('myElement'));

circleType.forceWidth();
//=> false

<a name="CircleType+forceHeight"></a>

circleType.forceHeight(value) ⇒ <code>CircleType</code>

Sets the forceHeight option. If true the height of the arc is calculated and applied to the element as an inline style.

Kind: instance method of <code>CircleType</code>
Returns: <code>CircleType</code> - The current instance.

Example

const circleType = new CircleType(document.getElementById('myElement'));

circleType.radius(384);

console.log(circleType.container);
//=> <div style="position: relative; height: 3.18275em;">...</div>

// Disable the force height option
circleType.forceHeight(false);

console.log(circleType.container);
//=> <div style="position: relative;">...</div>

<a name="CircleType+forceHeight"></a>

circleType.forceHeight() ⇒ <code>boolean</code>

Gets the forceHeight option. If true the height of the arc is calculated and applied to the element as an inline style. Defaults to true.

Kind: instance method of <code>CircleType</code>
Returns: <code>boolean</code> - The current forceHeight value
Example

const circleType = new CircleType(document.getElementById('myElement'));

circleType.forceHeight();
//=> true

<a name="CircleType+refresh"></a>

circleType.refresh() ⇒ <code>CircleType</code>

Schedules a task to recalculate the height of the element. This should be called if the font size is ever changed.

Kind: instance method of <code>CircleType</code>
Returns: <code>CircleType</code> - The current instance.
Example

const circleType = new CircleType(document.getElementById('myElement'));

circleType.refresh();

<a name="CircleType+destroy"></a>

circleType.destroy() ⇒ <code>CircleType</code>

Removes the CircleType effect from the element, restoring it to its original state.

Kind: instance method of <code>CircleType</code>
Returns: <code>CircleType</code> - This instance.
Example

const circleType = new CircleType(document.getElementById('myElement'));

// Restore `myElement` to its original state.
circleType.destroy();

Development Commands