Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including align-to-sides with all npm packages installed. Try it out:

var alignToSides = require("align-to-sides")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

align-to-sides v1.1.2

This library can be used to dynamically set text alignment for a set of elements based on their position relative to their parent element(s).

Align To Sides

This library can be used to dynamically ensure all child elements of a given CSS selector are text aligned according to their position relative to their parent. On page-load the elements' positions are measured, elements nearest the left edge of thier parent are text-aligned left, elements nearest the right edge of their parent are text-aligned right, and if a tolerance value is provided elements further than the tolerance value from either edge are text-aligned center. On a window resize (or orientation change on mobile) the positions are measured again and the text-alignments reset to accomodate any shift in layout caused by the change in window size.

Additional triggers can be added via LayoutQueue.

Installation

Install via npm or yarn.

npm install align-to-sides

OR

yarn add align-to-sides

Then require this module within your javascript:

var AlignToSides = require('align-to-sides');

Basic Use

The methods of AlignToSides all use standard CSS selectors, (e.g. 'p', '.class', '#id'). To align the children of a element or set of elements, pass the selector to init():

AlignToSides.init(selector);

A tolerance value in pixels can be added as a second parameter to set any child elements to text-align: center; if they are further than the given pixel value from either side. Without a tolerance value, all children will be text-aligned either right or left.

AlignToSides.init(selector, tolerance);

A third boolean parameter can be added to reverse the orientation, and align elements to the center rather than the sides. This parameter will default to false.

var reverse = true;
AlignToSides.init(selector, tolerance, reverse);

A condition passed as a function can be added as a fourth parameter, allowing for a conditional applicaiton of the alignment.

var condition = function () { return false }
AlignToSides.init(selector, tolerance, reverse, condition);

Advanced use

To manually unset the text alignment of an elements children use unset():

AlignToSides.unset(selector);

To manually set the text alignment of an elements children use 'set()';

AlignToSides.set(selector);

To add additional triggers for the execution of the queue see the documentation for LayoutQueue;

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free