![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
capsize
Advanced tools
Readme
Capsize makes the sizing and layout of text as predictable as every other element on the screen.
Using font metadata, text can now be sized according to the height of its capital letters while trimming the space above capital letters and below the baseline.
$ npm i --save capsize
import capsize from 'capsize';
const styles = capsize({
capHeight: 16,
lineGap: 8,
fontMetrics: {
capHeight: 700,
ascent: 1058,
descent: -291,
lineGap: 0,
unitsPerEm: 1000,
},
});
Capsize supports two methods of defining the size of text, capHeight
and fontSize
.
NOTE: You should only ever pass one or the other, not both.
capHeight: <number>
Sets the height of the capital letters to the defined value. Defining typography in this way makes aligning to a grid or with other elements, e.g. icons, a breeze.
fontSize: <number>
Setting the font size allows you to get all the benefits of the white space trimming, while still specifying an explicit font-size
for your text. This can be useful when needed to match a concrete design spec or fitting into an existing product.
Capsize supports two mental models for specifying line height, lineGap
and leading
. If you pass neither the text will follow the default spacing of the specified font, e.g. line-height: normal
.
NOTE: You should only ever pass one or the other, not both.
lineGap: <number>
Sets the number of pixels between lines, as measured between the baseline and cap height of the next line.
leading: <number>
Sets the line height to the provided value as measured from the baseline of the text. This aligns the web with how typography is treated in design tools.
This metadata is extracted from the metrics tables inside the font itself. You can use the Capsize website to find these by selecting a font and referencing JavaScript
tab in step 3.
Returns the actual rendered cap height for a specific font size given the provided font metrics.
import { getCapHeight } from 'capsize';
const actualCapHeight = getCapHeight({
fontSize: 24,
fontMetrics: {
...
}
})
MIT.
FAQs
Flipping how we define typography in CSS.
The npm package capsize receives a total of 5,107 weekly downloads. As such, capsize popularity was classified as popular.
We found that capsize demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.