Rangeblock NPM

rangeblock

rangeblock is a JavaScript library that makes it easy to locate, measure, and represent layouts of text ranges in a web page.

It provides a more precise function than Element.getClientRects() which returns dimensions for each border box.

Why do I need it?

rangeblock does 2 things for you:

It gives you detailed layout information of a range of text in the form of an array of dimensions, each representing a line or block of text.
It provides a text representation for Range objects in the format of unique path, so that you can persistant the range. Then you can save it on server or shared it across users and browsers.

How is it useful?

Its possible application is quite open-ended. For example,

build non-intrusive web annotation browswer plug-ins
- hlc
add annotation functions to your existing webistes
create high-precision text locator extensions

Install

npm install rangeblock --save

Usage

// TypeScript
import * as rb from "rangeblock"

// measure layouts
let block = rb.extractSelectedBlock(window, document);
if (!block){
  console.error("please select some text on the web page");
  return;
}
console.info("Text layout: " + JSON.stringify(block.dimensions));

// representation of the text range 
console.info("Text layout: " + JSON.stringify(block.rangeMeta));

// recreate range using RangeMeta
let meta :RangeMeta = ... ; 
block = rb.restoreBlock(window, document, meta);