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

Add a lang IDL Attribute to CanvasTextDrawingStyles, and clarify "direction" on same #10873

Merged
merged 24 commits into from
Mar 4, 2025
Merged
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
eba506c
Add the lang IDL attribute to CanvasTextDrawingStyles
schenney-chromium Dec 18, 2024
caa22ca
Merge branch 'whatwg:main' into main
schenney-chromium Dec 18, 2024
488b95b
Fix Developer info
schenney-chromium Dec 18, 2024
01e6185
Merge branch 'whatwg:main' into main
schenney-chromium Jan 10, 2025
b6df5ee
Merge branch 'whatwg:main' into main
schenney-chromium Jan 22, 2025
1b5a1df
Post review revisions
schenney-chromium Jan 22, 2025
152e3a4
Clean up offscreen snapshot behavior
schenney-chromium Jan 23, 2025
60a5971
Fix the setter/getter for lang.
schenney-chromium Jan 23, 2025
720ff90
Next round of edits.
schenney-chromium Jan 23, 2025
c131fd6
Merge branch 'whatwg:main' into main
schenney-chromium Feb 3, 2025
119a4c5
Update the offscreen transfer steps, and clarify lang rules.
schenney-chromium Feb 3, 2025
25efd43
Text cleanup
schenney-chromium Feb 4, 2025
369688c
Post-review update
schenney-chromium Feb 5, 2025
7e5c880
Update link to content language
schenney-chromium Feb 5, 2025
37d7233
Minor cleanup
schenney-chromium Feb 14, 2025
e999e9e
Merge branch 'whatwg:main' into main
schenney-chromium Feb 21, 2025
f129f9b
Next iteration
schenney-chromium Feb 22, 2025
bf760d7
Update with latest review fixes.
schenney-chromium Feb 24, 2025
12d6c1f
Extract OffscreenCanvas constructor steps.
schenney-chromium Feb 25, 2025
779363e
Next round of edits.
schenney-chromium Feb 26, 2025
cdd56da
Fix annotaton of direction inherit.
schenney-chromium Feb 26, 2025
2e79feb
More formatting cleanup and text improvements.
schenney-chromium Feb 26, 2025
c19feba
More cleanup.
schenney-chromium Feb 27, 2025
ef5c3bd
Final edit.
schenney-chromium Feb 27, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
209 changes: 165 additions & 44 deletions source
Original file line number Diff line number Diff line change
Expand Up @@ -3956,6 +3956,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<p>The following features are defined in <cite>CSS Text</cite>: <ref>CSSTEXT</ref></p>

<ul class="brief">
<li>The <dfn data-x-href="https://drafts.csswg.org/css-text-4/#content-language">content language</dfn> concept</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-text/#text-transform-property">'text-transform'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-text/#white-space-property">'white-space'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-text/#text-align-property">'text-align'</dfn> property</li>
Expand Down Expand Up @@ -13608,7 +13609,7 @@ Transport Protocol">HTTP&lt;/abbr> today.&lt;/p></code></pre> <!-- DO NOT REWRAP
Belarusian).</p>

<p>If the resulting value is the empty string, then it must be interpreted as meaning that the
language of the node is explicitly unknown.</p>
language of the node is <dfn data-x="concept-explicitly-unknown">explicitly unknown</dfn>.</p>

<hr>

Expand Down Expand Up @@ -65680,13 +65681,21 @@ callback <dfn callback>BlobCallback</dfn> = undefined (<span>Blob</span>? blob);
and <code data-x="attr-canvas-height">height</code> content attributes of this
<code>canvas</code> element.</p></li>

<li><p>Set the <span data-x="offscreencanvas-placeholder">placeholder <code>canvas</code>
element</span> of <var>offscreenCanvas</var> to a weak reference to this <code>canvas</code>
element.</p></li>
<li><p>Set the <var>offscreenCanvas</var>'s <span
data-x="offscreencanvas-placeholder">placeholder <code>canvas</code> element</span>
to a weak reference to this <code>canvas</code> element.</p></li>

<li><p>Set this <code>canvas</code> element's <span data-x="concept-canvas-context-mode">context
mode</span> to <span data-x="concept-canvas-placeholder">placeholder</span>.</p></li>

<li><p>Set the <var>offscreenCanvas</var>'s <span
data-x="offscreencanvas-inherited-lang">inherited language</span> to the
<span>language</span> of this <code>canvas</code> element.</p></li>

<li><p>Set the <var>offscreenCanvas</var>'s <span
data-x="offscreencanvas-inherited-direction">inherited direction</span> to the <span
data-x="the directionality">directionality</span> of this <code>canvas</code> element.</p></li>

<li><p>Return <var>offscreenCanvas</var>.</p></li>
</ol>

Expand Down Expand Up @@ -65900,6 +65909,7 @@ interface mixin <dfn interface>CanvasPathDrawingStyles</dfn> {

interface mixin <dfn interface>CanvasTextDrawingStyles</dfn> {
// text
attribute DOMString <span data-x="dom-context-2d-lang">lang</span>; // (default: "inherit")
attribute DOMString <span data-x="dom-context-2d-font">font</span>; // (default 10px sans-serif)
attribute <span>CanvasTextAlign</span> <span data-x="dom-context-2d-textAlign">textAlign</span>; // (default: "start")
attribute <span>CanvasTextBaseline</span> <span data-x="dom-context-2d-textBaseline">textBaseline</span>; // (default: "alphabetic")
Expand Down Expand Up @@ -66406,6 +66416,7 @@ context.fillRect(100,0,50,50); // only this square remains</code></pre>
data-x="dom-context-2d-shadowOffsetX">shadowOffsetX</code>, <code
data-x="dom-context-2d-shadowOffsetY">shadowOffsetY</code>, <code
data-x="dom-context-2d-shadowBlur">shadowBlur</code>, <code
data-x="dom-context-2d-lang">lang</code>, <code
data-x="dom-context-2d-font">font</code>, <code
data-x="dom-context-2d-textAlign">textAlign</code>, <code
data-x="dom-context-2d-textBaseline">textBaseline</code>, <code
Expand Down Expand Up @@ -66897,13 +66908,28 @@ transform. ack Shaun Morris. -->
<h6>Text styles</h6>

<dl class="domintro">
<dt><code data-x=""><var>context</var>.<span subdfn data-x="dom-context-2d-lang">lang</span> [ = <var>value</var> ]</code></dt>
<dt><code data-x=""><var>styles</var>.<span data-x="dom-context-2d-lang">lang</span> [ = <var>value</var> ]</code></dt>
<dd>
<p>Returns the current language setting.</p>

<p>Can be set to a BCP 47 language tag, the empty string, or "<code
data-x="dom-context-2d-lang-inherit">inherit</code>", to change the language used when
resolving fonts. "<code data-x="dom-context-2d-lang-inherit">inherit</code>" takes the language
from the <code>canvas</code> element's language, or the associated <span>document
element</span> when there is no <code>canvas</code> element.</p>

<p>The default is "<code data-x="dom-context-2d-lang-inherit">inherit</code>".</p>
</dd>

<dt><code data-x=""><var>context</var>.<span subdfn data-x="dom-context-2d-font">font</span> [ = <var>value</var> ]</code></dt>
<dt><code data-x=""><var>styles</var>.<span data-x="dom-context-2d-font">font</span> [ = <var>value</var> ]</code></dt>
<dd>
<p>Returns the current font settings.</p>

<p>Can be set, to change the font. The syntax is the same as for the CSS <span>'font'</span>
property; values that cannot be parsed as CSS font values are ignored.</p>
property; values that cannot be parsed as CSS font values are ignored. The default is "10px
sans-serif".</p>

<p>Relative keywords and lengths are computed relative to the font of the <code>canvas</code>
element.</p>
Expand Down Expand Up @@ -67140,6 +67166,22 @@ worker.postMessage(offscreenCanvas, [offscreenCanvas]);</code></pre>
data-x="dom-context-2d-textBaseline">textBaseline</code> attribute must initially have the value
<code data-x="dom-context-2d-textBaseline-alphabetic">alphabetic</code>.</p>

<p>Objects that implement the <code>CanvasTextDrawingStyles</code> interface have an associated
<dfn data-x="concept-CanvasTextDrawingStyles-language">language</dfn> value used to localize font
rendering. Valid values are a BCP 47 language tag, the empty string, or "<dfn
data-x="dom-context-2d-lang-inherit">inherit</dfn>" where the language comes from the
<code>canvas</code> element's language, or the associated <span>document element</span> when there
is no <code>canvas</code> element. Initially, the <span
data-x="concept-CanvasTextDrawingStyles-language">language</span> must be "<code
data-x="dom-context-2d-lang-inherit">inherit</code>".</p>

<p>The <dfn attribute for="CanvasTextDrawingStyles" data-x="dom-context-2d-lang"><code
data-x="dom-context-2d-lang">lang</code></dfn> getter steps are to return
<span>this</span>'s <span data-x="concept-CanvasTextDrawingStyles-language">language</span>.</p>

<p>The <code data-x="dom-context-2d-lang">lang</code> setter steps are to set <span>this</span>'s
<span data-x="concept-CanvasTextDrawingStyles-language">language</span> to the given value.</p>

<p>The <dfn attribute for="CanvasTextDrawingStyles"><code
data-x="dom-context-2d-direction">direction</code></dfn> IDL attribute, on getting, must return
the current value. On setting, the current value must be changed to the new value. When the object
Expand Down Expand Up @@ -67281,16 +67323,12 @@ worker.postMessage(offscreenCanvas, [offscreenCanvas]);</code></pre>

<dd><p>Treat input to the <span>text preparation algorithm</span> as right-to-left text.</p></dd>

<!--
<dt><dfn><code data-x="dom-context-2d-direction-auto">auto</code></dfn>

<dd><p>Determine the direction from the input to the <span>text preparation algorithm</span>.</p></dd>
-->

<dt><dfn enum-value for="CanvasDirection"><code data-x="dom-context-2d-direction-inherit">inherit</code></dfn>

<dd><p>Default to the directionality of the <code>canvas</code> element or <code>Document</code>
as appropriate.</p></dd>
<dd><p>Use the process in the <span>text preparation algorithm</span> to obtain the text
direction from the <code>canvas</code> element, <span
data-x="offscreencanvas-placeholder">placeholder <code>canvas</code> element</span>, or
<span>document element</span>.</p></dd>
</dl>

<p>The <code data-x="dom-context-2d-fontKerning">fontKerning</code> attribute's allowed keywords
Expand Down Expand Up @@ -67399,8 +67437,39 @@ worker.postMessage(offscreenCanvas, [offscreenCanvas]);</code></pre>
<li><p>Let <var>font</var> be the current font of <var>target</var>, as given
by that object's <code data-x="dom-context-2d-font">font</code> attribute.</p></li>

<li><p>Let <var>language</var> be the <var>target</var>'s <span
data-x="concept-CanvasTextDrawingStyles-language">language</span>.</p></li>

<li>
<p>If <var>language</var> is "<code data-x="dom-context-2d-lang-inherit">inherit</code>":</p>

<ol>
<li><p>Let <var>sourceObject</var> be <var>object</var>'s <span>font style source
object</span></p></li>

<li><p>If <var>sourceObject</var> is a <code>canvas</code>
element, then set <var>language</var> to the <var>sourceObject</var>'s
<span data-x="language">language</span>.</p></li>

<li>
<p>Otherwise:</p>

<ol>
<li><p>Assert: <var>sourceObject</var> is an <code>OffscreenCanvas</code> object.</p></li>

<li><p>Set <var>language</var> to the <var>sourceObject</var>'s
<span data-x="offscreencanvas-inherited-lang">inherited language</span>.</p></li>
</ol>
</li>
</ol>
</li>

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Newline before this list item.

Copy link
Contributor Author

@schenney-chromium schenney-chromium Feb 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

Regarding tests ...

For direction and lang values, in wpt/html/canvas/element/text and wpt/html/canvas/offscreen/text

  • 2d.text.direction.default.tentative.html
  • 2d.text.direction.invalid.html
  • 2d.text.direction.valid.tentative.html
  • 2d.text.lang.default.tentative.html

For the behavior of direction in DOM canvas, in wpt/html/canvas/element/manual/text:

  • canvas.2d.direction.inherit.canvas.html
  • canvas.2d.direction.inherit.disconnected.canvas.html
  • canvas.2d.direction.inherit.document.html
  • canvas.2d.direction.inherit.dynamic.canvas.html
  • canvas.2d.direction.inherit.style.html

For the behavior of lang in DOM canvas, in wpt/html/canvas/element/manual/text:

  • canvas.2d.lang.dynamic.html
  • canvas.2d.lang.empty.canvas.tentative.html
  • canvas.2d.lang.inherit.canvas.tentative.html
  • canvas.2d.lang.inherit.disconnected.canvas.tentative.html
  • canvas.2d.lang.inherit.document.disconnected.canvas.tentative.html
  • canvas.2d.lang.inherit.document.tentative.html
  • canvas.2d.lang.tentative.html

For the behavior of direction in offscreen canvas and workers, in wpt/html/canvas/offscreen/manual/text:

  • canvas.2d.offscreen.direction.html
  • canvas.2d.offscreen.transferred.direction.inherit.document.html
  • canvas.2d.offscreen.transferred.direction.inherit.html
  • canvas.2d.offscreen.worker.direction.html
  • canvas.2d.offscreen.worker.direction.inherit.html

For the behavior of lang in offscreen canvas and workers, in wpt/html/canvas/offscreen/manual/text:

  • canvas.2d.offscreen.lang.inherit.tentative.html
  • canvas.2d.offscreen.lang.tentative.html
  • canvas.2d.offscreen.transferred.lang.inherit.document.tentative.html
  • canvas.2d.offscreen.transferred.lang.inherit.tentative.html
  • canvas.2d.offscreen.transferred.lang.tentative.html
  • canvas.2d.offscreen.worker.lang.inherit.tentative.html
  • canvas.2d.offscreen.worker.lang.tentative.html

Note I'll remove the "tentative" once this PR lands. There may also be an issue on Mac with the fonts used for distinguishing languages, which I'll also be addressing in a follow up CL.

And I'll be doing the MDN work in the next week or so.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! Normally there's a WPT PR up to rename tentative tests. (The HTML standard PR template also asks for this.)

For MDN all that's required is that you file an issue which you did.

<li><p>If <var>language</var> is the empty string, then set <var>language</var> to
<span data-x="concept-explicitly-unknown">explicitly unknown</span>.</p></li>

<li>
<p>Apply the appropriate step from the following list to determine the value of <var>direction</var>:</p>
<p>Apply the appropriate step from the following list to determine the value of
<var>direction</var>:</p>

<dl class="switch">

Expand All @@ -67414,38 +67483,36 @@ worker.postMessage(offscreenCanvas, [offscreenCanvas]);</code></pre>
data-x="dom-context-2d-direction-rtl">rtl</code>"</dt>
<dd>Let <var>direction</var> be '<span data-x="concept-rtl">rtl</span>'.</dd>

<!--
<dt>If the <var>target</var> object's <code
data-x="dom-context-2d-direction">direction</code> attribute has the value "<code
data-x="dom-context-2d-direction-auto">auto</code>"</dt>
data-x="dom-context-2d-direction-inherit">inherit</code>"</dt>
<dd>
Find the first character in <var>text</var> of bidirectional character type L, AL, or
R, if any. If such a character is found and it is of bidirectional character type AL or R,
then let <var>direction</var> be '<span data-x="concept-rtl">rtl</span>'; otherwise,
let <var>direction</var> be '<span data-x="concept-rtl">rtl</span>'. <ref>BIDI</ref>
</dd>
-->

<dt>If the <var>target</var> object's <span>font style source object</span> is an
element</dt>

<dd>Let <var>direction</var> be <span>the directionality</span> of the <var>target</var> object's <span>font style source object</span>.</dd>

<dt>If the <var>target</var> object's <span>font style source object</span> is a
<code>Document</code> with a non-null <span>document element</span></dt>
<ol>
<li><p>Let <var>sourceObject</var> be <var>object</var>'s <span>font style source
object</span></p></li>

<dd>Let <var>direction</var> be <span>the directionality</span> of the <var>target</var>
object's <span>font style source object</span>'s <span>document element</span>.</dd>
<li><p>If <var>sourceObject</var> is a <code>canvas</code>
element, then let <var>direction</var> be <var>sourceObject</var>'s
<span data-x="the directionality">directionality</span>.</p></li>

<dt>Otherwise</dt>
<li>
<p>Otherwise:</p>
<ol>
<li><p>Assert: <var>sourceObject</var> is an <code>OffscreenCanvas</code> object.</p></li>

<dd>Let <var>direction</var> be '<span data-x="concept-ltr">ltr</span>'.</dd>
<li><p>Let <var>direction</var> be <var>sourceObject</var>'s
<span data-x="offscreencanvas-inherited-direction">inherited direction</span>.</p></li>
</ol>
</li>
</ol>
</dd>
</dl>
</li>

<li>
<p>Form a hypothetical infinitely-wide CSS <span>line box</span> containing a single
<span>inline box</span> containing the text <var>text</var>, with its CSS properties set as
<span>inline box</span> containing the text <var>text</var>, with the CSS
<span>content language</span> set to <var>language</var>, and with its CSS properties set as
follows:</p>

<table>
Expand Down Expand Up @@ -71664,6 +71731,11 @@ interface <dfn interface>OffscreenCanvas</dfn> : <span>EventTarget</span> {
data-x="dom-OffscreenCanvas-height">height</code> attributes of the <code>OffscreenCanvas</code>
object. Initially, all the bitmap's pixels are <span>transparent black</span>.</p>

<p>An <code>OffscreenCanvas</code> object has an internal <dfn
data-x="offscreencanvas-inherited-lang">inherited language</dfn> and <dfn
data-x="offscreencanvas-inherited-direction">inherited direction</dfn> set when
the <code>OffscreenCanvas</code> is created.</p>

<p>An <code>OffscreenCanvas</code> object can have a rendering context bound to it. Initially,
it does not have a bound rendering context. To keep track of whether it has a rendering context
or not, and what kind of rendering context it is, an <code>OffscreenCanvas</code> object also
Expand All @@ -71677,16 +71749,52 @@ interface <dfn interface>OffscreenCanvas</dfn> : <span>EventTarget</span> {
data-x="offscreencanvas-context-detached">detached</dfn> by algorithms defined in this
specification.</p>

<p>The constructor <dfn constructor for="OffscreenCanvas"
data-x="dom-OffscreenCanvas"><code>OffscreenCanvas(<var>width</var>,
<var>height</var>)</code></dfn>, when invoked, must create a new <code>OffscreenCanvas</code>
object with its <span data-x="offscreencanvas-bitmap">bitmap</span> initialized to a rectangular
array of <span>transparent black</span> pixels of the dimensions specified by <var>width</var> and
<var>height</var>; and its <code data-x="dom-OffscreenCanvas-width">width</code> and <code
data-x="dom-OffscreenCanvas-height">height</code> attributes initialized to <var>width</var> and
<var>height</var> respectively.</p>
<p>The <dfn constructor for="OffscreenCanvas"><code data-x="dom-OffscreenCanvas">new OffscreenCanvas(<var>width</var>,
<var>height</var>)</code></dfn> constructor steps are:</p>

<hr>
<ol>
<li><p>Initialize the <span data-x="offscreencanvas-bitmap">bitmap</span> of <span>this</span>
to a rectangular array of <span>transparent black</span> pixels of the dimensions specified
by <var>width</var> and <var>height</var>.</p></li>

<li><p>Initialize the <code data-x="dom-OffscreenCanvas-width">width</code> of <span>this</span>
to <var>width</var>.</p></li>

<li><p>Initialize the <code data-x="dom-OffscreenCanvas-height">height</code> of
<span>this</span> to <var>height</var>.</p></li>

<li><p>Set <span>this</span>'s <span data-x="offscreencanvas-inherited-lang">inherited
language</span> to <span data-x="concept-explicitly-unknown">explicitly unknown</span>.</p></li>

<li><p>Set <span>this</span>'s <span data-x="offscreencanvas-inherited-direction">inherited
direction</span> to "<code data-x="">ltr</code>".</p></li>

<li><p>Let <var>global</var> be the <span>relevant global object</span> of
<span>this</span>.</p></li>

<li>
<p>If <var>global</var> is a <code>Window</code> object:</p>

<ol>
<li><p>Let <var>element</var> be the <span>document element</span> of <var>global</var>'s
<span data-x="concept-document-window">associated <code>Document</code></span>.</p></li>

<li>
<p>If <var>element</var> is not null:</p>

<ol>
<li><p>Set the <span data-x="offscreencanvas-inherited-lang">inherited language</span>
of <span>this</span> to <var>element</var>'s <span
data-x="language">language</span>.</p></li>

<li><p>Set the <span data-x="offscreencanvas-inherited-direction">inherited
direction</span> of <span>this</span> to <var>element</var>'s <span
data-x="the directionality">directionality</span>.</p></li>
</ol>
</li>
</ol>
</li>
</ol>

<p><code>OffscreenCanvas</code> objects are <span data-x="transferable
objects">transferable</span>. Their <span>transfer steps</span>, given <var>value</var> and
Expand All @@ -71703,11 +71811,18 @@ interface <dfn interface>OffscreenCanvas</dfn> : <span>EventTarget</span> {
<li><p>Let <var>width</var> and <var>height</var> be the dimensions of <var>value</var>'s <span
data-x="offscreencanvas-bitmap">bitmap</span>.</p></li>

<li><p>Let <var>language</var> and <var>direction</var> be the values of <var>value</var>'s
<span data-x="offscreencanvas-inherited-lang">inherited language</span> and
<span data-x="offscreencanvas-inherited-direction">inherited direction</span>.</p></li>

<li><p>Unset <var>value</var>'s <span data-x="offscreencanvas-bitmap">bitmap</span>.</p></li>

<li><p>Set <var>dataHolder</var>.[[Width]] to <var>width</var> and
<var>dataHolder</var>.[[Height]] to <var>height</var>.</p></li>

<li><p>Set <var>dataHolder</var>.[[Language]] to <var>language</var> and
<var>dataHolder</var>.[[Direction]] to <var>direction</var>.</p></li>

<li><p>Set <var>dataHolder</var>.[[PlaceholderCanvas]] to be a weak reference to
<var>value</var>'s <span data-x="offscreencanvas-placeholder">placeholder <code>canvas</code>
element</span>, if <var>value</var> has one, or null if it does not.</p></li>
Expand All @@ -71721,6 +71836,11 @@ interface <dfn interface>OffscreenCanvas</dfn> : <span>EventTarget</span> {
rectangular array of <span>transparent black</span> pixels with width given by
<var>dataHolder</var>.[[Width]] and height given by <var>dataHolder</var>.[[Height]].</p></li>

<li><p>Set <var>value</var>'s <span data-x="offscreencanvas-inherited-lang">inherited
language</span> to <var>dataHolder</var>.[[Language]] and <span
data-x="offscreencanvas-inherited-direction">inherited direction</span> to
<var>dataHolder</var>.[[Direction]].</p></li>

<li><p>If <var>dataHolder</var>.[[PlaceholderCanvas]] is not null, set <var>value</var>'s <span
data-x="offscreencanvas-placeholder">placeholder <code>canvas</code> element</span> to
<var>dataHolder</var>.[[PlaceholderCanvas]] (while maintaining the weak reference
Expand Down Expand Up @@ -147514,6 +147634,7 @@ INSERT INTERFACES HERE
Ştefan Vargyas,
Stefan Weiss,
Steffen Meschkat,
Stephen Chenney,
Stephen Ma,
Stephen Stewart,
Stephen White,
Expand Down