Comments (3)
Really appreciate your update on this (both here and in the unjs/fontaine
issue)!
Personally, I think this might have even wider impact. I am currently using the following library:
https://github.com/stormwarning/tailwindcss-capsize
It generates Tailwind CSS leading-trim utility classes, which help design predictable UIs by removing the extra space from text bounding box. In the project I am working on I noticed that e.g. for a Lato font of a normal weight it works perfectly, but any lighter/bolder weights are slightly off in terms of measurements. This was another reason for creating this issue (alongside the unjs/fontaine
one).
Ideally, once we have all the metrics for different font weights, the above library can be tweaked to produce a set of Tailwind CSS utilities covering all the weights which will allow (nearly) pixel perfect trimming.
Exciting times, looking forward to it :)
from capsize.
Hey Damian, thanks for the feedback. In terms of the library's usefulness, I assume you are referring to using the metrics with the createFontStack
API?
We are about to land an substantial upgrade to the unpack
and metrics
library to add support for character sets beyond basic Latin. This work will provide the foundations from a data structure perspective to be able to handle variants, e.g. weight, italics, etc.
As xWidthAvg
is a computed value that is not available in the tables internally, we are have had to consider how best to model the data across character sets and frequencies, weights, and other variants.
Hopefully have more to share on this very soon
from capsize.
Thanks for the additional context. The point you make around leading trimming is interesting. My thinking has been that having mixed weights alongside each other (e.g. emphasized words in a sentence), you wouldn't want to trim one word more than the other.
I would be curious how the text-box-trim
spec intends to handle this. Something to ponder maybe.
from capsize.
Related Issues (20)
- Support for variable fonts HOT 5
- Text-overflow: ellipsis is not working HOT 2
- @capsizecss/metrics missing metrics HOT 3
- TailwindCSS Plugin
- Supporting rem as fontSize and lineheight HOT 2
- Latest version of `@capsizecss/metrics` doesn't generate font files HOT 4
- createFontStack returns incorrect values for fonts with the same metrics HOT 2
- Start error HOT 2
- Getting an error when using createTextStyle HOT 2
- capsize_capsizeStyle rules not being built in Remix projects HOT 4
- @capsizecss/unpack fontkit module import error HOT 4
- Doesn't tsc cleanly to javascript HOT 1
- Document that it's the hhea ascender/descender/lineGap that matter. HOT 8
- Website updated without Font Metrics HOT 11
- Please document how to use capsize with lists HOT 2
- Some combination of values don't wrap the full text height HOT 4
- `text-indent` not applied to Capsize elements HOT 1
- expose xHeight to metrics package HOT 3
- Return numeric values in precomputeValues HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from capsize.