diff --git a/source b/source index 13ac7862d0c..6df562c7808 100644 --- a/source +++ b/source @@ -4165,6 +4165,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute x and y members
  • Matrix multiplication
    • +
  • DOMRectReadOnly

    • The following terms are defined in the CSS Scoping: CSSSCOPING

    @@ -65501,10 +65502,20 @@ interface mixin CanvasUserInterface { undefined drawFocusIfNeeded(Path2D path, Element element); }; + +dictionary TextClusterOptions { + CanvasTextAlign align; + CanvasTextBaseline baseline; + double x; + double y; +}; + interface mixin CanvasText { // text (see also the CanvasPathDrawingStyles and CanvasTextDrawingStyles interfaces) undefined fillText(DOMString text, unrestricted double x, unrestricted double y, optional unrestricted double maxWidth); undefined strokeText(DOMString text, unrestricted double x, unrestricted double y, optional unrestricted double maxWidth); + undefined fillTextCluster(TextCluster cluster, double x, double y, optional TextClusterOptions options = {}); + undefined strokeTextCluster(TextCluster cluster, double x, double y, optional TextClusterOptions options = {}); TextMetrics measureText(DOMString text); }; @@ -65604,6 +65615,23 @@ interface TextMetrics { readonly attribute double hangingBaseline; readonly attribute double alphabeticBaseline; readonly attribute double ideographicBaseline; + + sequence<DOMRectReadOnly> getSelectionRects(unsigned long start, unsigned long end); + DOMRectReadOnly getActualBoundingBox(unsigned long start, unsigned long end); + unsigned long getIndexFromOffset(double offset); + sequence<TextCluster> getTextClusters(optional TextClusterOptions options = {}); + sequence<TextCluster> getTextClusters(unsigned long start, unsigned long end, optional TextClusterOptions options = {}); +}; + +[Exposed=(Window,Worker)] +interface TextCluster { + // opaque object + readonly attribute double x; + readonly attribute double y; + readonly attribute unsigned long start; + readonly attribute unsigned long end; + readonly attribute CanvasTextAlign align; + readonly attribute CanvasTextBaseline baseline; }; dictionary ImageDataSettings { @@ -69122,6 +69150,16 @@ try { provided, the text will be scaled to fit that width if necessary.

    +
    context.fillTextCluster(cluster, x, y [, options ])
    +
    context.strokeTextCluster(cluster, x, y [, options ])
    + +
    +

    Fills or strokes (respectively) the given text cluster as it would be positioned if the text + as a whole was rendered at the given position. The align and baseline used to render, as well as + the position of the cluster in relation to the anchor point of the while text, can be modified + with the options dictionary.

    +
    +
    metrics = context.measureText(text)
    @@ -69143,6 +69181,28 @@ try {
    metrics.ideographicBaseline

    Returns the measurement described below.

    + +
    metrics.getSelectionRects(start, end)
    + +

    Returns a list of DOMRectReadOnly objects corresponding to the selection + rectangles for the given range in the string.

    + +
    metrics.getActualBoundingBox(start, end)
    + +

    Returns a DOMRectReadOnly that corresponds to the bounding rectangle for the + given range in the string.

    + +
    metrics.getIndexFromOffset(offset)
    + +

    Returns the index for the character at the given offset from the start of the text.

    + +
    metrics.getTextClusters([ options ])
    +
    metrics.getTextClusters(start, end [, options ])
    + +

    Return a list of TextCluster objects, with positional data for each one. + They correspond to splitting the text into the minimal rendering units possible. The options + dictionary enables selecting a specific point to be returned for each cluster be specifying align + and baseline values.

    @@ -69196,6 +69256,91 @@ try { +

    A canvas fill-stroke mode is an enum that describes whether the rendered text will + be filled or stroked:

    + +
    +
    fill
    +

    The shapes are filled using this's fill style.

    + +
    stroke
    +

    The shapes are traced using this's stroke style.

    +
    + +

    The fillTextCluster(cluster, x, + y, options) method steps are to call the cluster + rendering algorithm, passing it cluster, x, y, + options, and the fill canvas + fill-stroke mode enum.

    + +

    The strokeTextCluster(cluster, x, + y, options) method steps are to call the cluster + rendering algorithm, passing it cluster, x, y, + options, and the stroke canvas + fill-stroke mode enum.

    + +

    The cluster rendering algorithm is as follows. It takes as input a + TextCluster cluster, a double x, a double y, a + TextClusterOptions options, and a canvas fill-stroke mode + mode.

    + +
      +

    1. If the x or the y arguments are infinite or NaN, then return.

      +
      2. + +

    2. Run the text preparation algorithm, passing it the complete text and the + CanvasTextDrawingStyles from the opaque TextCluster + cluster. Let glyphs be the result.

      3. + +

    3. Filter glyphs to include only the glyphs that correspond to code points within the range cluster["start"] to cluster["end"].

      4. + +

    4. Move all the shapes in glyphs to the right by x + CSS pixels and down by y CSS + pixels.

      5. + +
    5. +

      If options["x"] exists, move all the shapes in glyphs to the right by + options["x"] − + cluster["x"].

      + +

      If options["y"] exists, move all the shapes in glyphs to the right by + options["y"] − + cluster["y"].

      +
      6. + +

    6. If mode is fill, let + shapes be the result of applying this's fill style to the shapes given in + glyphs.

      7. + +

    7. Otherwise, if mode is stroke, let shapes be the result of + applying this's stroke style to the result of tracing the shapes given in glyphs using the object + implementing the CanvasText interface for the line styles.

      8. + +

    8. Paint shapes without affecting the current path, and subject to shadow effects, global + alpha, the clipping region, and the current compositing and blending + operator.

      9. +
    + +

    By setting options["x"] + and options["y"] to 0, the cluster will + be rendered exactly at the position (x,y) passed to fillTextCluster() and strokeTextCluster().

    +

    The ideographic-under baseline. (Zero if the given baseline is the ideographic-under baseline.)

    + +
    The getSelectionRects(start, end) method steps are:
    + +
    +
      +

    1. If either start or end are less than 0, start is + greater or equal than the number of code points in the + measured text, or end is greater than the number of code points in the measured text, then throw an + "IndexSizeError" DOMException.

      2. + +

    2. Let element be inline box returned by the + text preparation algorithm when measureText() was called.

      3. + +

    3. Let rects be a list of DOMRectReadOnly objects.

      4. + +

    4. Fill rects with the selection rectangles the user agent would render if the + selection was set to a range in + element, with the first included code point at the startth + position (in logical order) and the last included code point at the (end-1)th + position.

      5. + +

    5. Return rects.

      6. +
    +
    + +
    The getActualBoundingBox(start, end) method steps are:
    + +
    +
      +

    1. If either start or end are less than 0, start is + greater or equal than the number of code points in the + measured text, or end is greater than the number of code points in the measured text, then throw an + "IndexSizeError" DOMException.

      2. + +

    2. Let glyphs be the result of the + text preparation algorithm when measureText() was called.

      3. + +

    3. Filter glyphs to include only the glyphs that correspond to code points within the range that includes the start + index but stops before the end index.

      4. + +

    4. Return a DOMRectReadOnly representing the bounding box of + glyphs.

      5. +
    + +

    The bounding box can be (and usually is) different from the selection + rectangles, which are based on the advance of the text. A font that is particularly slanted or + with accents that go beyond the flow of text will have a different paint bounding box.

    +
    + +
    The getIndexFromOffset(offset) method steps are:
    + +
    +
      +

    1. Let glyphs be the result of the + text preparation algorithm when measureText() was called.

      2. + +

    2. Let index be the character offset with the x position closest to + offset in glyphs.

      3. + +

    3. Return index.

      4. +
    + +

    Negative values for offset are valid. Values to the left + or right of the text bounds will return 0 or the length of the text, depending on the writing + direction.

    +
    + +
    The getTextClusters(options) method steps are:
    + +
    +
      +

    1. Let start be 0.

      2. + +

    2. Let end be the number of code points in the + measured text.

      3. + +

    3. Return getTextClusters(start, end, options).

      4. +
    +
    + +
    The getTextClusters(start, end, options) method steps are:
    + +
    +
      +

    1. If either start or end are less than 0, start is + greater or equal than the number of code points in the + measured text, or end is greater than the number of code points in the measured text, then throw an + "IndexSizeError" DOMException.

      2. + +

    2. Let glyphs be the result of the + text preparation algorithm when measureText() was called.

      3. + +

    3. Filter glyphs to include only the glyphs that correspond to code points within the range that includes the start + index but stops before the end index.

      4. + +
    4. +

      Split the given range of the text into clusters. Each cluster represents a minimal group + of characters such that their corresponding glyphs cannot be broken down any further, and each + character in the range is part of only one cluster. If a cluster is only partially contained by + the given character range, it should still be included.

      + +

      Return these clusters as a list of new TextCluster objects. These objects are + opaque as they encapsulate the complete text that was segmented, along with the + CanvasTextDrawingStyles values that were active at the time measureText() was called. Note that textAlign and textBaseline are exceptions, as they are + explicitly set attributes and are handled separately. Each TextCluster object has + members behaving as described in the following list:

      + +
      +
      x attribute
      + +
      +

      The x coordinate of the cluster, on a coordinate space using CSS pixels, with its origin at the anchor point defined by the textAlign attribute (at the time measureText() was called) in relation to the text + as a whole.

      + +

      The x position specified for each cluster corresponds to the alignment point given by the + align attribute of the cluster (e.g. if + this attribute is set to "left", the calculated position corresponds + to the left of each cluster). The + selection criteria for this alignment point is explained in the section for this attribute + of the cluster.

      +
      + +
      y attribute
      + +
      +

      The y coordinate of the cluster, on a coordinate space using CSS pixels, with its origin at the anchor point defined by the textBaseline attribute (at the time measureText() was called) in relation to the text + as a whole.

      + +

      The y position specified for each cluster corresponds to the alignment point given by the + baseline attribute of the cluster (e.g. if + this attribute is set to "top", the calculated position corresponds + to the top of each cluster). The + selection criteria for this alignment point is explained in the section for this attribute + of the cluster.

      +
      + +
      start attribute
      + +

      The starting index for the range of code points that are + rendered as this cluster.

      + +
      end attribute
      + +

      The index immediately after the last included index for the range of code points that are rendered as this cluster.

      + +
      align attribute
      + +

      The align for the specific point returned for the cluster. Let it be + options["align"] if it exists; otherwise, the textAlign attribute. Note that this doesn't change + the origin of the coordinate system, just which point is specified for each cluster.

      + +
      baseline attribute
      + +

      The baseline for the specific point returned for the cluster. Let it be + options["baseline"] if it + exists; otherwise, the textBaseline attribute. Note that this doesn't + change the origin of the coordinate system, just which point is specified for each cluster. +

      +
      +
      5. +
    +

    Glyphs rendered using fillText() and @@ -146080,6 +146409,7 @@ INSERT INTERFACES HERE Andreas Kling, Andrei Popescu, Andres Gomez, + Andrés Ricardo Pérez Rojas, Andres Rios, Andreu Botella, Andrew Barfield,