Add Font styles #1635
Merged
Add Font styles #1635
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
the
feature definition
mirisuzanne
reviewed
Sep 4, 2024
ddbeck
reviewed
Sep 18, 2024
ddbeck
requested changes
Sep 23, 2024
features/font-stretch.yml
Outdated
| @@ -0,0 +1,12 @@ | |||
| name: font-stretch | |||
| description: The `font-stretch` CSS property selects a font face from a font family based on width, either by a keyword such as "condensed" or a percentage. The `font-stretch` property will be replaced by `font-width`. | |||
There was a problem hiding this comment.
font-width exists in no implementations yet (AFAIK). Let's move that to a comment and return to this when there's something contemporary to reference.
Suggested change
| description: The `font-stretch` CSS property selects a font face from a font family based on width, either by a keyword such as "condensed" or a percentage. The `font-stretch` property will be replaced by `font-width`. | |
| description: The `font-stretch` CSS property selects a font face from a font family based on width, either by a keyword such as `condensed` or a percentage. | |
| # Note: `font-stretch` will become an alias to `font-width`: https://drafts.csswg.org/css-fonts/#font-stretch-desc |
features/font-size.yml
Outdated
| @@ -0,0 +1,11 @@ | |||
| name: font-size | |||
| description: The `font-size` CSS property sets the text size. | |||
There was a problem hiding this comment.
The spec says height, which feels like a nice way to dodge the "size sets size" circularity here.
Suggested change
| description: The `font-size` CSS property sets the text size. | |
| description: The `font-size` CSS property sets the text height. |
features/font-metric-overrides.yml
Outdated
| @@ -0,0 +1,11 @@ | |||
| name: Font metric overrides | |||
| description: The `ascent-override`, `descent-override` and `line-gap-override` descriptors adjust the display of a font declared in an `@font-face`. This can help make fallback fonts look the same size. | |||
There was a problem hiding this comment.
Suggested change
| description: The `ascent-override`, `descent-override` and `line-gap-override` descriptors adjust the display of a font declared in an `@font-face`. This can help make fallback fonts look the same size. | |
| description: The `ascent-override`, `descent-override`, and `line-gap-override` descriptors adjust the display of a font declared in an `@font-face` statement. This can help make fallback fonts look the same size. |
features/font-family-math.yml
Outdated
| @@ -0,0 +1,5 @@ | |||
| name: Math font family | |||
| description: The `font-family:\ math` CSS declaration uses the browser default font face for displaying mathematical expressions. | |||
There was a problem hiding this comment.
FYI, these slashes show up literally
Suggested change
| description: The `font-family:\ math` CSS declaration uses the browser default font face for displaying mathematical expressions. | |
| description: The `font-family: math` CSS declaration uses the browser default font face for displaying mathematical expressions. |
You can "preview" the HTML for these with npx tsx -p 'import { features } from "./index.ts"; Object.values(features).forEach(f => console.l og(f.description_html));' | grep 'system-ui'
There was a problem hiding this comment.
Removing it breaks YAML, and gives the error-
YAMLParseError: Nested mappings are not allowed in compact mappings at line 2, column 14:
I'm able to fix it by wrapping in double quotes.
features/font-family-system.yml
Outdated
| @@ -0,0 +1,6 @@ | |||
| name: System font | |||
| description: The `font-family:\ system-ui` CSS declaration uses the operating system default font for text. | |||
There was a problem hiding this comment.
Suggested change
| description: The `font-family:\ system-ui` CSS declaration uses the operating system default font for text. | |
| description: The `font-family: system-ui` CSS declaration uses the operating system default font for text. |
ddbeck
approved these changes
Sep 23, 2024
# for free
to join this conversation on GitHub.
Already have an account?
# to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Combines several font features-