{"id":13494174,"url":"https://github.com/wentin/underlineJS","last_synced_at":"2025-03-28T13:32:22.376Z","repository":{"id":24078807,"uuid":"27465526","full_name":"wentin/underlineJS","owner":"wentin","description":"Pushing the boundary of browser typography rendering!","archived":false,"fork":false,"pushed_at":"2020-12-02T03:46:12.000Z","size":9337,"stargazers_count":2224,"open_issues_count":24,"forks_count":80,"subscribers_count":58,"default_branch":"master","last_synced_at":"2025-03-24T23:31:28.760Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://underlinejs.wentin.net","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wentin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-12-03T02:39:43.000Z","updated_at":"2025-03-10T19:35:09.000Z","dependencies_parsed_at":"2022-08-07T15:00:04.445Z","dependency_job_id":null,"html_url":"https://github.com/wentin/underlineJS","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wentin%2FunderlineJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wentin%2FunderlineJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wentin%2FunderlineJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wentin%2FunderlineJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wentin","download_url":"https://codeload.github.com/wentin/underlineJS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246037526,"owners_count":20713428,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T19:01:22.593Z","updated_at":"2025-03-28T13:32:21.468Z","avatar_url":"https://github.com/wentin.png","language":"JavaScript","readme":"# underline.js\n\n`A javascript library that sets out to do one simple job: draw and animate the most perfect and playful text underline`\n\n\n### Demo\n\n[http://wentin.github.io/underlineJS/](http://wentin.github.io/underlineJS/)\n\nThe project is currently under development.\n\nIf you have 8 minutes and want to know what is the story behind creating underline.js, you can hear all about it in this [`NY Tech Meetup presentation video`](http://embed.wirewax.com/8013554/7bafa8/)\n\n### Features\n\nUnderline.js has following features:\n 1. It doesn't have ghost pixels. It is not just pixel perfect, but also pixel perfect on half pixel level for retina display\n![pixel-perfect](https://cloud.githubusercontent.com/assets/2474904/6017363/fdf6ab3c-ab5a-11e4-936a-f7657532df50.png)\n 2. It has an optimized thin stroke-width. It is always 1/6 of width of the period mark.\n![optimal-stroke-width](https://cloud.githubusercontent.com/assets/2474904/6017364/fdf7ca62-ab5a-11e4-976e-285dd759b59b.png)\n 3. It sits on the optimal Y position between the baseline and descender line, that optimal Y positon is the golden ratio point.\n![golden-ratio](https://cloud.githubusercontent.com/assets/2474904/6017362/fdf60510-ab5a-11e4-9965-4e8a6b0a9f4c.png)\n 4. It has holes around descenders. Completely respect the type's shape. If you ask, the size of the holes are also optimized to the perfection.\n![descender-holes](https://cloud.githubusercontent.com/assets/2474904/6017361/fdf3f4f0-ab5a-11e4-89a4-f6e6e0588c2b.png)\n\n### CSS4 Proposal to W3C\n\nUnderline.js is not designed to be the most useful javascript library. It is more exploratory, and it is trying to push the boundary of web typography. I want to propose these new css rules to W3C for css4 edition:\n\n    text-underline-color: #000000;\n    // auto means the same color as the text color, or hex value\n\n    text-underline-position: auto;\n    // could be ratio or px or auto\n\n    text-underline-skip: true;\n    // true to set holes around descenders, false to turn it off\n\n    text-underline-width: auto;\n    // could be auto or px or ratio\n\n    text-underline-animation: true\n    // true or false, this one is only for underline.js\n\n### Reference\n\n[Marcin Wichary's article on crafting Medium.com's underline](https://medium.com/designing-medium/crafting-link-underlines-on-medium-7c03a9274f9)\n\n### Mentions (thank you!)\n\n[`Tweets`](https://storify.com/DesignJokes/underline-js-tweets) \n\n[`technical.ly article`](https://technical.ly/brooklyn/2015/02/12/wenting-zhang-underline-js/) \n\n[`codrops collective`](http://tympanus.net/codrops/collective/collective-155/)\n[`unheap.com`](http://www.unheap.com/user-interface/text-links/underline-js/)\n[`coliss.com`](http://coliss.com/articles/build-websites/operation/javascript/js-draw-and-animate-underline.html)\n[`speckyboy.com`](http://speckyboy.com/2015/02/24/weekly-news-for-designers-n-273/)\n[`cssauthor.com`](http://www.cssauthor.com/weekly-web-development-resources-and-tools-95/)\n[`beautifulopen.com`](http://beautifulopen.com/2015/01/06/underline-js/)\n[`freebiesbug.com`](http://freebiesbug.com/code-stuff/underline-js-animate-text-underline/)\n[`jquery-plugins.net`](http://jquery-plugins.net/underlinejs-javascript-library-to-draw-and-animate-text-underline)\n*Note: underline.js doesn't have dependency on jquery*\n[`designsrazzi.com`](http://www.designsrazzi.com/free-jquery-plugins/)\n[`codegeekz.com`](http://codegeekz.com/15-handy-javascript-libraries-for-march-2015/)\n[`bashooka.com`](http://bashooka.com/coding/javascript-libraries-for-web-typography/)\n[`ninodezign.com`](http://ninodezign.com/10-funny-jquery-plugins-for-your-website/)\n[`hongkiat.com`](http://www.hongkiat.com/blog/web-typography-tools/)\n[`decodering.com`](http://decodering.com/post/110635667154/underline-js-a-javascript-library-that-sets-out)\n[`ipixel.com.sg`](http://www.ipixel.com.sg/blog/freebies/underline-js-animate-text-underline/)\n[`freede.ru`](http://freede.ru/koding/animatsionnoe-podchyorkivanie-tekst-so-zvukom-pri-navedenii.html)\n[`gaetanpautler.com`](http://gaetanpautler.com/weekly-links-and-websites-89/)\n[`designmeltdown.com`](http://designmeltdown.com/#s=9406)\n[`html5cn.org`](http://www.html5cn.org/article-7851-1.html)\n[`splashnology.com`](http://mag.splashnology.com/article/tools-web-dev-march-2015/14012/)\n[`developersfeed.com`](http://www.developersfeed.com/25-best-web-development-tools-of-march-2015/)\n[`Parsons Alumni news`](http://amt.parsons.edu/blog/mfa-dt-alum-wenting-zhang-presents-underline-js-project-to-ny-tech-meetup/)\n[`bashooka.com`](http://bashooka.com/coding/javascript-libraries-for-web-typography/)\n[`habrahabr.ru`](http://habrahabr.ru/post/251759/)\n[`softpedia.com`](http://webscripts.softpedia.com/script/Text-Management/Text-Tools/underline-js-84277.html)\n[`lafermeduweb.net`](http://www.lafermeduweb.net/veille/underline-js-soulignez-a-la-perfection-vos-textes-sans-couper-les-lettres-565407442654482432.html)\n[`wykop.pl`](http://www.wykop.pl/wpis/11426174/https-github-com-wentin-underlinejs-fajna-bibliote/)\n[`sumy.ua`](http://veselov.sumy.ua/1753-underlinejs-skript-dobavleniya-pravilnogo-podcherkivaniya.html)\n[`us8`](http://us8.campaign-archive2.com/?u=9dc44712ae7c52996ea6e645b\u0026id=f8356f478a\u0026e=1d8514e3e4)\n[`pr-cy.ru`](http://pr-cy.ru/news/p/4967)\n[`takana8.tumblr.com`](http://takana8.tumblr.com/post/110873944747/underline-js-a-javascript-library-that-sets-out)\n[`altervista.org`](http://iwinuxfeed.altervista.org/aggregatore/underline-js/?utm_source=dlvr.it\u0026utm_medium=twitter)\n\n###Contact\n* Follow [@DesignJokes](http://twitter.com/DesignJokes) on Twitter\n* Email \u003czhangwenting111@gmail.com\u003e\n* Visit [wentin.co](http://wentin.co)\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwentin%2FunderlineJS","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwentin%2FunderlineJS","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwentin%2FunderlineJS/lists"}