logical-everywhere

Logical Properties and Values EVERYWHERE

Collection of utilities to work around features that are not fully compatible with logical properties and values (such as translateX, translateY or getBoundingClientRect).

Motivation

When positioning elements with JS, it is difficult to work with logical properties and values in mind. For example, if I want to display a tooltip in the block-start direction of an element (usually physically above), I first need to know where the inline and block axes are located in order to then position the tooltip in the correct physical direction (top, left, bottom or right):

This package aims to simplifies this process.

Installation

npm i --save logical-everywhere

Utilities

getPhysicalDirection

Get the physical direction that corresponds to the logical direction of a element.

const myElement = document.getElementById('my-element');

const physicalDirection = getPhysicalDirection(myElement, 'inline-start');

console.log(physicalDirection); // prints "left"

getPhysicalFlexAxes

Get flexbox's main- and cross-axis as physical axes.

const myElement = document.getElementById('my-element');

myElement.style.flexDirection = 'row-reverse';
const axesRR = getPhysicalFlexAxes(myElement);
console.log(axesRR.main); // prints "right-left"

myElement.style.flexDirection = 'column-reverse';
const axesCR = getPhysicalFlexAxes(myElement);
console.log(axesCR.main); // prints "bottom-top"

getElementAxes

Get inline- and block-axis of a HTML element.

const { block, inline } = getElementAxes(myElement);

console.log(inline); // prints "left-right"
console.log(block); // prints "top-bottom"

axisDimensionAndDirection

Get dimension and direction of a physical axis.

This is especially useful when trying to calculate a dynamic translateX / translateY.

const myElement = document.getElementById('my-element');

const { inline } = getElementAxes(myElement);

const { dimension, multiplier } = axisDimensionAndDirection(inline);

// Translate 3rem in inline-end direction.
const transform = `translate${dimension.toUpperCase()}(${3 * multiplier}rem)`;
// use -3 instead of 3 to translate to the inline-start direction

axisStartEnd

Get start- and end-direction of a physical axis.

const { start, end } = axisStartEnd('top-bottom');
console.log(start); // prints "top"
console.log(end); // prints "bottom"

reverseAxis

Reverse a physical axis

const reversed = reverseAxis('top-bottom');

console.log(reversed); // prints "bottom-top"