How do I use it?

 
<script src="assets/js/readable-js.min.js"></script>
          

How does it work?

Readble will work out of the box with its default settings. The following is only needed if you want to customize what is provided.

 
// Select a Target Element
var parent = document.querySelector('.make-readable');
var elements = document.querySelectorAll('.make-readable p');

// construct an instance of Readable, passing the element
var readable = new Readable(parent, elements, /* options */);

// initialise
readable.init();

          

 

var options = {
  parent: '.message',
  title: 'Change Typesetting',
  defaultStyles: true,
  addRules: true,
  namespace: 'readable',
  elements: [],
  inputs: [
    {
      type: 'range',
      css: 'font-size',
      name: 'font-size',
      update: function(elements, v) {
        elements.forEach(function(elem) {
          elem.style.fontSize = v + 'px';
        });
      },
      min: 14,
      max: 36,
      step: 1,
      value: 24,
    },
    {
      type: 'range',
      css: 'word-spacing',
      name: 'word-spacing',
      update: function(elements, v) {
        elements.forEach(function(elem) {
          elem.style.wordSpacing = v + 'em';
        });
      },
      min: 0,
      max: 3,
      step: 0.1,
      value: 0,
    },
    {
      type: 'range',
      css: 'letter-spacing',
      name: 'letter-spacing',
      update: function(elements, v) {
        elements.forEach(function(elem) {
          elem.style.letterSpacing = v / 10 + 'em';
        });
      },
      min: 0,
      max: 3,
      step: 0.1,
      value: 0,
    },
    {
      type: 'range',
      css: 'line-height',
      name: 'line-height',
      update: function(elements, v) {
        elements.forEach(function(elem) {
          elem.style.lineHeight = v;
        });
      },
      min: 1,
      max: 3,
      step: 0.1,
      value: 1.4,
    },
  ],
  // Match these with the inputs above using the type property
  templates: {
    range: `<label class="${input.labelClass}" for="${input.name}">${input.label} <span>${input.value}</span></label>
          <input id="${input.id}" name="${input.name}" class="${input.class}" type="range"  min="${input.min}" max="${input.max}" step="${input.step}" />`,
  },
};
          

Documentation

Full documentation is available on Github.

New Features Coming Soon

• Support for Checkboxes

How can I contribute?

If you would like to contribute or submit a bug check out the project on Github