A JavaScript library to make text on your websites quicker to read.
Live website: https://readable.cybar.dev
Check the example/
directory for code.
Add this to your HTML before any other script tags:
<script async src="https://cdn.jsdelivr.net/gh/cybardev/ReadAble@v2/readable.js"></script>
- download
readable.js
- place
readable.js
in your project adjacent to other script files - include it in HTML via
<script>
tag
In your JS script file, pass in a config object as parameter to the ReadAble
constructor:
const config = {
identifier: ".readable",
fontWeight: 800,
fontColor: "black",
fontSize: "1em",
scaleAll: true,
};
let rdbl = new ReadAble(config);
Adjust the values to control the first letters' style.
PS: font*
values are CSS styles; identifier
is a CSS selector. Check source code to see how they're used. Default values will be used if no parameter is given.
- Code to wrap first letter of inner text in
<span>
: https://stackoverflow.com/a/77084508