82 |
86 |
83 | {{ content | safe }}
84 |
85 | Easy like Sunday morning & fox
23 |24 | Easy like Sunday 25 | morning & 26 | fox 27 |
28 | 29 | 30 |Easy like Sunday morning & fox
31 | ``` 32 | 33 | ### Stylistic sets :feat[ss01–ss20] 34 | 35 | This feature replaces sets of default character glyphs with stylistic variants. Glyphs in stylistic sets may be designed to harmonise visually, interact in particular ways, or otherwise work together. 36 | 37 | ```html emerald 38 | 39 |Illegal
40 |41 | Illegal 42 |
43 | 44 | 45 |Illegal
46 | ``` 47 | 48 | Note that fonts may employ stylistic sets in completely arbitrary and individual ways. In this example, Inter uses `ss02` to change a series of glyphs into less ambiguous forms, but the same stylistic set in another font could produce completely different changes. 49 | 50 | The OpenType spec allows for as many as 20 different sets to be defined in a font; by default this plugin includes utilities for `ss01` through `ss04`. To add additional sets or to change the label of the utility class for specific sets, use the `stylisticSets` key in your `theme` or `extends` config. 51 | 52 | ```js 53 | // tailwind.config.js 54 | module.exports = { 55 | theme: { 56 | stylisticSets: { 57 | 'open-digits': 'ss01', 58 | disambiguate: 'ss02', 59 | 'curved-r': 'ss03', 60 | }, 61 | extend: { 62 | stylisticSets: { 63 | '04': 'ss04', 64 | }, 65 | }, 66 | }, 67 | } 68 | ``` 69 | -------------------------------------------------------------------------------- /docs/src/feature-ligatures.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Ligatures 4 | description: Utilities for controlling ligatures and contextual forms. 5 | tags: ot-feature 6 | eleventyNavigation: 7 | key: Ligatures 8 | order: 1 9 | classData: ot-ligatures 10 | --- 11 | 12 | ## Usage 13 | 14 | These utilities provide access to OpenType ligature features not currently available via the higher-level CSS properties. For other ligature features, use the [Font Variant Ligatures](/font-variant-ligatures) utilities. 15 | 16 | ### Historical ligatures :feat[hlig] 17 | 18 | Some ligatures were in common use in the past, but appear anachronistic today. Some fonts include the historical forms as alternates, so they can be used for a “period” effect. The most common example is the long s paired with most ascenders, while a tz ligature is also found in German blackletter type. 19 | 20 | Depending on the font, historical ligatures may need to have [historical forms](/font-variant-alternates/#historical-forms-hist) enabled as well. Alternatively, using the actual historical glyph (`ſ` for the long `s` in this example) should apply the ligature without having to apply the historical forms for the entire run of text. 21 | 22 | ```html emerald 23 | 24 |Lost lesson
25 |26 | Lost lesson 27 |
28 | 29 | 30 |Lost lesson
31 | ``` 32 | 33 | **Pro tip:** To _prevent_ a ligature from being rendered where it is not appropriate, insert a zero-width non-joiner — `` — between the glyphs. Conversely, a zero-width joiner — `` — should render the ligature form, without any CSS needed! 34 | -------------------------------------------------------------------------------- /docs/src/feature-position.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Position 4 | description: Utilities for controlling alternate, smaller glyphs that are positioned as superscript or subscript. 5 | tags: ot-feature 6 | eleventyNavigation: 7 | key: Position 8 | order: 5 9 | classData: position 10 | --- 11 | 12 | ## Usage 13 | 14 | While it is possible to use the `font-variant-position` utilities at the "block" level, depending on the typeface this may result in other characters being substituted for the repositioned glyphs. To avoid this, wrap the appropriate characters in an inline element, such as `` or ``. 15 | 16 | Using `` or `` elements has its own pitfalls, however. Common "reset" styles and even browser default styles often try to approximate superscript or subscript glyphs, which should be disabled if you are using a font designed with these features. These resets and defaults vary, so these utilities don't attempt to disable any default styles for these elements. Either account for this in your own baseline styles, or use a more neutral wrapper, like ``. 17 | 18 | The examples below use `` and `` with the default Tailwind CSS reset styles for the initial result, and `` elements with the utility classes added for the final result, in order to show the difference between the "synthesized" characters and the specifically designed forms. 19 | 20 | ### Superscript :feat[sups] 21 | 22 | This feature replaces lining or oldstyle figures with superscript figures, often used for footnote indication, and replaces lowercase letters with superscript letters. 23 | 24 | ```html emerald 25 | 26 |27 | Mme 3He $2 28 |
29 |30 | Mme 3He 31 | $2 32 |
33 | 34 | 35 |Mme
36 | ``` 37 | 38 | This illustrates a case where blanket application of the feature wouldn't work: 39 | in **:span[3]{.sups}He** we want the :kbd[3] superscripted, but not the lowercase :kbd[e]. 40 | 41 | ### Subscript :feat[subs] 42 | 43 | Perhaps the most familiar example of subscripts is in chemical formulas. 44 | 45 | ```html orange 46 | 47 |H2O x0
48 |49 | H2O x0 50 |
51 | 52 | 53 |H2O
54 | ``` 55 | 56 | ### Scientific inferior :feat[sinf] 57 | 58 | Scientific inferior are for chemical and mathematical typesetting, and include optically corrected letters and numbers. This feature is often conflated with subscripts and may not be fully supported for every scientific notation form. For optimal results, something like [LaTeX](https://katex.org/) may be a better option. 59 | 60 | ```html rose 61 | 62 |63 | H2O YCbCr νμ 64 |
65 |66 | H2O YCbCr 70 | νμ 71 |
72 | 73 | 74 |H2O YCbCr νμ
75 | ``` 76 | -------------------------------------------------------------------------------- /docs/src/font-variant-alternates.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Font Variant Alternates 4 | description: Utilities for controlling the usage of alternate glyphs. 5 | tags: font-variant 6 | eleventyNavigation: 7 | key: Font Variant Alternates 8 | order: 3 9 | classData: alternates 10 | --- 11 | 12 | ## Usage 13 | 14 | Use the `font-variant-alternates` utilities to access alternative styles for different characters. These can be applied to blocks of text, in the case of historical forms or stylesets, or to individual characters, as with swash glyphs or character variants. 15 | 16 | ### Historical forms :feat[hist] 17 | 18 | Historical glyph variants may not be useful in everyday typesetting situations, but can prove useful when referencing the past. 19 | 20 | ```html fuchsia 21 | 22 |Jesuit
23 |24 | Jesuit 25 |
26 | 27 | 28 |Jesuit
29 | ``` 30 | -------------------------------------------------------------------------------- /docs/src/font-variant-caps.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Font Variant Caps 4 | description: Utilities for controlling alternate glyphs for capital letters. 5 | tags: font-variant 6 | eleventyNavigation: 7 | key: Font Variant Caps 8 | order: 2 9 | classData: caps 10 | --- 11 | 12 | ## Usage 13 | 14 | Use the `font-variant-caps` utilities to transform letters into optimised capital forms. Small Caps are less distracting than all capitals for longer form text settings. They also provide an additional way to apply emphasis within text. 15 | 16 | ### Small caps :feat[cmcp] 17 | 18 | This feature turns lowercase characters into small capitals. 19 | 20 | ```html amber 21 | 22 |Not all caps are Small Caps.
23 |24 | Not all caps are Small 25 | Caps. 26 |
27 | 28 | 29 |Not all caps are Small Caps.
30 | ``` 31 | 32 | ### All small caps :feat[smcp,c2sc] 33 | 34 | Like `small-caps` but transforms uppercase characters into small capitals as well. 35 | 36 | ```html orange 37 | 38 |All caps are Small Caps.
39 |40 | All caps are Small Caps. 41 |
42 | 43 | 44 |All caps are Small Caps.
45 | ``` 46 | 47 | ### Titling caps :feat[titl] 48 | 49 | Uppercase letter glyphs are often designed for use with lowercase letters. When used in all uppercase titling sequences they can appear too strong. Titling capitals are designed specifically for this situation. 50 | 51 | Note: This feature is not _exclusively_ for capital letters, but for any forms better suited for large type, as in titles. It is included with these utilities due to how it is applied in the W3C spec. 52 | 53 | ```html emerald 54 | 55 |Quick, Brown, Lazy, Grumpy
56 |57 | Quick, Brown, Lazy, 58 | Grumpy 59 |
60 | 61 | 62 |Quick Brown Lazy Grumpy
63 | ``` 64 | -------------------------------------------------------------------------------- /docs/src/font-variant-east-asian.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Font Variant East Asian 4 | description: Utilities for controlling alternate glyphs for East Asian scripts, like Japanese and Chinese. 5 | tags: font-variant 6 | eleventyNavigation: 7 | key: Font Variant East Asian 8 | order: 4 9 | inactive: true 10 | --- 11 | -------------------------------------------------------------------------------- /docs/src/font-variant-ligatures.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Font Variant Ligatures 4 | description: Utilities for controlling ligatures and contextual forms. 5 | tags: font-variant 6 | eleventyNavigation: 7 | key: Font Variant Ligatures 8 | order: 1 9 | classData: ligatures 10 | --- 11 | 12 | ## Usage 13 | 14 | Use the `font-variant-ligatures` utilities to enable ligatures and contextual forms in textual content. Each setting can be disabled by prefixing the class with `no-`. 15 | 16 | These utilities are composable so you can enable multiple `font-variant-ligatures` features by combining multiple classes in your HTML: 17 | 18 | ### Common ligatures :feat[liga] 19 | 20 | Most common ligatures mitigate spacing issues between specific combinations of letters within a typeface, often by connecting glyphs that might otherwise collide. Common ligatures are usually enabled by default in fonts that support them, and can be disabled if needed. 21 | 22 | ```html orange 23 | 24 |25 | fi ff fl ffi Th 26 |
27 |28 | fi 29 | ff 30 | fl 31 | ffi 32 | Th 33 |
34 | 35 | 36 |fi ff fl ffi Th
37 | ``` 38 | 39 | ### Discretionary ligatures :feat[dlig] 40 | 41 | Discretionary ligatures’ defining characteristic is that they are available to enable at your discretion: they are disabled by default. Often, these are additional ligatures that might be considered too attention-grabbing or unconventional to be enabled in many situations. 42 | 43 | ```html rose 44 | 45 |46 | ct sp st 47 |
48 |49 | ct 50 | sp 51 | st 52 |
53 | 54 | 55 |ct sp st
56 | ``` 57 | 58 | ### Contextual alternates :feat[calt] 59 | 60 | Like ligatures (though not strictly a ligature feature), contextual alternates are commonly used to harmonize the shapes of glyphs with the surrounding context. This feature is also enabled by default, except in Chrome, and cannot be disabled in Safari. 61 | 62 | ```html indigo 63 | 64 |65 | The bloom has gone off the rose 66 |
67 |68 | The bloom has gone off the 69 | rose 70 |
71 | 72 | 73 |The bloom has gone off the rose
74 | ``` 75 | -------------------------------------------------------------------------------- /docs/src/includes/class-table.njk: -------------------------------------------------------------------------------- 1 | {% macro table(classes) %} 2 |{{ description }}
14 | {%- endif %} 15 |12 | These utilities help you make the most of the font that you are using & 13 | make your web typography truly sing. 14 |
15 |You Will Try
21 |22 | You Will Try 23 |
24 | 25 | 26 |You Will Try
27 | ``` 28 | 29 | Kerning often defaults to `auto` in the browser, which may disable kerning at smaller font sizes. It can be disabled manually if needed using `.kerning-none`, or force-enabled using `.kerning-normal`. 30 | -------------------------------------------------------------------------------- /docs/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call */ 2 | import typographyPlugin from '@tailwindcss/typography' 3 | import opentypePlugin from 'tailwindcss-opentype' 4 | import colors from 'tailwindcss/colors' 5 | import defaultTheme from 'tailwindcss/defaultTheme' 6 | 7 | /** @type {import('tailwindcss').Config} */ 8 | const config = { 9 | content: [ 10 | './src/**/*.{html,md,njk}', 11 | './eleventy.config.js', 12 | './remark/*.js', 13 | ], 14 | theme: { 15 | extend: { 16 | colors: { 17 | grey: colors.gray, 18 | amber: colors.amber, 19 | orange: colors.orange, 20 | rose: colors.rose, 21 | fuchsia: colors.fuchsia, 22 | indigo: colors.indigo, 23 | lime: colors.lime, 24 | emerald: colors.emerald, 25 | teal: colors.teal, 26 | cyan: colors.cyan, 27 | sky: colors.sky, 28 | violet: colors.violet, 29 | }, 30 | 31 | typography: (theme) => ({ 32 | DEFAULT: { 33 | css: { 34 | // MaxWidth: 'none', 35 | color: theme('colors.grey.500'), 36 | '> :first-child': { marginTop: '0' }, 37 | '> :last-child': { marginBottom: '0' }, 38 | '&:first-child > :first-child': { marginTop: '0' }, 39 | '&:last-child > :last-child': { marginBottom: '0' }, 40 | 'h1, h2': { 41 | letterSpacing: '-0.025em', 42 | }, 43 | 'h2, h3': { 44 | 'scroll-margin-top': `${(70 + 40) / 16}rem`, 45 | }, 46 | code: { 47 | fontWeight: '400', 48 | color: theme('colors.violet.600'), 49 | }, 50 | 'h3 code': { 51 | fontWeight: 'inherit', 52 | color: 'inherit', 53 | }, 54 | 'h3 code::before': { content: 'none' }, 55 | 'h3 code::after': { content: 'none' }, 56 | '.code-sample p': { margin: 0 }, 57 | '.code-sample mark': { 58 | color: 'var(--accent-color)', 59 | background: 'none', 60 | }, 61 | table: { 62 | fontSize: theme('fontSize.sm')[0], 63 | lineHeight: theme('fontSize.sm')[1].lineHeight, 64 | }, 65 | thead: { 66 | color: theme('colors.grey.600'), 67 | borderBottomColor: theme('colors.grey.200'), 68 | }, 69 | 'thead th': { 70 | paddingTop: 0, 71 | fontWeight: theme('fontWeight.semibold'), 72 | }, 73 | 'tbody tr': { 74 | borderBottomColor: theme('colors.grey.200'), 75 | }, 76 | 'tbody tr:last-child': { 77 | borderBottomWidth: '1px', 78 | }, 79 | 'tbody code': { 80 | fontSize: theme('fontSize.xs')[0], 81 | }, 82 | }, 83 | }, 84 | }), 85 | 86 | spacing: { 87 | 18: '4.5rem', 88 | 88: '22rem', 89 | '15px': '0.9375rem', 90 | '23px': '1.4375rem', 91 | full: '100%', 92 | }, 93 | 94 | fontFamily: { 95 | sans: ['Inter var', ...defaultTheme.fontFamily.sans], 96 | allan: 'Allan', 97 | caflisch: 'Caflisch Script', 98 | exo: 'Exo', 99 | garamond: 'EB Garamond, serif', 100 | hypatia: 'Hypatia Sans Pro, sans-serif', 101 | goudy: 'Sorts Mill Goudy, serif', 102 | warnock: 'Warnock Pro, serif', 103 | }, 104 | 105 | width: { 106 | xl: '36rem', 107 | }, 108 | 109 | maxWidth: { 110 | '4.5xl': '60rem', 111 | '8xl': '90rem', 112 | }, 113 | 114 | maxHeight: (theme) => ({ 115 | sm: '30rem', 116 | '(screen-18)': `calc(100vh - ${theme('spacing.18')})`, 117 | }), 118 | 119 | scale: { 120 | 80: '0.8', 121 | }, 122 | }, 123 | }, 124 | variants: {}, 125 | plugins: [typographyPlugin, opentypePlugin], 126 | } 127 | 128 | export default config 129 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwindcss-opentype-monorepo", 3 | "version": "0.0.0", 4 | "private": true, 5 | "homepage": "https://tailwindcss-opentype.netlify.app", 6 | "repository": "stormwarning/tailwindcss-opentype", 7 | "license": "ISC", 8 | "author": "Jeff Nelson (https://tidaltheory.io)", 9 | "type": "module", 10 | "scripts": { 11 | "build": "pnpm run -F './plugin' build", 12 | "build:docs": "pnpm run -F './docs' build", 13 | "changeset": "changeset add", 14 | "dev": "pnpm run -F './docs' dev", 15 | "prepare": "husky", 16 | "release": "npm run build && changeset publish", 17 | "test": "pnpm run -F './plugin' test" 18 | }, 19 | "lint-staged": { 20 | "*.{js,cjs,ts}": [ 21 | "eslint --fix", 22 | "prettier --write" 23 | ], 24 | "package.json": "prettier --write" 25 | }, 26 | "devDependencies": { 27 | "@changesets/cli": "2.17.0", 28 | "@types/node": "22.13.10", 29 | "@zazen/changesets-changelog": "2.0.3", 30 | "@zazen/eslint-config": "6.10.0", 31 | "@zazen/prettier-config": "1.1.1", 32 | "eslint": "8.57.1", 33 | "eslint-import-resolver-node": "0.3.9", 34 | "husky": "9.1.7", 35 | "lint-staged": "15.5.0", 36 | "prettier": "3.2.5", 37 | "prettier-plugin-jinja-template": "2.0.0", 38 | "typescript": "5.8.2", 39 | "vitest": "3.0.8" 40 | }, 41 | "packageManager": "pnpm@10.6.3", 42 | "engines": { 43 | "node": ">=16" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /plugin/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # tailwindcss-opentype 2 | 3 | ## 1.1.0 — 2022-08-12 4 | 5 | #### 🎁 Added 6 | 7 | - Add stylistic alternates — `salt` — utility [#90](https://github.com/stormwarning/tailwindcss-opentype/pull/90) 8 | 9 | ## 1.0.0 — 2022-03-25 10 | 11 | #### 💣 Breaking changes 12 | 13 | - Drop support for legacy AOT mode in order to support v3 [#87](https://github.com/stormwarning/tailwindcss-opentype/pull/87) 14 | 15 | Plugin no longer supports v1, may still work in v2 as long as JIT mode is enabled. 16 | 17 | ## 0.5.0 — 2022-03-24 18 | 19 | #### 🎁 Added 20 | 21 | - Add stylistic sets utilities [#84](https://github.com/stormwarning/tailwindcss-opentype/pull/84) 22 | 23 | ## 0.4.0 — 2021-09-21 24 | 25 | #### 🎁 Added 26 | 27 | - Add historical ligatures — `hlig` — utility [#69](https://github.com/stormwarning/tailwindcss-opentype/pull/69) 28 | - Add `font-kerning` utilities [#67](https://github.com/stormwarning/tailwindcss-opentype/pull/67) 29 | 30 | ## 0.3.0 — 2021-09-08 31 | 32 | #### 🎁 Added 33 | 34 | - Simplify `font-feature-settings` use in JIT-mode [#57](https://github.com/stormwarning/tailwindcss-opentype/pull/57) 35 | Allows use of low-level font feature utilities without requiring the `.font-features` class to activate. 36 | 37 | ## 0.2.0 — 2021-08-20 38 | 39 | #### 🎁 Added 40 | 41 | - Add `position` utility classes [#10](https://github.com/stormwarning/tailwindcss-opentype/pull/10) 42 | Uses the low-level `font-feature-settings` property under the hood. 43 | 44 | ## 0.1.0 — 2021-04-19 45 | 46 | #### ♻️ Changed 47 | 48 | - Update `font-variant-ligature` utilities [#6](https://github.com/stormwarning/tailwindcss-opentype/pull/6) 49 | Adds negation utilities and makes classes composable. 50 | 51 | #### 🎁 Added 52 | 53 | - Add documentation microsite [#8](https://github.com/stormwarning/tailwindcss-opentype/pull/8) 54 | 55 | ## 0.0.2 — 2021-04-07 56 | 57 | #### 🎉 Initial release! 58 | 59 | - Add initial utility classes [#4](https://github.com/stormwarning/tailwindcss-opentype/pull/4) 60 | A handful of the more common OpenType variant settings, no fallbacks yet. 61 | -------------------------------------------------------------------------------- /plugin/LICENSE.txt: -------------------------------------------------------------------------------- 1 | ISC License 2 | 3 | Copyright Jeff Nelson 4 | 5 | Permission to use, copy, modify, and/or distribute this software for any 6 | purpose with or without fee is hereby granted, provided that the above 7 | copyright notice and this permission notice appear in all copies. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES 10 | WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF 11 | MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR 12 | ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES 13 | WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN 14 | ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF 15 | OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. -------------------------------------------------------------------------------- /plugin/__tests__/helpers.ts: -------------------------------------------------------------------------------- 1 | import postcss from 'postcss' 2 | import tailwindcss, { type Config } from 'tailwindcss' 3 | 4 | const css = String.raw 5 | 6 | export async function generateCss(testConfig: Omit