Snippets
DOM to Image
dom-to-image is a library which can turn arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image, written in JavaScript. It’s based on domvas by Paul Bakaus and has been completely rewritten, with some bugs fixed and some new features (like web font and image support) added.
line-gap-override, ascent-override and descent-override CSS properties
[T]he
line-gap-override,ascent-overrideanddescent-overrideCSS properties […] allow developers more control over how fonts are displayed. The following snippet shows just how useful these properties are when using a local fallback font:
Code language: CSS
@font-face {
font-family: web-font;
src: url("<https://example.com/font.woff>");
}
@font-face {
font-family: local-font;
src: local(Local Font);
ascent-override: 90%;
descent-override: 110%;
line-gap-override: 120%;
}
These […] properties help to reduce layout shift when fonts are loading, as developers can better match the intricacies of a local font with a web font. They work alongside the
size-adjustproperty[.]
