Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zmmbreeze/lining.js
An easy to use javascript plugin offers you complete DOWN-TO-THE-LINE control for radical web typography.
https://github.com/zmmbreeze/lining.js
css javascript line typography
Last synced: 9 days ago
JSON representation
An easy to use javascript plugin offers you complete DOWN-TO-THE-LINE control for radical web typography.
- Host: GitHub
- URL: https://github.com/zmmbreeze/lining.js
- Owner: zmmbreeze
- Created: 2014-10-06T15:22:09.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2020-10-01T16:09:59.000Z (about 4 years ago)
- Last Synced: 2024-04-18T13:18:43.867Z (7 months ago)
- Topics: css, javascript, line, typography
- Language: JavaScript
- Homepage: http://zencode.in/lining.js/
- Size: 990 KB
- Stars: 914
- Watchers: 31
- Forks: 60
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
> An 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](http://css-tricks.com/a-call-for-nth-everything/) from CSS tricks. `::nth-line()` is actually really useful in some situation.
There comes [LINING.JS](http://zencode.in/lining.js/). It offers you complete DOWN-TO-THE-LINE control like this:
```html
Some text...
.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)` */ }
```
Supported browsers
BASIC USAGE
--
All you need to do is adding `data-lining` attribute on your **block** element and including the `lining.min.js` script. Then you can write css to control it's line style. For example:
```html
Some text...
.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 */ }
```
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.
```html
Some text...
```
Other attributes
--
`data-from` and `data-to` help help you control which line tags to be created. For example:
```html
First Line.
Second Line.
Third Line.
Fourth Line.
```
After lining, only the second and third line tag will be created. Check out the [demo](http://jsbin.com/riweb/2/edit?output).
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.
```html
Some text..
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();
lining.effect.js
```
`lining.effect.js` is an extra part of `lining.js`. It gives you the power to add appearances animation on your lines. Use it like this:
```html
Your text...
```
INSTALL
--
[DOWNLOAD](https://github.com/zmmbreeze/lining.js/releases) or using [bower](http://bower.io/) to install like this:
```sh
$ bower install lining.js
```
### CDN
jsDelivr provides free CDN hosting which helps speed webpage loading. Usage is simple:
```html
```
then change `VERSION` with the version number you can find [hosted at jsDelivr](http://www.jsdelivr.com/#!lining.js).
If you want to also use effects, you can take advantage of collating and reduce a HTTP request:
```html
```
Other
--
- [Post from WebToolsWeekly](http://webtoolsweekly.com/archives/issue-70/)
- [Post from Dailyjs](http://dailyjs.com/2014/11/17/protractor-perf-lining/#liningjs)
- [#liningjs](https://twitter.com/hashtag/liningjs)
- [Demo for lining.js working with scrollReveal.js](http://codepen.io/zmmbreeze/pen/dPYYOo)
- [中文首页](http://zencode.in/lining.js/index_cn.html)