@effing/canvas 0.43.0 → 0.45.0

package/README.md

@@ -254,7 +254,7 @@ const png = canvas.encodeSync("png");
 | `textAlign`             | `left`, `center`, `right`, `justify` (inherited)               |
 | `textDecoration`        | String (inherited)                                             |
 | `textTransform`         | `none`, `uppercase`, `lowercase`, `capitalize` (inherited)     |
-| `lineHeight`            | Number or string (inherited)                                   |
+| `lineHeight`            | Number or string (inherited)⁴                                  |
 | `letterSpacing`         | Number or CSS length (inherited)                               |
 | `whiteSpace`            | `normal`, `nowrap`, `pre`, `pre-wrap`, `pre-line` (inherited)¹ |
 | `wordBreak`             | `normal`, `break-all`, `keep-all`, `break-word`² (inherited)   |
@@ -268,24 +268,28 @@ const png = canvas.encodeSync("png");
 | `WebkitTextStrokeWidth` | CSS length (inherited)                                         |
 | `WebkitTextStrokeColor` | Any CSS color (inherited)                                      |
 
-¹ White space is processed as in CSS: under `normal`, `nowrap` and `pre-line`, a run of spaces and tabs collapses to one space, the spaces at the start and end of the text and around a newline are removed, and a newline becomes a space (`pre-line` keeps it as a line break). Adjacent strings, as `Hello {name}` gives, are one run of text, and each run of text between elements is laid out as a flex item of its own, as browsers lay out text in a flex container: a run of nothing but white space, such as `{" "}` between two elements, isn't rendered, and an element whose only text is empty or white space has no line box. Fragments, arrays and function components are unwrapped first, as the DOM has no trace of them. A `<br />` is an item of its own, not a forced break inside a run of text: in a column it puts the text after it on the next line, but in a row (the default `flexDirection`) the text either side of it sits side by side, where browsers stack it. A line or paragraph separator (U+2028, U+2029) is a space with a break opportunity after it, as in browsers, but with `letterSpacing` it gets the spacing twice where browsers add it once. `pre` and `pre-wrap` keep the spaces before a line break in the line's width and alignment, as browsers do; a tab is one space wide. A CRLF counts as one newline, and `pre` and `pre-wrap` drop a lone CR, which browsers draw as nothing.
+¹ White space is processed as in CSS: under `normal`, `nowrap` and `pre-line`, a run of spaces and tabs collapses to one space, the spaces at the start and end of the text and around a newline are removed, and a newline becomes a space (`pre-line` keeps it as a line break). Adjacent strings, as `Hello {name}` gives, are one run of text, and each run of text between elements is laid out as a flex item of its own, as browsers lay out text in a flex container: a run of nothing but white space, such as `{" "}` between two elements, isn't rendered, and an element whose only text is empty or white space has no line box. Fragments, arrays and function components are unwrapped first, as the DOM has no trace of them. A `<br />` is a forced line break in the run of text around it, under every `whiteSpace` (`nowrap` included), as in browsers: the text either side of it is one item, in a row as in a column, and the spaces before and after it are removed where spaces collapse. A `<br />` between two elements is an item of one empty line. A line or paragraph separator (U+2028, U+2029) is a space with a break opportunity after it, as in browsers, `letterSpacing` included. `pre` and `pre-wrap` keep the spaces before a line break in the line's width and alignment, as browsers do; a tab is one space wide. A CRLF counts as one newline. Under `pre` and `pre-wrap`, a lone CR is drawn as nothing and doesn't break the line, as in browsers, but the letters either side of it don't kern or join; elsewhere it's a space.
 
 ² A word wider than its line overflows it, as in CSS, unless `overflowWrap` is `break-word` or `anywhere` (or `wordBreak` the deprecated `break-word`): the word then starts a line of its own and is broken between grapheme clusters where that line is full. `anywhere` breaks as `break-word` does.
 
-³ The last line shown is its own text with an ellipsis after it, cut to fit, as in browsers. Under `whiteSpace: "pre"`, a clamped line that ends at a newline gets no ellipsis, where browsers add one. Canvas aligns the clamped line with its ellipsis, where browsers align its text alone and let the ellipsis overflow (hidden by `overflow: hidden`): right-aligned, `"ab\ncd"` clamped to one line is "ab…" at the right edge, where browsers show "ab" there.
+³ The last line shown is its own text with an ellipsis after it, cut to fit, as in browsers. Canvas aligns the clamped line with its ellipsis, where browsers align its text alone and let the ellipsis overflow (hidden by `overflow: hidden`): right-aligned, `"ab\ncd"` clamped to one line is "ab…" at the right edge, where browsers show "ab" there.
+
+⁴ `normal` line boxes are sized as in Chrome on macOS: the font's hhea ascent, descent and line gap, each rounded to whole pixels, with the baseline at the rounded ascent plus half the line gap. They follow the first available font in `fontFamily` alone, where browsers also grow a line for a fallback font that draws some of its text.
 
 ### Effects
 
 | Property          | Values / Notes                                   |
 | ----------------- | ------------------------------------------------ |
-| `boxShadow`       | CSS box-shadow string                            |
-| `textShadow`      | CSS text-shadow string                           |
+| `boxShadow`       | CSS box-shadow list¹                             |
+| `textShadow`      | CSS text-shadow list¹ (inherited)                |
 | `transform`       | `translate`, `scale`, `rotate`, `skewX`, `skewY` |
 | `transformOrigin` | CSS transform-origin string                      |
 | `filter`          | CSS filter string                                |
 | `backdropFilter`  | CSS filter string applied to the backdrop        |
 | `clipPath`        | Basic shapes, `shape()`, geometry boxes, `none`  |
 
+¹ As in CSS: a comma-separated list of shadows, the first painted on top. A box shadow is `inset`, two to four lengths (x and y offsets, blur radius, spread) and a colour, in either order; a text shadow is two or three lengths (no spread or `inset`) and a colour. A shadow without a colour is cast in `currentColor`. A spread grows the shadow's shape (or, negative, shrinks it), and its corner radii with it; an `inset` shadow is cast inside the padding box, clipped to its rounded corners. Lengths are in px or any unit canvas resolves (`em`, `rem`, `vw`, `pt`, …; a bare number is read as px). An invalid value casts no shadow, as CSS ignores it.
+
 ### Image
 
 | Property    | Values / Notes                                   |