An accessiblity plugin Readable.js looks to provide users with the ability to adjust the type as they need while providing developers a toolset to extend.
This project is actively being developed. I will remove the (alpha) once everything is documented and cleaned up.
You can see Readable in action at www.readable-js.com/demo
// Select a target to append widget
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();
Readble will work out of the box with its default settings. The following is only needed if you want to customize what is provided.
<script src="assets/js/readable.min.js"></script>
readable.options = {
parent: '.message',
namespace: 'readable',
title: 'Change Typesetting',
defaultStyles: true,
addRules: true,
inputs: [],
elements: [],
templates: [],
};
parent
Set where the widget will be appended.namespace
Set namespace for component, used to scaffold out component classes.title
Set block title.defaultStyles
True or false, enable basic styling.inputs
Array, form elements to create.elements
Array, elements to style.templates
Array, form element will render using these templates. Type must match.
id="${input.id}"
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,
},
],
type
Used to match with template.css
CSS class .name
Name of form element.update
Callback function.value
Set initial value.
min
Set min value.max
Set max value.step
Set step value.
Any property can be added to the input and accessed in the template through the input obj.
Callback function that will fire on update. Elem refers to Readable.elem, document is available.
update: function(elements, v) {
elements.forEach(function(elem) {
elem.style.fontSize = v + 'px';
});
},
templates: {
range: function(input) {
return `<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}" />`;
},
},
.tools {
position: absolute;
top: 0;
right: -170px;
z-index: 999;
padding: 8px;
margin: 8px;
border: 2px solid #dcdcdc;
border-radius: 3px;
background-color: white;
&:hover {
cursor: pointer;
}
}
.input-group {
margin-top: 8px;
margin-bottom: 8px;
label {
font-size: 12px;
font-weight: bold;
}
input[type='radio'] {
display: inline-block;
}
input[type='range'] {
display: block;
}
}
Style with css
/* Wrapper */
.input-group {
/* Your Styles */
}
/* Convention */
.[namespace]--[element]-[name-acronym] {
/* Your Styles */
}
/* Font size range slider example */
.readable--label-fs {
/* Your Styles */
}
.readable--range-fs {
/* Your Styles */
}
<div class="input-group range">
<label class="readable--label-fs" for="font-size"
>Font Size: <span>24</span></label
>
<input
id="readable-range-fs"
name="font-size"
class="readable--range-fs"
type="range"
min="14"
max="36"
step="1"
/>
</div>
- Vanilla JS
Please read [CONTRIBUTING.md] for details on our code of conduct, and the process for submitting pull requests to us. (coming soon)
- Kyle Langford - www.kylelangford.com