{"id":18515293,"url":"https://github.com/jonnitto/alpine-typogrify","last_synced_at":"2025-09-10T17:44:25.799Z","repository":{"id":57176846,"uuid":"381162766","full_name":"jonnitto/alpine-typogrify","owner":"jonnitto","description":"Typography utils for AlpineJS","archived":false,"fork":false,"pushed_at":"2022-02-18T13:23:42.000Z","size":63,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-19T21:46:16.220Z","etag":null,"topics":["alpine-package","alpinejs","typography"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jonnitto.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-28T21:13:27.000Z","updated_at":"2022-02-18T13:23:48.000Z","dependencies_parsed_at":"2022-09-04T11:11:22.647Z","dependency_job_id":null,"html_url":"https://github.com/jonnitto/alpine-typogrify","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonnitto%2Falpine-typogrify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonnitto%2Falpine-typogrify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonnitto%2Falpine-typogrify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonnitto%2Falpine-typogrify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonnitto","download_url":"https://codeload.github.com/jonnitto/alpine-typogrify/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254150395,"owners_count":22022943,"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":["alpine-package","alpinejs","typography"],"created_at":"2024-11-06T15:47:15.885Z","updated_at":"2025-05-14T13:31:22.470Z","avatar_url":"https://github.com/jonnitto.png","language":"JavaScript","readme":"[![npm version]][npm] [![GitHub stars]][stargazers] [![GitHub watchers]][subscription] [![GitHub license]][license] [![GitHub issues]][issues] [![GitHub forks]][network] [![Sponsor @Jonnitto on GitHub]][sponsor]\n\n# alpine-typogrify\n\n**alpine-typogrify** provides a set of functions for [Alpine.js] which automatically apply various transformations to plain text to yield\ntypographically-improved HTML.\n\nThis package is inspired by [typogr.js].\n\n## Installation\n\nRun `npm install alpine-typogrify` or `yarn add alpine-typogrify` in your console.\n\n## 101\n\n```html\n\u003cscript src=\"https://unpkg.com/alpine-typogrify\" defer\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/alpinejs\" defer\u003e\u003c/script\u003e\n\n\u003cdiv x-data x-typogrify\u003e\n  \u003ch3\u003e\"Lorem ipsum\" \u0026 dolor SIT amet\u003c/h3\u003e\n  \u003cp\u003e\n    his viris \"similique\" appellantur cu, P.R.I. at erat mandamus adversarium.\n    1st, 2nd, 3rd, 4th, \"Alii eripuit utroque sit in, quem 'disputando' vel ex.\"\n    Mea erant 'indoctum' ex IDS312, ad errem explicari...\n  \u003c/p\u003e\n\u003c/div\u003e\n```\n\nresults to\n\n```html\n\u003cdiv x-data x-typogrify\u003e\n  \u003ch3\u003e\n    \u003cspan class=\"typogrify typogrify--quotes typogrify--dquo\"\u003e“\u003c/span\u003e\n    Lorem ipsum” \u003cspan class=\"typogrify typogrify--amp\"\u003e\u0026amp;\u003c/span\u003e dolor\n    \u003cspan class=\"typogrify typogrify--caps\"\u003eSIT\u003c/span\u003e\u003cspan class=\"typogrify typogrify--widont\"\u003e\u0026nbsp;\u003c/span\u003eamet\n  \u003c/h3\u003e\n  \u003cp\u003e\n    his viris “similique” appellantur cu,\n    \u003cspan class=\"typogrify typogrify--caps\"\u003eP.R.I.\u003c/span\u003e at erat mandamus adversarium. \n    1\u003cspan class=\"typogrify typogrify--ord\"\u003est\u003c/span\u003e, 2\u003cspan class=\"typogrify typogrify--ord\"\u003end\u003c/span\u003e, \n    3\u003cspan class=\"typogrify typogrify--ord\"\u003erd\u003c/span\u003e, 4\u003cspan class=\"typogrify typogrify--ord\"\u003eth\u003c/span\u003e, \n    “Alii eripuit utroque sit in, quem ‘disputando’ vel ex.” Mea erant ‘indoctum’ ex \n    \u003cspan class=\"typogrify typogrify--caps\"\u003eIDS312\u003c/span\u003e, ad errem\u003cspan class=\"typogrify typogrify--widont\"\u003e\u0026nbsp;\u003c/span\u003eexplicari…\n  \u003c/p\u003e\n\u003c/div\u003e\n```\n\n[Take a look at the example file]\n\n# Directives\n\nEvery directive is split into two parts: The directive for [Alpine.js] and the function that manipulate the input. If a wrapping `\u003cspan\u003e` is added to some text, a class with the schema `typogrify typogrify--FUNCTION_NAME` will be added. You can change this class if you pass a value to the directive, e.g. `\u003cdiv x-amp=\"'text-red-500'\"\u003e`, or if you build your javascript on your own, you can also import the function and overwrite the default class name:\n\n```js\nimport Alpine from 'alpinejs';\nimport directive, { amp } from 'alpine-typografiy/dist/amp/module.mjs';\n\namp.className = 'text-red-500';\nAlpine.plugin(directive);\nAlpine.start();\n```\n\nor you can add multiple directives at once:\n\n```js\nimport Alpine from 'alpinejs';\nimport {\n  amp,\n  caps,\n  ord,\n  quotes,\n  smartypants,\n  typogrify,\n  widont,\n  functions,\n} from 'alpine-typogrify';\n\nfunctions.amp.className = 'text-red-500';\n\nAlpine.plugin(amp);\nAlpine.plugin(caps);\nAlpine.plugin(ord);\nAlpine.plugin(quotes);\nAlpine.plugin(smartypants);\nAlpine.plugin(typogrify);\nAlpine.plugin(widont);\n\nAlpine.start();\n```\n\n## x-amp\n\nWraps ampersands in HTML with `\u003cspan class=\"typogrify typogrify--amp\"\u003e` so they can be styled with CSS. Ampersands are also normalized to `\u0026amp;`. Requires ampersands to have whitespace or an `\u0026nbsp;` on both sides. Will not change any ampersand which has already been wrapped in this fashion.\n\n## x-caps\n\nWraps multiple capital letters in `\u003cspan class=\"typogrify typogrify--caps\"\u003e\u003c/span\u003e` so they can be styled.\n\n## x-ord\n\nWraps number suffix's in `\u003cspan class=\"typogrify typogrify--ord\"\u003e\u003c/span\u003e` so they can be styled.\n\n## x-quotes\n\nWraps initial quotes in `\u003cspan class=\"typogrify typogrify--quotes typogrify--dquo\"\u003e` for double quotes or `\u003cspan class=\"typogrify typogrify--quotes typogrify--quo\"\u003e` for single quotes. Works inside these block elements:\n\n- `h1`, `h2`, `h3`, `h4`, `h5`, `h6`\n- `p`\n- `li`\n- `dt`\n- `dd`\n\nIt also accounts for potential opening inline elements: `a`, `em`,\n`strong`, `span`, `b`, `i`.\n\n## x-smartypants\n\n- Straight quotes ( \" and ' '\") into “curly” quote HTML entities (\u0026lsquo; | \u0026rsquo; | \u0026ldquo; | \u0026rdquo;)\n- Backticks-style quotes (``like this''') into “curly” quote HTML entities (\u0026lsquo; | \u0026rsquo; | \u0026ldquo; | \u0026rdquo;)\n- Dashes (“--” and “---”) into n-dash and m-dash entities (\u0026ndash; | \u0026mdash;)\n- Three consecutive dots (“...”) into an ellipsis entity (\u0026hellip;)\n\n## x-widont\n\nBased on Shaun Inman's PHP utility of the same name, it replaces the\nspace between the last two words in a string with `\u0026nbsp;` to avoid\na final line of text with only one word.\n\nWorks inside these block elements:\n\n- `h1`, `h2`, `h3`, `h4`, `h5`, `h6`\n- `p`\n- `li`\n- `dt`\n- `dd`\n\nIt also accounts for potential closing inline elements: `a`, `em`,\n`strong`, `span`, `b`, `i`.\n\n## x-typogrify\n\nApplies all of the following filters, in order:\n\n- amp\n- widont\n- smartypants\n- caps\n- quotes\n- ord\n\n[npm version]: https://img.shields.io/npm/v/alpine-typogrify\n[npm]: https://www.npmjs.com/package/alpine-typogrify\n[github issues]: https://img.shields.io/github/issues/Jonnitto/alpine-typogrify\n[issues]: https://github.com/Jonnitto/alpine-typogrify/issues\n[github forks]: https://img.shields.io/github/forks/Jonnitto/alpine-typogrify\n[network]: https://github.com/Jonnitto/alpine-typogrify/network\n[github stars]: https://img.shields.io/github/stars/Jonnitto/alpine-typogrify\n[stargazers]: https://github.com/Jonnitto/alpine-typogrify/stargazers\n[github license]: https://img.shields.io/github/license/Jonnitto/alpine-typogrify\n[license]: LICENSE\n[sponsor @jonnitto on github]: https://img.shields.io/badge/sponsor-Support%20this%20package-informational\n[sponsor]: https://github.com/sponsors/jonnitto\n[github watchers]: https://img.shields.io/github/watchers/Jonnitto/alpine-typogrify.svg\n[subscription]: https://github.com/Jonnitto/alpine-typogrify/subscription\n[alpine.js]: https://alpinejs.dev\n[typogr.js]: https://github.com/ekalinin/typogr.js/\n[take a look at the example file]: example.html\n","funding_links":["https://github.com/sponsors/jonnitto"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonnitto%2Falpine-typogrify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonnitto%2Falpine-typogrify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonnitto%2Falpine-typogrify/lists"}