tags

2022/01/04

about the css :target selector (matches the element with the id specified by the url document-fragment) and the svg <view> element, which specifies a viewBox and can have an id.

see https://css-tricks.com/svg-fragment-identifiers-work/

2022/01/11

that you can pass default values to css variable references, e.g. var(--button-color, pink)

Also,

If the SVG fragment identifier addresses a time segment (e.g., MyDrawing.svg#t=10),then the initial view into the SVG document is established as if no fragment identifier was provided. The rendering of the SVG Document shall be as if the setCurrentTime method on the SVG Document element had been called with the begin time value from the fragment identifier. Additionally, if an end time value is provided in the fragment identifier, the effect is equivalent to calling the pauseAnimations method on the SVG Document when the document time reaches the end time of the fragment identifier.
– https://www.w3.org/TR/SVG/linking.html#LinksIntoSVG

2022/07/01

That in Chrome/chromium you can view the actually-rendered font by

inspecting an element
view computed properties

source: https://stackoverflow.com/a/31254584/6571327

2022/07/04

How to subset fonts:

# in a virtualenv
pip install fonttools brotli zopfli
pyftsubset --help

see:

Also, optical-sized variable fonts look great.

2023/09/22

How to position an element relative to its parent without affecting the flow of other sibling elements:

you’re most likely interested in position: absolute which will position an element relative to a container. By default, the container is the browser window, but if a parent element either has position: relative or position: absolute set on it, then it will act as the parent for positioning coordinates for its children.
– https://stackoverflow.com/a/105035/6571327

2024/01/29

Typographic Units

Absolute distance

Name	CSS Unit	length
Picas	`pc`	1/6 inch
Points	`pt`	1/72 inches

– https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#absolute_length_units

Font-relative units

em:
In metal type, the point size (and hence the em, from em quadrat) was equal to the line height of the metal body from which the letter rises. […] In some older texts, but not all, the em is defined, or said to have been defined, as the width of the capital ‘M’ in the current typeface and point size. […] In [CSS] the em unit is the height of the font in nominal points or inches.
In digital type, the relationship of the height of particular letters to the em is arbitrarily set by the typeface designer. However, as a very rough guideline, an “average” font might have a cap height of 70% of the em, and an x-height of 48% of the em.
– https://en.wikipedia.org/wiki/Em_(typography)
Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width.
– MDN: CSS relative units
historically the em unit was derived from the width of a capital “M” in a given typeface.
– MDN: CSS font-size
ex:
x-height of the element’s font.
– MDN: CSS relative units
when setting the font-size property using ex units, the font-size equals the x-height of the first available font used on the page.
– MDN: CSS font-size

Lines & measurements

Typography line terms

Cap height

Cap height refers to the height of a typeface’s flat capital letters (such as M or I) measured from the baseline.
– Material Design: typographic properties reference

ascender   _
cap height _______________
                 /\     |
median     _    /  \    |
               / /\ \   |
              / ____ \  |
baseline   _ /_/____\_\_|_

descender  _

x-height

X-height refers to the height of the lowercase x for a typeface, and it indicates how tall or short each glyph in a typeface will be.
– Material Design: typographic properties

ascender   _
cap height _

median     _____________
               \ \/ / |
                >  <  |
baseline   ____/_/\_\_|_

descender _

Descender height

ascender   _
cap height _

median     _   _ __
              | '_ \
              | |_) |
baseline______| .__/_____
              | |      |
descender_____|_|______|_

Ascender height

ascender   _________
cap height _ | |
             | |
median     _ | |__
             | '_ \
             | |_) |
baseline   _ |_.__/

descender  _

Language categories

For ease of internationalization, Google has categorized languages into three categories: English-like, tall, and dense.
Tall: Language scripts that require extra line height to accommodate larger glyphs … like Arabic, Hindi, Telugu, Thai, and Vietnamese.
Dense: Language scripts that require extra line height to accommodate larger glyphs but have different metrics from tall scripts. Includes Chinese, Japanese, and Korean.
– Material Design: Language categories

2024/02/14

A more concise way to implement light/dark modes:

:root {
  color-scheme: light dark;
}

which saves a few more bytes than my usual

:root {
  --fg: #000;
  --bg: #fff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fg: #fff;
    --bg: #000;
  }
}

– https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme#declaring_color_scheme_preferences

I also learned that CSS has special syntax for systmem-provided colors, notably:

Canvas: the default background color
CanvasText: the default text color

– https://developer.mozilla.org/en-US/docs/Web/CSS/system-color#syntax

2024/02/19

That CSS can adjust any font’s aspect value using font-size-adjust – the ratio between the cap height and the x-height, NOT the aspect ratio.

2024/12/28

That all the grief with css borders shifting the layout can be avoided by using outline instead:

Outline is a line outside of the element’s border. Unlike other areas of the box, outlines don’t take up space, so they don’t affect the layout of the document in any way.
– https://developer.mozilla.org/en-US/docs/Web/CSS/outline#description

2025/12/13

Since May 2024, this feature works across the latest devices and browser versions. The light-dark() CSS function enables setting two colors for a property - returning one of the two colors options by detecting if the developer has set a light or dark color scheme or the user has requested light or dark color theme - without needing to encase the theme colors within a prefers-color-scheme media feature query.
– https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/light-dark

Also, you can detecte system-level dark mode (and listen for changes) using

const query = window.matchMedia("(prefers-color-scheme: dark)")
const isDark: boolean = query.matches # boolean
query.addEventListener('change', (e): boolean => e.matches)

(h/t https://robkendal.co.uk/blog/2024-11-21-detecting-os-level-dark-mode/)