{"id":23901679,"url":"https://github.com/bartveneman/spanner.js","last_synced_at":"2025-08-03T06:35:34.166Z","repository":{"id":58227156,"uuid":"11629511","full_name":"bartveneman/Spanner.js","owner":"bartveneman","description":"Plain javascript kerning tool. Mind you: Spanner.js is *fast*","archived":false,"fork":false,"pushed_at":"2014-08-04T10:01:11.000Z","size":313,"stargazers_count":28,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-10T23:14:22.836Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://bveneman.nl/2013/08/03/introducing-spannerjs-letteringjs-on-steroids/","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/bartveneman.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":"2013-07-24T08:01:09.000Z","updated_at":"2019-09-06T22:03:41.000Z","dependencies_parsed_at":"2022-08-31T06:51:22.715Z","dependency_job_id":null,"html_url":"https://github.com/bartveneman/Spanner.js","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartveneman%2FSpanner.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartveneman%2FSpanner.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartveneman%2FSpanner.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartveneman%2FSpanner.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bartveneman","download_url":"https://codeload.github.com/bartveneman/Spanner.js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248312134,"owners_count":21082638,"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":"2025-01-04T21:51:59.230Z","updated_at":"2025-04-10T23:14:45.887Z","avatar_url":"https://github.com/bartveneman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Spanner.js: wrap your text\n\n[![Code Climate](https://codeclimate.com/github/bartveneman/Spanner.js/badges/gpa.svg)](https://codeclimate.com/github/bartveneman/Spanner.js)\n\nSpanner.js is a simple way to wrap your text in `\u003cspan\u003e`s for kerning, or other typographic effects. Spanner.js wraps the letters in your text in `\u003cspan\u003e`s with a class `char` appended by the number of the letter, for example `char1`. __Mind you__, counting starts at 1 instead of 0;\n\nSpanner.js is a jQuery-free rip-off from @davatron5000 's [lettering.js](https://github.com/davatron5000/Lettering.js).\n\n## Usage\nSpanner.js is registered as a global function, so all you have to do is call lettering with a valid selector as argument. If no valid selector is recognized, it throws an error, so be sure to place the function call inside a try-catch block.\n\n\nInclude spanner in your document, preferrably at the bottom:\n\n````html\n\u003cscript src=\"spanner.js\"\u003e\u003c/script\u003e\n````\n\nAnd call the lettering function from your application:\n\n````javascript\ntry {\n\tspanner( selector );\n} catch (e) {\n\tconsole.warn(e); // element not found or not eligible;\n}\n````\n\n## Examples\n\n### Using a basic selector\n\n````html\n\u003cdiv class=\"clazz\"\u003etext\u003c/div\u003e\n\u003cdiv class=\"clazz\"\u003eanother\u003c/div\u003e\n````\n\nThis example shows spanner being used in a try-catch block.\n\n````javascript\nspanner( document.getElementsByClassName(\"clazz\") );\n````\n\nSpanner gives you this:\n\n````html\n\u003cdiv class=\"clazz\"\u003e\n\t\u003cspan class=\"char1\"\u003et\u003c/span\u003e\n\t\u003cspan class=\"char2\"\u003ee\u003c/span\u003e\n\t\u003cspan class=\"char5\"\u003ex\u003c/span\u003e\n\t\u003cspan class=\"char4\"\u003et\u003c/span\u003e\n\u003c/div\u003e\n\u003cdiv class=\"clazz\"\u003e\n\t\u003cspan class=\"char1\"\u003ea\u003c/span\u003e\n\t\u003cspan class=\"char2\"\u003en\u003c/span\u003e\n\t\u003cspan class=\"char3\"\u003eo\u003c/span\u003e\n\t\u003cspan class=\"char4\"\u003et\u003c/span\u003e\n\t\u003cspan class=\"char5\"\u003eh\u003c/span\u003e\n\t\u003cspan class=\"char6\"\u003ee\u003c/span\u003e\n\t\u003cspan class=\"char7\"\u003er\u003c/span\u003e\n\u003c/div\u003e\n````\n\n### Using inline tags\nSpanner.js is able to recognize inline tags one level deep. So you can use `\u003cem\u003e`, `\u003ci\u003e`, `\u003cb\u003e`, `\u003cstrong\u003e` or even `a` inside the element you want to apply lettering to. Supported tags:\n\n* a \n* abbr\n* b \n* bdo\n* cite\n* dfn\n* em \n* i \n* kbd\n* q\n* samp\n* small\n* strong \n* sub\n* sup\n\n````html\n\u003cdiv id=\"kern-me-plz\"\u003eGoing \u003cem\u003enuts\u003c/em\u003e \u003cstrong\u003ehere\u003c/strong\u003e \u003ca href=\"\"\u003edude\u003c/a\u003e\u003c/div\u003e\n````\n\n````javascript\nspanner( document.getElementById(\"kern-me-plz\") );\n````\n\nOutput:\n\n````html\n\u003cdiv id=\"kern-me-plz\"\u003e\n\t\u003cspan class=\"char1\"\u003eG\u003c/span\u003e\n\t\u003cspan class=\"char2\"\u003eo\u003c/span\u003e\n\t\u003cspan class=\"char3\"\u003ei\u003c/span\u003e\n\t\u003cspan class=\"char4\"\u003en\u003c/span\u003e\n\t\u003cspan class=\"char5\"\u003eg\u003c/span\u003e\n\t\u003cspan class=\"char6\"\u003e\u003c/span\u003e \n\t\u003cem\u003e\n\t\t\u003cspan class=\"char7\"\u003en\u003c/span\u003e\n\t\t\u003cspan class=\"char8\"\u003eu\u003c/span\u003e\n\t\t\u003cspan class=\"char9\"\u003et\u003c/span\u003e\n\t\t\u003cspan class=\"char10\"\u003es\u003c/span\u003e\n\t\u003c/em\u003e\n\t\u003cspan class=\"char11\"\u003e\u003c/span\u003e\n\t\u003cstrong\u003e\n\t\t\u003cspan class=\"char12\"\u003eh\u003c/span\u003e\n\t\t\u003cspan class=\"char13\"\u003ee\u003c/span\u003e\n\t\t\u003cspan class=\"char14\"\u003er\u003c/span\u003e\n\t\t\u003cspan class=\"char15\"\u003ee\u003c/span\u003e\n\t\u003c/strong\u003e\n\t\u003cspan class=\"char16\"\u003e\u003c/span\u003e\n\t\u003ca href=\"\"\u003e\n\t\t\u003cspan class=\"char17\"\u003ed\u003c/span\u003e\n\t\t\u003cspan class=\"char18\"\u003eu\u003c/span\u003e\n\t\t\u003cspan class=\"char19\"\u003ed\u003c/span\u003e\n\t\t\u003cspan class=\"char20\"\u003ee\u003c/span\u003e\n\t\u003c/a\u003e\n\u003c/div\u003e\n````\n\n### Using the Line Break Element\nSpanner.js is capable of dealing with the Line Break Element. It splits up the words before and after the break element and it continues the char count.\n\n````html\n\u003cdiv id=\"example3\"\u003etext\u003cbr/\u003ehere\u003cbr/\u003eplz\u003c/div\u003e\n````\n\n````javascript\nspanner( document.querySelector(\"#example-3\") );\n````\n\nSpanner.js will do the counting for you:\n\n````html\n\u003cdiv id=\"example-3\"\u003e\n\t\u003cspan class=\"char1\"\u003et\u003c/span\u003e\n\t\u003cspan class=\"char2\"\u003ee\u003c/span\u003e\n\t\u003cspan class=\"char3\"\u003ex\u003c/span\u003e\n\t\u003cspan class=\"char4\"\u003et\u003c/span\u003e\n\t\u003cbr\u003e\n\t\u003cspan class=\"char5\"\u003eh\u003c/span\u003e\n\t\u003cspan class=\"char6\"\u003ee\u003c/span\u003e\n\t\u003cspan class=\"char7\"\u003er\u003c/span\u003e\n\t\u003cspan class=\"char8\"\u003ee\u003c/span\u003e\n\t\u003cbr\u003e\n\t\u003cspan class=\"char9\"\u003ep\u003c/span\u003e\n\t\u003cspan class=\"char10\"\u003el\u003c/span\u003e\n\t\u003cspan class=\"char11\"\u003ez\u003c/span\u003e\n\u003c/div\u003e\n````\n\n## Known issues\nThe one thing Spanner.js can't handle is, er, `\u003cspan\u003e`s. It will not split the text inside the span, but leave the whole tag alone. You could use it as a feature: using a span inside your element will prevent it from having Spanner applied ;-)\n\n## Test\nTests are available in the [test page](test.html).\n\n## Credits\nThanks to [Phil Green](https://github.com/ShirtlessKirk) for pointing out _many_ jslint errors and some really useful optimalisations.\nMany kudos to Dave Rupert for creating the original version, called [Lettering.js](https://github.com/davatron5000/Lettering.js).\n\n## jQuery-free!\nYou don't need jQuery for _everything_. No, really, you don't. ;)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbartveneman%2Fspanner.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbartveneman%2Fspanner.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbartveneman%2Fspanner.js/lists"}