sparanoid / opentype-features

The Complete CSS Demo for OpenType Features

OpenType Features in CSS

The Complete CSS Demo for OpenType Features

---

Contributing

If you find something wrong or I just missed some OpenType features of cool fonts, you can just edit ./_app/_data/font-features.yml this data file via GitHub and send me Pull Request.

Development Notes

List GSUB/GPOS Features

$ brew install lcdf-typetools
$ otfinfo -f font.ttf

Compress to WOFF2

$ brew install woff2
$ woff2_compress font.ttf

Donate

Wanna buy me a cup of coffee? Great.

Author

Tunghsiao Liu

• Twitter: @tunghsiao
• GitHub: @sparanoid

Licenses

All files and directories are licensed under the MIT unless explicitly stated.

© Sparanoid, Inc.

opentype-features's Issues

Page Zoom feature doesn't work with sparanoid.com/lab/opentype-features

When I visit https://sparanoid.com/lab/opentype-features/ the text is too big for me to read, but if I try to zoom it down with Ctrl+Minus, it stays the same size.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency jekyll to v4.3.3
• chore(deps): update dependency tzinfo-data to v1.2024.1
• chore(deps): update circleci/ruby docker tag to v3
• chore(deps): update dependency grunt-contrib-cssmin to v5
• chore(deps): update dependency grunt-contrib-less to v3
• chore(deps): update dependency grunt-shell to v4
• chore(deps): update dependency grunt-terser to v2
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency grunt to v1.5.3 [security]
• chore(deps): update dependency node-sass to v7 [security]
• chore(deps): update dependency autoprefixer to v9.8.8
• chore(deps): update dependency grunt-contrib-clean to v2.0.1
• chore(deps): update dependency stringex to v2.8.6
• chore(deps): update dependency tzinfo to v2.0.6
• chore(deps): update circleci/ruby docker tag to v2.7.5
• chore(deps): update dependency coffeescript to v2.7.0
• chore(deps): update dependency grunt-contrib-less to v2.1.0
• chore(deps): update dependency grunt-git to v1.1.1
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update dependency autoprefixer to v10

Detected dependencies

bundler

Gemfile

• jekyll "4.1.1"
• jekyll-last-modified-at undefined
• stringex undefined
• match_regex undefined
• tzinfo "2.0.2"
• tzinfo-data undefined
• wdm '>= 0.1.0'

circleci

.circleci/config.yml

• circleci/ruby 2.6.4-node-browsers
• circleci/ruby 2.6.4-node-browsers

npm

package.json

• @lodder/time-grunt 4.0.0
• autoprefixer 9.8.5
• coffeelint 2.1.0
• coffeescript 2.5.1
• grunt 1.2.1
• grunt-assets-inline 1.2.4
• grunt-bump 0.8.0
• grunt-cache-bust 1.7.0
• grunt-cleanempty 1.0.4
• grunt-coffeelint 0.0.16
• grunt-concurrent 3.0.0
• grunt-contrib-clean 2.0.0
• grunt-contrib-copy 1.0.0
• grunt-contrib-cssmin 3.0.0
• grunt-contrib-htmlmin 3.1.0
• grunt-contrib-less 2.0.0
• grunt-contrib-watch 1.1.0
• grunt-conventional-changelog 6.1.0
• grunt-doctype 2.0.2
• grunt-git 1.0.14
• grunt-html-trim 0.1.2
• grunt-jekyll 1.0.1
• grunt-minjson 0.4.0
• grunt-newer 1.3.0
• grunt-postcss 0.9.0
• grunt-sass 3.1.0
• grunt-service-worker 1.0.3
• grunt-shell 3.0.1
• grunt-sri-hash 1.1.5
• grunt-terser 1.0.0
• grunt-text-replace 0.4.0
• grunt-uncss-inline 1.2.7
• grunt-xmlmin 0.1.8
• jit-grunt 0.10.0
• node-sass 4.14.1

---

• Check this box to trigger a request for Renovate to run again on this repository

"aalt" description doesn't match example

For "aalt" the description is "Special feature: used to present user with choice all alternate forms of the character".

However, what the demo seems to show is just all the characters replaced by a (random?) alternate, not all the alternate forms, and not any specific alternate. It's not clear how to use this feature effectively.

pcap + c2pc – free fonts available

This is just a quick tip about two free fonts that can be used to showcase the pcap and c2pc features:

• Coelacanth
• the Google version of EB Garamond

What 'Demo' from the website and title stands for ?

Contextual Swashes example

Hi there,

This webpage is awesome, thanks a lot for those examples :)

May I suggest the Bello Pro font for (at least) contextual swashes?

• Bello Pro on Typekit
• Bello Pro features on Underware

It has many OpenType featuresthat could help fill in missing examples.

Keep going!

Doesn't respect chrome zoom

The text is massive on my monitor.

Instinctively I hit CMD+-.

Zooming has no effect.
I literally had to move my chair back so I comfortably view the site.

Petite Caps CSS value

Is "mgrk" really the value for Mathematical Greek and Petite Caps? I guess Petite Caps might be "pcap".

Otherwise great work, thank you!