Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typography module revamp #7271

Open
dhowe opened this issue Sep 16, 2024 · 0 comments
Open

Typography module revamp #7271

dhowe opened this issue Sep 16, 2024 · 0 comments

Comments

@dhowe
Copy link
Contributor

dhowe commented Sep 16, 2024

Typography module revamp for p5.js 2.0

see pr #7356

p5 function browser related implemented notes
text() fillText(), strokeText() x
textAlign() textAlign, textBaseline x
textAscent() measureText() > TextMetrics metrics: {   actualBoundingBoxAscent,   actualBoundingBoxDescent,   actualBoundingBoxLeft,   actualBoundingBoxRight,   alphabeticBaseline,   emHeightAscent,   emHeightDescent,   fontBoundingBoxAscent,   fontBoundingBoxDescent,   hangingBaseline,   ideographicBaseline,
  width
}
x 2 versions
textDescent() measureText() -> TextMetrics as above x 2 versions
textLeading() manual x
textSize() font x
textWidth() measureText() > TextMetrics as above x 2 versions
textWrap() manual x
loadFont() FontFace.load() support transparent loading of ttf/otf/woff/woff2 fonts x name as optional extra param
textFont() font x currently supporting only px
textBounds() measureText() > TextMetrics as above x
p5.drawingContext Context2d fontKerning, fontStretch, fontVariantCaps, letterSpacing, wordSpacing, fontKerning, direction x these can be set directly on the drawingContext (and then taken into account in measureText), or set via textProp(s)
p5.Font FontFace, FontFaceSet Has style, weight, family, stretch, variant - need to examine other properties x a wrapper around font-face for backward compatibility
p5.Font.font font FontFace delegate, short-hand for the following css properties: font-family(required), font-size(required), font-stretch, font-style, font-variant, font-weight, line-height x
p5.Font.textToPoints() x implemented via hidden canvas

Issues

  • There will be differences between the various bounds for text, depending on whether we are using the actual string, or generic measurements for the font. This applies to textAscent(), textDescent(), textWidth() and textBounds(), and also for rendering text in user-specified bounding boxes. It is likely that we will want to support both measurements. An option for textAscent/textDescent is to return different measurement depending on whether the user passes in a specific string or not. A different option, which works better for textWidth/textBounds, would be to include a 2nd set of functions in the API, something like fontWidth() and fontBounds(), which return the more generic measurements.
  • Support non-pixel font metrics (em, etc). Conversion between units is not straightforward - the best way to do this is to use one or more hidden DOM elements. Once we have these we may want to use them for other properties and text measurement for the sake of consistency.
  • Should textBounds (and fontBounds()) take rectMode into account ? yes
  • Variable-fonts: appears there is no cross-browser way to support these on the canvas (correct me if I'm wrong)
  • New functions: p5.textBounds, p5.fontBounds, p5.fontWidth, p5.textToPoints, p5.textProp, p5.textProps

Notes on the css font property spec###

The ‘font’ property is, except as described below, a shorthand property for setting ‘font-style’, ‘font-variant’, ‘font-weight’, ‘font-stretch’, ‘font-size’, ‘line-height’, ‘font-family’ at the same place in the stylesheet. Values for the ‘font-variant’ property may also be included but only those supported in CSS 2.1 -> [normal | small-caps]

All subproperties of the ‘font’ property are first reset to their initial values, including those listed above plus ‘font-size-adjust’, ‘font-kerning’, all subproperties of ‘font-variant’, and ‘font-feature-settings’, but not ‘font-synthesis’. Then, those properties that are given explicit values in the ‘font’ shorthand are set to those values. For a definition of allowed and initial values, see the previously defined properties. For reasons of backwards compatibility, it is not possible to set ‘font-size-adjust’ to anything other than its initial value using the ‘font’ shorthand property; instead, use the individual property.


Other options considered (for historical purposes)

  1. Extract minimal opentype.js or typr.js, maintain split rendering, update the current API according to tickets
  2. Use some other 3rd party option for glyph paths (see below)
  3. Write our own font parser

Some of the tradeoffs here, and more info here

List of external font-parsing libs:

@dhowe dhowe self-assigned this Sep 16, 2024
@dhowe dhowe changed the title Possible paths for typography (as part of p5-2.0) Possible paths for typography (as part of p5.js 2.0) Sep 16, 2024
@dhowe dhowe changed the title Possible paths for typography (as part of p5.js 2.0) Possible paths for typography module revamp (as part of p5.js 2.0) Sep 16, 2024
@Qianqianye Qianqianye moved this to Implementation in p5.js 2.0 Sep 17, 2024
@dhowe dhowe changed the title Possible paths for typography module revamp (as part of p5.js 2.0) Typography module revamp Oct 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Implementation
Development

No branches or pull requests

2 participants