Fork on GitHub

lining.js icon lining.js

CSS中已经存在了::first-line选择器可以用来设置第一行文字的样式。但是目前还没有选择器可以设置任意行的样式,例如:::nth-line()::nth-last-line()或者::last-line这样的。CSS tricks上有一篇文章A Call for ::nth-everything描述了此类选择器的使用场景。

于是我写了这个js插件Lining.js。它和Lettering.js类似为文字段落生成行标签text-line,便可以让你控制段落中任意行的样式!DEMO如下:

<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>

支持的浏览器: Lastest chrome Lastest firefox Lastest safari Lastest mobile safari Lastest opera

DEMO
As soon as wolf began to feel that he would like a decent meal, He went and knocked on Grandma's door.
When Grandma opened it, she saw
The sharp white teeth, the horrid grin,
And Wolfie said, 'May I come in?'
Poor Grandmamma was terrified,
'He's going to eat me up!' she cried.
.poem {
    line-height: 40px;
    font-size: 32px;
    font-family: 'Dancing Script' serif;
}
.poem .line:nth-of-type(-n+2) {
    font-size: 42px;
    color: #DA4453;
}
SHOW CODE NEXT
If you want to view paradise
Simply look around and view it
Anything you want to, do it
Want to change the world,
there's nothing to it
There is no life I know
To compare with
pure imagination
.fadeout {
    font-size: 36px;
    line-height: 36px;
    color: hsla(354, 67%, 46%, 1);
    font-family: 'Handlee' serif;
}
.fadeout .line:nth-last-of-type(3) {
   color: hsla(354, 67%, 55%, 1);
   font-size: 80%;
}
.fadeout .line:nth-last-of-type(2) {
   color: hsla(354, 67%, 60%, 1);
   font-size: 70%;
}
.fadeout .line:nth-last-of-type(1) {
   color: hsla(354, 67%, 65%, 1);
   font-size: 60%
}
SHOW CODE NEXT

What is typography

Typography (from the Greek words τύπος typos "form" and γράφειν graphein "to write") is the art and technique of arranging type to make written language most appealing to learning and recognition. The arrangement of type involves selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs (kerning[2]). Type design is a closely related craft, sometimes considered part of typography; most typographers do not design typefaces, and some type designers do not consider themselves typographers. In modern times, typography has been put in film, television and online broadcasts to add emotion to communication.
From Wikipedia.

.linenumber .line {
    position: relative;
    margin-left: 32px; /* 16 * 2*/
}
.linenumber .line:before {
    content: attr(index) '.';
    position: absolute;
    right: 10px;
    margin-right: 100%;
    width: 1em;
    font-size: 16px;
    text-align: center;
    color: #999;
}
SHOW CODE NEXT
桃花庵歌 唐寅
桃花塢裡桃花庵,桃花庵下桃花仙。
桃花仙人種桃樹,又摘桃花換酒錢。
酒醒只在花前坐,酒醉還來花下眠。
半醉半醒日復日,花落花開年復年。
但願老死花酒間,不願鞠躬車馬前。
車塵馬足顯者事,酒盞花枝隱士緣。
若將顯者比隱士,一在平地一在天。
若將花酒比車馬,彼何碌碌我何閒。
別人笑我太瘋癲,我笑他人看不穿。
不見五陵豪傑墓,無花無酒鋤作田。
.vtxt {
    font-size: 24px;
    color: #333;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}
.vtxt .line:first-of-type {
    font-size: 1.5em;
    color: #D0496A;
}
.vtxt .line:first-of-type small {
    color: #333;
    font-size: .6666666em;
}
SHOW CODE NEXT

The Furthest Distance In The World

by Rabindranath Tagore

The furthest distance in the world
Is not between life and death
But when I stand in front of you
Yet you don't know that I love you.

The furthest distance in the world
Is not when I stand in front of you
Yet you can't see my love
But when undoubtly knowing the love from both
Yet cannot be together.

The furthest distance in the world
Is not being apart while being in love
But when I plainly cannot resist the yearning
Yet pretending you have never been in my heart.

The furthest distance in the world
Is not struggling against the tides
But using one's indifferent heart
To dig an uncrossable river
For the one who loves you.

SHOW CODE
<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>
PREVIEW
USAGE

使用方法

你只需要将data-lining属性设置到包含文字的块级元素上,然后引入lining.min.js文件即可。接下来你就可以写CSS样式来设置文字行的样式了,如下:

<div class="poem" data-lining>Some text...</div>
<style>
.poem { /* 默认样式 */ }
.nolining .poem { /* 浏览器不支持lining.js时生效 */ }
.poem[data-lining] { /* 浏览器支持lining.js时生效 */ }
.poem[data-lining="end"] { /* 每行的`text-line`标签生成后生效 */ }
.poem .line { /* 每行的样式 */ }
</style>
<script src="YOUR_PATH/lining.min.js"></script>

自适应宽度

如果你使用了响应式设计,那么你需要加上属性data-auto-resize。这样Lining.js会在浏览器窗口缩放时自动重新计算行标签。

<div class="poem" data-lining data-auto-resize>Some text...</div>

其他属性

data-fromdata-to属性可以用来控制创建固定范围内的行标签。例如:

<div class="poem"
    data-lining
    data-from="2"
    data-to="3">
First Line.<br/>
Second Line.<br/>
Third Line.<br/>
Fourth Line.<br/>
</div>

上面的例子中只会创建第二行和第三行的行标签。这里有个demo可以看看生成后的HTML是什么样的。

还有一个属性data-line-class可以控制每个行标签的class name。如果默认的class name .line被占用了,则可以设置成其他值。

Javascript

你也可以通过js来控制行标签的创建,并且Lining.js还提供了几个特殊的事件,帮助你做更多有意思的idea。

<div id="poem">Some text..</div>
<script>
var poem = document.getElementById('poem');
lining.util.on(poem, 'beforelining', function (e) {
    // 可以在beforelining事件中组织行标签的创建
    e.preventDefault();
}, false);
lining.util.on(poem, 'afterlining', function () {
    // 在行标签创建结束后执行的事件
}, false);
lining.util.on(poem, 'beforeunlining', function () {
    // 在删除行标签之前执行的事件
}, false);
lining.util.on(poem, 'afterunlining', function () {
    // 在删除行标签之后执行的事件
}, false);


var poemLining = lining(poem, {
    // 可选配置
    'autoResize': true,
    'from': 2,
    'to': 3,
    'lineClass': 'my-class'
});
// `unlining` 方法会删除所有的行标签
poemLining.unlining();
// `relining` 方法会先删除所有行标签,然后重新生成新的行标签
poemLining.relining();
</script>

lining.effect.js

lining.effect.jslining.js额外的一部分。它提供了一些有意思的行动画样式。使用方法如下:

<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>
DOWNLOAD$ bower install lining.js
或使用jsDelivr CDN
<script src="//cdn.jsdelivr.net/lining.js/0.3.2/lining.min.js"></script>