readometer

    1.0.3 • Public • Published

    Readometer

    The correct reading progress measurer.

    NPM npm version npm bundle size npm

    Uses a combination of time spent on the dom element and scroll points to track the reading progress of the user. Spent time, effects the reading progress based on average reading speed and language of the text.

    Install

    npm i readometer

    Import

    There are different types of distributions depending on your use case. Essentially, the package can be imported via require:

    const kit = require('readometer')

    or via script tag:

    <script type="text/javascript" src="https://unpkg.com/basekits@1/dist/basekits.iife.js"></script>
    <script type="text/javascript" src="https://unpkg.com/event-emitter-object@1/dist/event-emitter-object.iife.js"></script>
    <script type="text/javascript" src="https://unpkg.com/visibility-state-listener@1/dist/visibility-state-listener.iife.js"></script>
     
    <script src="https://unpkg.com/readometer@1/dist/readometer.iife.js" crossorigin type="text/javascript"></script>

    Use

    The library needs a DOM element and language of the text inside that DOM element:

    const meter = new Readometer()
    meter.on('progress', function(progress) {
      console.log('User read ' + progress + ' percent of the text.')
    })
    meter.start( document.getElementById('sample1'), 'en' )

    Algorithm

    Basically there are two parameters that measure the progress of reading. The average reading speed by language and the size of the scrollable area.

    The library creates a target reading time according to the number of words inside DOM element, language of the text, and average reading speed. Then it checks if the DOM element has a scroll and creates scroll points according to the visible area of the DOM element. Those points must be passed by user by scrolling in order to progress reading.

    A simple event emitter integrated to the library therefore you can listen for reading progress from 0 to 100.

    There is also a visiblityState listener inside the library which excludes the time of reading when the browser tab is not active. (Read more about visibilityState API)

    Choose a text-only DOM element for more precise results.

    Tests

    See tests folder for example cases.

    Notes

    Average reading speeds by language are taken from:

    https://www.irisreading.com/average-reading-speed-in-various-languages/


    Distributions Report

    This is an auto-generated report that shows the type, name and size of the bundles available to use individually.

    [
      "readometer.amd.js (3.63 KB)",
      "readometer.amd.polyfilled.js (20.40 KB)",
      "readometer.cjs.js (3.58 KB)",
      "readometer.cjs.polyfilled.js (20.36 KB)",
      "readometer.es.js (3.51 KB)",
      "readometer.es.polyfilled.js (20.30 KB)",
      "readometer.iife.js (3.62 KB)",
      "readometer.iife.polyfilled.js (20.39 KB)",
      "readometer.umd.js (3.93 KB)",
      "readometer.umd.polyfilled.js (20.71 KB)"
    ]

    Babel Polyfills Report

    This is an auto-generated report that shows the pollyfils added by core-js to the pollyfilled distributions based on the targets configuration described below.

    // polyfills:
    [
      "es.symbol",
      "es.symbol.description",
      "es.symbol.iterator",
      "es.array.iterator",
      "es.object.get-prototype-of",
      "es.object.set-prototype-of",
      "es.object.to-string",
      "es.reflect.construct",
      "es.regexp.to-string",
      "es.string.iterator",
      "web.dom-collections.iterator",
      "es.array.concat",
      "es.array.filter",
      "es.number.constructor",
      "es.number.parse-float",
      "es.regexp.exec",
      "es.string.split",
      "web.timers"
    ]
    // based on the targets:
    {
      "android": "4.4.3",
      "chrome": "49",
      "edge": "17",
      "firefox": "52",
      "ie": "9",
      "ios": "9.3",
      "opera": "66",
      "safari": "11.1",
      "samsung": "4"
    }

    Thanks for watching 🐬

    ko-fi

    Install

    npm i readometer

    DownloadsWeekly Downloads

    3

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    613 kB

    Total Files

    31

    Last publish

    Collaborators

    • avatar