- ×
An easy to use javascript plugin offers you complete DOWN-TO-THE-LINE control for radical web typography.
Filed under typographyAn easy to use javascript plugin offers you complete DOWN-TO-THE-LINE control for radical web typography.
In CSS we already have the selector
::first-line
to apply style on the first line of element. But there is no selector like::nth-line()
,::nth-last-line()
or even::last-line
. Then I read an article A Call for ::nth-everything from CSS tricks.::nth-line()
is actually really useful in some situation.There comes LINING.JS. It offers you complete DOWN-TO-THE-LINE control like this:
<div class="poem" data-lining>Some text...</div> <style> .poem .line[first] { /* `.poem::first-line`*/ } .poem .line[last] { /* `.poem::last-line` */ } .poem .line[index="5"] { /* `.poem::nth-line(5)` */ } .poem .line:nth-of-type(-n+2) { /* `.poem::nth-line(-n+2)` */ } .poem .line:nth-last-of-type(2n) { /* `.poem:::nth-last-line(2n)` */ } </style> <script src="YOUR_PATH/lining.min.js"></script>
Supported browsers
BASIC USAGE
All you need to do is adding
data-lining
attribute on your block element and including thelining.min.js
script. Then you can write css to control it's line style. For example:<div class="poem" data-lining>Some text...</div> <style> .poem { /* default style for `.poem` */ } .nolining .poem { /* style for `.poem` when browser don't support lining.js */ } .poem[data-lining] { /* style for `.poem` when browser support lining.js */ } .poem[data-lining="end"] { /* style for `.poem` when `line` tags created */ } .poem .line { /* style for lines */ } </style> <script src="YOUR_PATH/lining.min.js"></script>
RWD
If you want your line style support Responsive web design. Make sure you add the
data-auto-resize
attribute. It will automatically relining when window resize event happen.<div class="poem" data-lining data-auto-resize>Some text...</div>
Other attributes
data-from
anddata-to
help help you control which line tags to be created. For example:<div class="poem" data-lining data-from="2" data-to="3"> First Line.<br/> Second Line.<br/> Third Line.<br/> Fourth Line.<br/> </div>
After lining, only the second and third line tag will be created. Check out the demo.
And
data-line-class
help you control the class name of line tags, if you don't want to use the default class name:line
.Javascript
You can also create and manage line tags by javascript. And give you four events to do special things.
<div id="poem">Some text..</div> <script> var poem = document.getElementById('poem'); poem.addEventListener('beforelining', function (e) { // prevent lining if you want e.preventDefault(); }, false); poem.addEventListener('afterlining', function () { // do something after lining }, false); poem.addEventListener('beforeunlining', function () { // do something before unlining // can't prevent unlining }, false); poem.addEventListener('afterunlining', function () { // do something after unlining }, false); // start lining var poemLining = lining(poem, { // optional config 'autoResize': true, 'from': 2, 'to': 3, 'lineClass': 'my-class' }); // `unlining` method will remove all line tags. poemLining.unlining(); // `relining` method will call `unlining` first if needed, // then start lining again. poemLining.relining(); </script> lining.effect.js
lining.effect.js
is an extra part oflining.js
. It gives you the power to add appearances animation on your lines. Use it like this:<script src="YOUR_PATH/lining.min.js"></script> <script src="YOUR_PATH/lining.effect.min.js"></script> <div data-lining data-effect="rolling"> Your text... <div>
INSTALL
DOWNLOAD or using bower to install like this:
$ bower install lining.js
CDN
jsDelivr provides free CDN hosting which helps speed webpage loading. Usage is simple:
<script src="//cdn.jsdelivr.net/lining.js/VERSION/lining.min.js"></script>
then change
VERSION
with the version number you can find hosted at jsDelivr.
If you want to also use effects, you can take advantage of collating and reduce a HTTP request:<script src="//cdn.jsdelivr.net/g/lining.js@VERSION(lining.min.js+lining.effect.min.js)"></script>
Other