{"_id":"lining.js","_rev":"7-64585ef84cde4dee7bd40fe7f1f19f82","name":"lining.js","description":"An easy to use javascript plugin offers you complete DOWN-TO-THE-LINE control for radical web typography.","dist-tags":{"latest":"0.3.2"},"versions":{"0.3.2":{"name":"lining.js","version":"0.3.2","description":"An easy to use javascript plugin offers you complete DOWN-TO-THE-LINE control for radical web typography.","homepage":"http://zencode.in/lining.js/","keywords":["css","nth-line","lining"],"maintainers":[{"name":"zmmbreeze","email":"zmmbreeze0825@gmail.com"}],"repositories":[{"type":"git","url":"https://github.com/zmmbreeze/lining.js"}],"devDependencies":{"grunt":"~0.4.5","grunt-contrib-jshint":"~0.10.0","grunt-contrib-uglify":"~0.5.0","grunt-contrib-jasmine":"~0.8.1"},"scripts":{"test":"grunt travis --verbose"},"repository":"[Circular ~.repositories.0]","bugs":{"url":"https://github.com/zmmbreeze/lining.js/issues"},"_id":"lining.js@0.3.2","dist":{"shasum":"162524ba289c28ce221f6dab85a2b6aba58e1ef1","tarball":"https://registry.npmjs.org/lining.js/-/lining.js-0.3.2.tgz","integrity":"sha512-S8v3UR5AsxRidJDPSiW/VOM8xdJPXBD0vZoS1W8+YJeLznT2sC+u1DRXCXg3VWrQ1vRaFSCgdCYwcf6WN/d1Pw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJkKGtjfdbrqtvzVvrp8LwSMVQQmaNx2F1TIp1gsTWdQIhAN7TkRmTUxazNkovwu0WNMIXsPGXGaUqmWRk7L/Ix5wA"}]},"_from":".","_npmVersion":"1.3.10","_npmUser":{"name":"zmmbreeze","email":"zmmbreeze0825@gmail.com"}}},"readme":"LINING.JS\n==\n\nAn easy to use javascript plugin offers you complete DOWN-TO-THE-LINE control for radical web typography.\n\n<img src=\"https://travis-ci.org/zmmbreeze/lining.js.svg?branch=master\"/>\n\nIn 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.\n\nThere comes [LINING.JS](http://zencode.in/lining.js/). It offers you complete DOWN-TO-THE-LINE control like this:\n\n```html\n<div class=\"poem\" data-lining>Some text...</div>\n<style>\n.poem .line[first] { /* `.poem::first-line`*/ }\n.poem .line[last] { /* `.poem::last-line` */ }\n.poem .line[index=\"5\"] { /* `.poem::nth-line(5)` */ }\n.poem .line:nth-of-type(-n+2) { /* `.poem::nth-line(-n+2)` */ }\n.poem .line:nth-last-of-type(2n) { /* `.poem:::nth-last-line(2n)` */ }\n</style>\n<script src=\"YOUR_PATH/lining.min.js\"></script>\n```\n\nSupported browsers \n<img src=\"assets/chrome_256x256.png\" width=\"24\" height=\"24\" alt=\"Lastest Chrome\" title=\"Latest Chrome\">\n<img src=\"assets/firefox_256x256.png\" width=\"24\" height=\"24\" alt=\"Lastest Firefox\" title=\"Latest Firefox\">\n<img src=\"assets/safari_256x256.png\" width=\"24\" height=\"24\" alt=\"Lastest Safari\" title=\"Latest Safari\">\n<img src=\"assets/safari-ios_256x256.png\" width=\"24\" height=\"24\" alt=\"Lastest Mobile Safari\" title=\"Lastest Mobile Safari\">\n<img src=\"assets/opera_256x256.png\" width=\"24\" height=\"24\" alt=\"Lastest Opera\" title=\"Lastest Opera\">\n\nBASIC USAGE\n--\nAll 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:\n\n```html\n<div class=\"poem\" data-lining>Some text...</div>\n<style>\n.poem { /* default style for `.poem` */ }\n.nolining .poem { /* style for `.poem` when browser don't support lining.js */ }\n.poem[data-lining] { /* style for `.poem` when browser support lining.js */ }\n.poem[data-lining=\"end\"] { /* style for `.poem` when `line` tags created */ }\n.poem .line { /* style for lines */ }\n</style>\n<script src=\"YOUR_PATH/lining.min.js\"></script>\n```\n\nRWD\n--\nIf 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.\n\n```html\n<div class=\"poem\" data-lining data-auto-resize>Some text...</div>\n```\n\nOther attributes\n--\n`data-from` and `data-to` help help you control which line tags to be created. For example:\n\n```html\n<div class=\"poem\"\n    data-lining\n    data-from=\"2\"\n    data-to=\"3\">\nFirst Line.<br/>\nSecond Line.<br/>\nThird Line.<br/>\nFourth Line.<br/>\n</div>\n```\n\nAfter lining, only the second and third line tag will be created. Check out the [demo](http://jsbin.com/riweb/2/edit?output).\n\nAnd `data-line-class` help you control the class name of line tags, if you don't want to use the default class name: `line`.\n\nJavascript\n--\nYou can also create and manage line tags by javascript. And give you four events to do special things.\n\n```html\n<div id=\"poem\">Some text..</div>\n<script>\nvar poem = document.getElementById('poem');\npoem.addEventListener('beforelining', function (e) {\n    // prevent lining if you want\n    e.preventDefault();\n}, false);\npoem.addEventListener('afterlining', function () {\n    // do something after lining\n}, false);\npoem.addEventListener('beforeunlining', function () {\n    // do something before unlining\n    // can't prevent unlining\n}, false);\npoem.addEventListener('afterunlining', function () {\n    // do something after unlining\n}, false);\n\n// start lining\nvar poemLining = lining(poem, {\n    // optional config\n    'autoResize': true,\n    'from': 2,\n    'to': 3,\n    'lineClass': 'my-class'\n});\n// `unlining` method will remove all line tags.\npoemLining.unlining();\n// `relining` method will call `unlining` first if needed,\n// then start lining again.\npoemLining.relining();\n</script>\nlining.effect.js\n```\n\n`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:\n\n```html\n<script src=\"YOUR_PATH/lining.min.js\"></script>\n<script src=\"YOUR_PATH/lining.effect.min.js\"></script>\n\n<div data-lining data-effect=\"rolling\">\nYour text...\n<div>\n```\n","maintainers":[{"name":"zmmbreeze","email":"zmmbreeze0825@gmail.com"}],"time":{"modified":"2022-06-19T12:33:17.240Z","created":"2014-11-19T07:55:51.697Z","0.3.2":"2014-11-19T07:55:54.364Z"},"readmeFilename":"README.md","homepage":"http://zencode.in/lining.js/","keywords":["css","nth-line","lining"],"repository":"[Circular ~.repositories.0]","bugs":{"url":"https://github.com/zmmbreeze/lining.js/issues"},"users":{"zmmbreeze":true}}