@breakside/jskit 2022.22.2 → 2022.24.0

package/Root/Frameworks/UIKit/UIHTMLTextTypesetter.js

@@ -15,37 +15,34 @@
 
 // #import Foundation
 // #import "UIHTMLTextLine.js"
-// #import "UIHTMLTextRun.js"
-// #import "UITextAttachmentView.js"
-// jshint browser: true
 'use strict';
 
 (function(){
 
 var logger = JSLog("uikit", "text");
-
-var sharedDomRange = null;
-var layoutElementStack = [];
-var layoutElementIndex = 0;
+var sharedCanvas = null;
 
 JSClass("UIHTMLTextTypesetter", JSTextTypesetter, {
 
     domDocument: JSReadOnlyProperty('_domDocument'),
-    _cachedLayout: null,
-    _suggestionCache: null,
-    _htmlDisplayServer: null,
 
-    initWithDocument: function(domDocument, htmlDisplayServer){
+    initWithDocument: function(domDocument){
         UIHTMLTextTypesetter.$super.init.call(this);
         this._domDocument = domDocument;
-        this._htmlDisplayServer = htmlDisplayServer;
-        if (sharedDomRange === null){
-            sharedDomRange = this._domDocument.createRange();
+        if (sharedCanvas === null){
+            sharedCanvas = this._domDocument.createElement("canvas");
         }
-        this._lineElementQueue = [];
+        this.canvasContext = sharedCanvas.getContext("2d");
         this._runElementQueue = [];
+        this._lineElementQueue = [];
     },
 
+    _suggestedHTMLLineLayout: null,
+
+    canvasContext: null,
+
+    // MARK: - Element queue
+
     _lineElementQueue: null,
     _runElementQueue: null,
 
@@ -71,208 +68,6 @@ JSClass("UIHTMLTextTypesetter", JSTextTypesetter, {
         return null;
     },
 
-    layoutRange: function(range, size, lineBreakMode){
-        if (size.width <= 0 || size.height <= 0){
-            size = JSSize(size.width <= 0 ? Number.MAX_VALUE : size.width, size.height <= 0 ? Number.MAX_VALUE : size.height);
-        }
-        // Because Javascript only has a single thread, two typesetter instances
-        // generally won't overlap, and we can save some energy by reusing the same
-        // dom element to do the layout for every typesetter.
-        // However, there is a case where layout happens recursively:
-        // when an attachment view in one typesetter needs to typeset a string of its own.
-        // (attachment views need to layout immediately so their size is known).
-        // Therefore, we need a stack of layout elements rather than a single shared element.
-        // FIXME: Allow removal of element after it is no longer needed
-        var layoutElement;
-        if (layoutElementIndex < layoutElementStack.length){
-            layoutElement = layoutElementStack[layoutElementIndex];
-        }else{
-            layoutElement = this._domDocument.createElement('div');
-            layoutElement.setAttribute("role", "none presentation");
-            layoutElement.setAttribute("aria-hidden", "true");
-            layoutElement.style.position = 'absolute';
-            layoutElement.style.right = '0';
-            layoutElement.style.right = '0';
-            layoutElement.style.backgroundColor = 'rgb(255,240,240)';
-            layoutElement.style.lineHeight = '0';
-            // Browsers are a bit particular here:
-            // - We want to use caretRangeFromPoint if available, because it's
-            //   super fast at finding line breaks
-            // - Most browsers can't use caretRangeFromPoint for elements offscreen,
-            //   so we need an invisible element onscreen
-            // - display=none is out because browsers don't even bother rendering those elements
-            // - visibility=hidden works for some, but Chrome will return a caretRangeFromPoint of 0,0
-            // - opacity=0 seems to work best across all browsers 
-            // layoutElement.style.visibility = 'hidden';
-            layoutElement.style.opacity = '0';
-            this._domDocument.body.appendChild(layoutElement);
-            layoutElementStack.push(layoutElement);
-        }
-        ++layoutElementIndex;
-        this._styleElement(layoutElement, size, lineBreakMode);
-        this._updateElement(layoutElement, size, range);
-        this._cachedLayout.lineBreakMode = lineBreakMode;
-        --layoutElementIndex;
-    },
-
-    _styleElement: function(element, size, lineBreakMode){
-        if (size.width < Number.MAX_VALUE){
-            element.style.width = '%dpx'.sprintf(size.width);
-            element.style.whiteSpace = 'pre-wrap';
-        }else{
-            element.style.width = '';
-            element.style.whiteSpace = 'pre';
-        }
-        if (lineBreakMode === null){
-            element.style.whiteSpace = 'nowrap';
-            element.style.wordBreak = '';
-            element.style.overflowWrap = '';
-        }else{
-            switch (lineBreakMode){
-                case JSLineBreakMode.truncateTail:
-                case JSLineBreakMode.characterWrap:
-                    element.style.wordBreak = 'break-all';
-                    element.style.overflowWrap = '';
-                    break;
-                case JSLineBreakMode.wordWrap:
-                    element.style.wordBreak = '';
-                    element.style.overflowWrap = 'break-word';
-                    break;
-            }
-        }
-    },
-
-    _updateElement: function(element, size, range){
-        var remainingRange = JSRange(range);
-        var runIterator = this.attributedString.runIterator(range.location);
-        var i = 0;
-        var span;
-        var runDescriptors = [];
-        var runDescriptor;
-        var attachment;
-        var attachments = [];
-        var previousAttachmentsByID = {};
-        var superview;
-        if (this._cachedLayout !== null){
-            for (i = 0; i < this._cachedLayout.attachments.length; ++i){
-                previousAttachmentsByID[this._cachedLayout.attachments[i].objectID] = this._cachedLayout.attachments[i];
-            }
-        }
-        i = 0;
-        while (remainingRange.length > 0){
-            var utf16 = this._attributedString.string.substringInRange(runIterator.range.intersection(remainingRange));
-            if (runIterator.attributes[JSAttributedString.Attribute.maskCharacter]){
-                utf16 = utf16.stringByMaskingWithCharacter(runIterator.attributes[JSAttributedString.Attribute.maskCharacter]);
-            }
-            if (runIterator.range.length === 1 && utf16 == JSAttributedString.SpecialCharacter.attachmentUTF16){
-                attachment = runIterator.attributes[JSAttributedString.Attribute.attachment];
-                utf16 = '';
-            }else{
-                attachment = null;
-            }
-            if (i < element.childNodes.length){
-                span = element.childNodes[i];
-                span.firstChild.nodeValue = utf16;
-            }else{
-                span = element.appendChild(element.ownerDocument.createElement('span'));
-                span.setAttribute("role", "none presentation");
-                span.appendChild(span.ownerDocument.createTextNode(utf16));
-            }
-            if (attachment !== null){
-                this._htmlDisplayServer.attachmentInserted(attachment);
-                if (attachment.objectID in previousAttachmentsByID){
-                    delete previousAttachmentsByID[attachment.objectID];
-                }
-                attachments.push(attachment);
-                attachment.layout(JSTextTypesetter.FontFromAttributes(runIterator.attributes), size.width);
-            }
-            runDescriptor = UIHTMLTextTypesetterRunDescriptor(span, runIterator.attributes, runIterator.range.intersection(remainingRange), attachment);
-            runDescriptors.push(runDescriptor);
-            remainingRange.advance(runIterator.range.length);
-            runIterator.increment();
-            ++i;
-        }
-        for (var j = element.childNodes.length - 1; j >= i; --j){
-            element.removeChild(element.childNodes[j]);
-        }
-        for (var id in previousAttachmentsByID){
-            this._htmlDisplayServer.attachmentRemoved(previousAttachmentsByID[id]);
-        }
-        this._cachedLayout = {
-            runDescriptors: runDescriptors,
-            range: JSRange(range),
-            attachments: attachments
-        };
-        this._suggestionCache = null;
-    },
-
-    createLine: function(range){
-        if (range.length === 0){
-            return this._createEmptyLine(range);
-        }
-        var fragments = null;
-        var i, l;
-        if (this._suggestionCache !== null){
-            fragments = this._suggestionCache.fragments;
-        }
-        if (fragments === null || fragments[0].range.location != range.location || fragments[fragments.length - 1].range.end != range.end){
-            logger.warn("Calling createLine without matching suggestion, re-calculating layout");
-            this.layoutRange(range, JSSize.Zero, JSLineBreakMode.wordWrap);
-            var runDescriptors = this._cachedLayout.runDescriptors;
-            fragments = [];
-            for (i = 0, l = runDescriptors.length; i < l; ++i){
-                fragments.push(UIHTMLTextTypesetterRunDescriptorFragment(runDescriptors[i], runDescriptors[i].range));
-            }
-        }
-        var element = this._createLineElement();
-        var fragment;
-        var runs = [];
-        var attachments = [];
-        var run;
-        var overflowed = false;
-        for (i = 0, l = fragments.length; i < l; ++i){
-            fragment = fragments[i];
-            var span = this._createRunElement();
-            span.setAttribute("style", fragment.runDescriptor.span.getAttribute("style"));
-            // var span = fragment.runDescriptor.span.cloneNode(false);
-            if (!fragment.runDescriptor.attachment){
-                var utf16 = this.attributedString.string.substringInRange(fragment.range);
-                if (fragment.runDescriptor.attributes[JSAttributedString.Attribute.maskCharacter]){
-                    utf16 = utf16.stringByMaskingWithCharacter(fragment.runDescriptor.attributes[JSAttributedString.Attribute.maskCharacter]);
-                }
-                if (span.childNodes.length > 0){
-                    span.childNodes[0].nodeValue = utf16;
-                }else{
-                    span.appendChild(span.ownerDocument.createTextNode(utf16));
-                }
-            }else{
-                if (span.childNodes.length > 0){
-                    span.removeChild(span.childNodes[0]);
-                }
-            }
-            run = UIHTMLTextRun.initWithElement(span, fragment.runDescriptor.font, fragment.runDescriptor.attributes, fragment.range);
-            runs.push(run);
-            if (fragment.runDescriptor.attachment){
-                // FIXME:
-                // 1. Want context for attachment to be resuable to minimize dom manipulations, but
-                //    also need a distinct context per text frame that uses this string+attachment
-                attachments.push({
-                    context: this._htmlDisplayServer.contextForAttachment(fragment.runDescriptor.attachment),
-                    attachment: fragment.runDescriptor.attachment,
-                    run: run
-                });
-            }
-            overflowed = fragment.overflowed;
-        }
-
-        // NOTE: Deferring calculation of trailingWhitespaceWidth until all the lines are done and added to
-        // a frame, otherwise unecessary and expensive browser layout operations will be triggered.
-
-        var line = UIHTMLTextLine.initWithElement(element, runs, 0, attachments);
-        line.overflowed = overflowed;
-        return line;
-    },
-
     _runID: 0,
 
     _createRunElement: function(){
@@ -283,7 +78,7 @@ JSClass("UIHTMLTextTypesetter", JSTextTypesetter, {
         span.dataset.typesetterId = ++this._runID;
         return span;
     },
-
+    
     _lineID: 0,
 
     _createLineElement: function(){
@@ -300,294 +95,374 @@ JSClass("UIHTMLTextTypesetter", JSTextTypesetter, {
         return element;
     },
 
-    _createEmptyLine: function(range){
-        var attributes = this._attributedString.attributesAtIndex(range.location);
-        var font = JSTextTypesetter.FontFromAttributes(attributes);
-        var element = this._createLineElement();
-        return UIHTMLTextLine.initWithElementAndFont(element, font, font.displayLineHeight, range.location);
+    // MARK: - Creating a Line
+
+    createLine: function(range){
+        if (range.length === 0){
+            return this._createEmptyHTMLLine(range);
+        }
+        var layout = this._suggestedHTMLLineLayout;
+        if (layout === null || !range.isEqual(layout.range)){
+            layout = this._layoutHTMLLine(Number.MAX_VALUE, range, JSLineBreakMode.characterWrap);
+        }
+        return this._createLineFromHTMLLayout(layout);
     },
 
     suggestLineBreak: function(width, range, lineBreakMode){
         if (range.length === 0){
             return JSRange(range);
         }
-        if (this._cachedLayout === null || !this._cachedLayout.range.containsRange(range)){
-            logger.warn("Calling suggestLineBreak on unprepared range, re-calculating layout");
-            this.layoutRange(range, JSSize(width, 0), lineBreakMode);
-        }else if (this._cachedLayout.lineBreakMode != lineBreakMode){
-            // When truncating a multi-line string, we have to do two layouts:
-            // 1. layout first with word-wrap so we know where the line breaks are
-            // 2. layout the final line again with truncate tail
-            // The result is the same as the condition above, a new layoutRange call, but
-            // in this case we don't want to bother logging a warning since it's an expected
-            // use case
-            this.layoutRange(range, JSSize(width, 0), lineBreakMode);
+        if (width <= 0){
+            width = Number.MAX_VALUE;
         }
+        this._suggestedHTMLLineLayout = this._layoutHTMLLine(width, range, lineBreakMode);
+        return this._suggestedHTMLLineLayout.range;
+    },
 
-        var expectedLocation = this._cachedLayout.runDescriptors[0].range.location;
-        var runIndex = 0;
-        var runLineIndex = 0;
-        if (this._suggestionCache !== null){
-            expectedLocation = this._suggestionCache.fragments[this._suggestionCache.fragments.length - 1].range.end;
-            runIndex = this._suggestionCache.runIndex;
-            runLineIndex = this._suggestionCache.runLineIndex;
-        }
+    // MARK: - Private Helpers for Line Creation
 
-        if (range.location != expectedLocation){
-            logger.warn("Calling suggestLineBreak at unexpected location, re-calculating layout");
-            this.layoutRange(range, JSSize(width, 0), lineBreakMode);
-            runIndex = 0;
-            runLineIndex = 0;
-        }
+    _createEmptyHTMLLine: function(range){
+        var attributes = this._attributedString.attributesAtIndex(range.location);
+        attributes = this.resolveAttributes(attributes);
+        var font = attributes.font || null;
+        var element = this._createLineElement();
+        return UIHTMLTextLine.initWithElementAndFont(element, font, font.displayLineHeight, range.location, this.canvasContext);
+    },
 
-        var runDescriptors = this._cachedLayout.runDescriptors;
+    _createLineFromHTMLLayout: function(layout){
+        var runs = [];
+        var run;
+        var x = 0;
         var runDescriptor;
-        var fragments = [];
-        var fragment;
-        var remainingRange = JSRange(range);
-        var lineRange;
-
-        var stop = false;
-
-        var x = -Number.MAX_VALUE;
-
-        do {
-
-            runDescriptor = runDescriptors[runIndex];
-
-            if (runLineIndex === 0 && runDescriptor.startX < x){
-                // This run starts off positioned to the left of (or equal to) the previous run's start, so
-                // it must be on a new line.  Happens when the previous run's end coincides with a line wrap/break.
-                // Since we've found our break, just stop here
-                stop = true;
-                x = -Number.MAX_VALUE;
-            }else if (runLineIndex < runDescriptor.numberOfLines - 1){
-                // This run has at least one more wrap/break point, so just add up to the next line
-                lineRange = runDescriptor.rangeOfLine(runLineIndex, remainingRange.location);
-                fragment = UIHTMLTextTypesetterRunDescriptorFragment(runDescriptor, remainingRange.intersection(lineRange));
-                runLineIndex++;
-                stop = true;
-                x = -Number.MAX_VALUE;
-                remainingRange.advance(fragment.range.length);
-                fragments.push(fragment);
+        var span;
+        var attachmentRuns = [];
+        for (var i = 0, l = layout.runDescriptors.length; i < l; ++i){
+            runDescriptor = layout.runDescriptors[i];
+            span = this._createRunElement();
+            if (!runDescriptor.attachment){
+                this._styleTextElementWithAttributes(span, runDescriptor.attributes, runDescriptor.font);
+                var utf16 = this.attributedString.string.substringInRange(JSRange(runDescriptor.location, runDescriptor.length));
+                if (runDescriptor.attributes[JSAttributedString.Attribute.maskCharacter] !== undefined){
+                    utf16 = utf16.stringByMaskingWithCharacter(runDescriptor.attributes[JSAttributedString.Attribute.maskCharacter]);
+                }
+                if (span.childNodes.length > 0){
+                    span.childNodes[0].nodeValue = utf16;
+                }else{
+                    span.appendChild(span.ownerDocument.createTextNode(utf16));
+                }
             }else{
-                // We're on the final line of our run, so just add its remainder as a fragment
-                fragment = UIHTMLTextTypesetterRunDescriptorFragment(runDescriptor, remainingRange.intersection(runDescriptor.range));
-                runIndex++;
-                runLineIndex = 0;
-                // adding 1 so there's a little give in the check above
-                // NOTE: the original logic here was to set x = runDescriptor.endX,
-                // under the theory that a run in the same line will have a startX >= the previous run's endX.
-                // This was true most of the time in most browsers, but Firefox had an interesting behavior
-                // when an italicized run was followed by another run.  The endX of the italicized run was
-                // greater than the startX of the following run.  So, using the startX of the previous run
-                // works just as well, provided the text is left justified.
-                x = runDescriptor.startX + 1;
-                remainingRange.advance(fragment.range.length);
-                fragments.push(fragment);
+                this._styleAttachmentElementWithAttributes(span, runDescriptor.attributes, runDescriptor.attachment);
+                if (span.childNodes.length > 0){
+                    span.removeChild(span.childNodes[0]);
+                }
+            }
+            run = UIHTMLTextRun.initWithElement(span, runDescriptor.font, runDescriptor.attributes, JSRange(runDescriptor.location, runDescriptor.length));
+            run.origin.x = x;
+            run.size.width = runDescriptor.width;
+            x += run.size.width;
+            runs.push(run);
+            if (runDescriptor.attachment){
+                attachmentRuns.push(run);
             }
-
-        }while (runIndex < runDescriptors.length && !stop && remainingRange.length > 0);
-
-        if (lineBreakMode == JSLineBreakMode.truncateTail && remainingRange.length > 0){
-            fragment.overflowed = true;
         }
-
-        this._suggestionCache = {
-            fragments: fragments,
-            runIndex: runIndex,
-            runLineIndex: runLineIndex
-        };
-
-        if (fragments.length > 0){
-            return JSRange(fragments[0].range.location, fragments[fragments.length - 1].range.end - fragments[0].range.location);
+        if (runs.length === 0){
+            return this._createEmptyHTMLLine(layout.range);
         }
+        var div = this._createLineElement();
+        return UIHTMLTextLine.initWithElement(div, runs, layout.trailingWhitespaceWidth, attachmentRuns, this.canvasContext);
+    },
 
-        return JSRange(range.location, 0);
-    }
-
-});
-
-var UIHTMLTextTypesetterRunDescriptor = function(span, attributes, range, attachment){
-    if (this === undefined){
-        return new UIHTMLTextTypesetterRunDescriptor(span, attributes, range, attachment);
-    }
-    this.span = span;
-    this.font = JSTextTypesetter.FontFromAttributes(attributes);
-    this.attributes = attributes;
-    this.range = JSRange(range);
-    this.attachment = attachment || null;
-    this.updateStyle();
-};
+    _styleTextElementWithAttributes: function(span, attributes, font){
+        span.style.display = '';
+        span.style.width = '';
+        span.style.height = '';
+        span.style.position = '';
+        span.style.verticalAlign = '';
+        span.style.borderBottomWidth = '100%';
+        // Font
+        span.style.font = font.cssString();
+
+        // Decorations (underline, strike)
+        var decorations = [];
+        if (attributes[JSAttributedString.Attribute.underline]){
+            decorations.push('underline');
+        }
+        if (attributes[JSAttributedString.Attribute.strike]){
+            decorations.push('line-through');
+        }
+        span.style.textDecoration = decorations.join(' ');
+
+        // Colors
+        var textColor = attributes[JSAttributedString.Attribute.textColor];
+        var backgroundColor = attributes[JSAttributedString.Attribute.backgroundColor];
+        span.style.color = textColor ? textColor.cssString() : 'black';
+        span.style.backgroundColor = backgroundColor ? backgroundColor.cssString() : '';
+
+        // Cursor
+        var cursor = attributes[JSAttributedString.Attribute.cursor];
+        if (cursor){
+            var cssCursorStrings = cursor.cssStrings();
+            for (var i = 0, l = cssCursorStrings.length; i < l; ++i){
+                span.style.cursor = cssCursorStrings[i];
+                if (span.style.cursor !== ''){
+                    break;
+                }
+            }  
+            span.style.pointerEvents = 'all';              
+        }else{
+            span.style.cursor = '';
+            span.style.pointerEvents = 'none';
+        }
+    },
 
-UIHTMLTextTypesetterRunDescriptor.prototype = {
-
-    updateStyle: function(){
-        if (this.attachment !== null){
-            this.span.style.display = 'inline-block';
-            this.span.style.position = 'relative';
-            this.span.style.width = '%dpx'.sprintf(this.attachment.size.width);
-            this.span.style.height = '%dpx'.sprintf(this.attachment.size.height);
-            this.span.style.verticalAlign = '%dpx'.sprintf(this.attachment.baselineAdjustment);
-            this.span.style.font = '';
-            this.span.style.textDecoration = '';
-            this.span.style.color = '';
-            this.span.style.backgroundColor = '';
-            this.span.style.pointerEvents = 'all';
-
-            // Cursor
-            var cursor = this.attributes[JSAttributedString.Attribute.cursor];
-            if (cursor){
-                var cssCursorStrings = cursor.cssStrings();
-                for (var i = 0, l = cssCursorStrings.length; i < l; ++i){
-                    this.span.style.cursor = cssCursorStrings[i];
-                    if (this.span.style.cursor !== ''){
-                        break;
-                    }
+    _styleAttachmentElementWithAttributes: function(span, attributes, attachment){
+        span.style.display = 'inline-block';
+        span.style.position = 'relative';
+        span.style.width = '%dpx'.sprintf(attachment.size.width);
+        span.style.height = '%dpx'.sprintf(attachment.size.height);
+        span.style.verticalAlign = '%dpx'.sprintf(-attachment.baselineAdjustment);
+        span.style.font = '';
+        span.style.textDecoration = '';
+        span.style.color = '';
+        span.style.backgroundColor = '';
+        span.style.pointerEvents = 'all';
+        var cursor = attributes[JSAttributedString.Attribute.cursor];
+        if (cursor){
+            var cssCursorStrings = cursor.cssStrings();
+            for (var i = 0, l = cssCursorStrings.length; i < l; ++i){
+                span.style.cursor = cssCursorStrings[i];
+                if (span.style.cursor !== ''){
+                    break;
                 }
-            }else{
-                this.span.style.cursor = '';
             }
         }else{
-            this.span.style.display = '';
-            this.span.style.width = '';
-            this.span.style.height = '';
-            this.span.style.position = '';
-            this.span.style.verticalAlign = '';
-            this.span.style.borderBottomWidth = '100%';
-            // Font
-            var font = JSTextTypesetter.FontFromAttributes(this.attributes);
-            this.span.style.font = font.cssString();
-
-            // Decorations (underline, strike)
-            var decorations = [];
-            if (this.attributes[JSAttributedString.Attribute.underline]){
-                decorations.push('underline');
-            }
-            if (this.attributes[JSAttributedString.Attribute.strike]){
-                decorations.push('line-through');
-            }
-            this.span.style.textDecoration = decorations.join(' ');
-
-            // Colors
-            var textColor = this.attributes[JSAttributedString.Attribute.textColor];
-            var backgroundColor = this.attributes[JSAttributedString.Attribute.backgroundColor];
-            this.span.style.color = textColor ? textColor.cssString() : 'black';
-            this.span.style.backgroundColor = backgroundColor ? backgroundColor.cssString() : '';
-
-            // Cursor
-            var cursor = this.attributes[JSAttributedString.Attribute.cursor];
-            if (cursor){
-                var cssCursorStrings = cursor.cssStrings();
-                for (var i = 0, l = cssCursorStrings.length; i < l; ++i){
-                    this.span.style.cursor = cssCursorStrings[i];
-                    if (this.span.style.cursor !== ''){
-                        break;
-                    }
-                }  
-                this.span.style.pointerEvents = 'all';              
-            }else{
-                this.span.style.cursor = '';
-                this.span.style.pointerEvents = 'none';
-            }
+            span.style.cursor = '';
         }
     },
 
-    rangeOfLine: function(lineIndex, startingLocation){
-        var lineRect = this.clientRects[lineIndex + 1];
-        var doc = this.span.ownerDocument;
-        var y = lineRect.y;
-        var min = startingLocation - this.range.location;
-        var max = this.range.length;
-        var mid;
-        var rects;
-        var i = 0;
-        var textNode = this.span.firstChild;
-        // FIXME: caretRangeFromPoint is really fast, but not supported in IE and 
-        // stops working when the text node is off screen
-        if (doc.caretRangeFromPoint){
-            var range = doc.caretRangeFromPoint(lineRect.x, lineRect.y + lineRect.height / 2);
-            if (range !== null){
-                mid = min = max = range.startOffset;
+    // MARK: - Private Helpers for Line Break Suggestion
+
+    _layoutHTMLLine: function(width, range, lineBreakMode){
+        var remainingRange = JSRange(range);
+        var runDescriptors = [];
+        var i, l;
+        var usedWidth = 0;
+        var newline = false;
+        var runDescriptor = null;
+        var printableRange = UIHTMLTextTypesetterPrintableRange(range.location, 0, 0);
+        var printableRanges = [printableRange];
+        var printable;
+        var preferredFont = null;
+
+        var iterator = this._attributedString.string.userPerceivedCharacterIterator(range.location);
+        var runIterator = this._attributedString.runIterator(range.location);
+        var attachment;
+        var attributes;
+        var metrics;
+        // Create run descriptors that at fill the line, maybe going a bit over
+        do {
+            attributes = this.resolveAttributes(runIterator.attributes);
+            if (runDescriptor === null){
+                runDescriptor = UIHTMLTextTypesetterRunDescriptor(remainingRange.location, attributes);
+                runDescriptors.push(runDescriptor);
+                preferredFont = runDescriptor.font;
+                if (preferredFont !== null){
+                    this.canvasContext.font = preferredFont.cssString();
+                }
             }
-        }
-        while (min < max){
-            mid = Math.floor(min + (max - min) / 2);
-            sharedDomRange.setStart(textNode, mid);
-            sharedDomRange.setEnd(textNode, mid + 1);
-            rects = sharedDomRange.getClientRects();
-            if (rects.length == 1 || rects[0].y == rects[1].y){
-                if (rects[0].y < y){
-                    min = mid + 1;
+            newline = iterator.isMandatoryLineBreak;
+            printable = !newline && !iterator.isWhiteSpace;
+            attachment = runIterator.attachment;
+            if (attachment !== null){
+                attachment.layout(preferredFont, width);
+                usedWidth += attachment.size.width;
+                runDescriptor.userPerceivedCharacterWidths.push(attachment.size.width);
+                runDescriptor.userPerceivedCharacterLengths.push(1);
+                runDescriptor.attachment = attachment;
+            }else{
+                if (!newline){
+                    if (attributes[JSAttributedString.Attribute.maskCharacter] !== undefined){
+                        metrics = this.canvasContext.measureText(attributes[JSAttributedString.Attribute.maskCharacter]);
+                    }else{
+                        metrics = this.canvasContext.measureText(iterator.utf16);
+                    }
+                    usedWidth += metrics.width;
+                    runDescriptor.userPerceivedCharacterWidths.push(metrics.width);
+                    runDescriptor.userPerceivedCharacterLengths.push(iterator.range.length);
+                }
+            }
+            runDescriptor.length += iterator.range.length;
+            remainingRange.advance(iterator.range.length);
+            if (printable){
+                if (printableRange === null){
+                    printableRange = UIHTMLTextTypesetterPrintableRange(iterator.range.location, iterator.range.length, usedWidth);
+                    printableRanges.push(printableRange);
                 }else{
-                    max = mid;
+                    printableRange.length += iterator.range.length;
+                    printableRange.width = usedWidth;
                 }
             }else{
-                if (rects[0].y >= y){
-                    max = mid;
+                printableRange = null;
+            }
+            iterator.increment();
+            if (iterator.range.location >= runIterator.range.end){
+                // NOTE: We expect iterator.location to fall on a run boundary, but
+                // if it doesn't, then the run boundary splits a user-perceived character, and we'll
+                // paint every byte of the character with the attributes that begin the character.
+                // It's also technically possible for N runs to be in a N-length user-perceived
+                // character, so we can't just assume that a single runIterator.increment() will get
+                // us to the run that applies to the next user-perceived charater; therefore, we'll loop.
+                // It is up to applications to ensure that run boundaries fall on user-perceived
+                // character boundaries, but this code must assume that applications will do the
+                // wrong thing, and handle those situations without crashing/looping forever/etc.
+                do {
+                    runIterator.increment();
+                }while (runIterator.range.end < iterator.range.location);
+                runDescriptor = null;
+            }
+        } while (remainingRange.length > 0 && printableRanges[printableRanges.length - 1].width <= width && !newline);
+
+        // Remove any characters causing overage
+        // But do nothing in truncation mode, just let the final character overflow so it can
+        // be appropriately truncated by the caller
+        if (printableRanges[printableRanges.length - 1].width > width && lineBreakMode != JSLineBreakMode.truncateTail){
+
+            if (lineBreakMode == JSLineBreakMode.wordWrap){
+                // word wrapping
+                iterator.decrement();
+                var characterBreakLocation = iterator.range.location;
+                // back up to a word boundary
+                while (iterator.index > range.location && !iterator.isWordBoundary){
+                    iterator.decrement();
+                }
+                if (iterator.range.location <= range.location){
+                    // we couldn't fit a word in, so break by character
+                    usedWidth -= this._truncateHTMLRunDescriptorsToLocation(runDescriptors, characterBreakLocation);
+                    this._truncateHTMLRangesToLocation(printableRanges, characterBreakLocation);
                 }else{
-                    min = max = mid;
+                    usedWidth -= this._truncateHTMLRunDescriptorsToLocation(runDescriptors, iterator.range.location);
+                    this._truncateHTMLRangesToLocation(printableRanges, iterator.range.location);
                 }
+            }else{
+                // character wrapping (or unknown/invalid line break mode value)
+                iterator.decrement();
+                usedWidth -= this._truncateHTMLRunDescriptorsToLocation(runDescriptors, iterator.range.location);
+                this._truncateHTMLRangesToLocation(printableRanges, iterator.range.location);
             }
-        }
-        return JSRange(startingLocation, this.range.location + min - startingLocation);
-    }
-};
 
-Object.defineProperties(UIHTMLTextTypesetterRunDescriptor.prototype, {
+            printableRanges[printableRanges.length - 1].width = Math.min(usedWidth, printableRanges[printableRanges.length - 1].width);
+        }
 
-    clientRects: {
-        configurable: true,
-        get: function UIHTMLTextTypesetterRunDescriptor_getClientRects(){
-            var rects = Array.prototype.slice.call(this.span.getClientRects(), 0);
-            for (var i = rects.length - 1; i >= 1; --i){
-                // Chrome 79.0.3945.117 started returning multiple rects per
-                // line in some situations
-                if (rects[i].y === rects[i - 1].y){
-                    rects[i - 1] = {
-                        x: rects[i - 1].x,
-                        y: rects[i - 1].y,
-                        width: rects[i - 1].width + rects[i].width,
-                        height: rects[i - 1].height,
-                    };
-                    rects.splice(i, 1);
-                }
-            }
-            Object.defineProperty(this, 'clientRects', {
-                value: rects
-            });
-            return rects;
+        if (runDescriptors.length > 0){
+            var lastDescriptor = runDescriptors[runDescriptors.length - 1];
+            return {
+                runDescriptors: runDescriptors,
+                range: JSRange(range.location, lastDescriptor.location + lastDescriptor.length - range.location),
+                trailingWhitespaceWidth: usedWidth - printableRanges[printableRanges.length - 1].width
+            };
         }
+
+        return {
+            runDescriptors: [],
+            range: JSRange(range.location, 0),
+            trailingWhitespaceWidth: 0
+        };
     },
 
-    startX: {
-        get: function UIHTMLTextTypesetterRunDescriptor_getStartX(){
-            var firstRect = this.clientRects[0];
-            return firstRect.x;
+    _truncateHTMLRunDescriptorsToLocation: function(runDescriptors, location){
+        var runDescriptor;
+        var end = location + 1;
+        var removedWidth = 0;
+        var characterWidth;
+        var characterLength;
+        var i, l;
+        while (runDescriptors.length > 0 && end > location){
+            runDescriptor = runDescriptors[runDescriptors.length - 1];
+            end = runDescriptor.location + runDescriptor.length;
+            while (end > location && runDescriptor.userPerceivedCharacterWidths.length > 0){
+                characterWidth = runDescriptor.userPerceivedCharacterWidths.pop();
+                removedWidth += characterWidth;
+                characterLength = runDescriptor.userPerceivedCharacterLengths.pop();
+                runDescriptor.length -= characterLength;
+                end -= characterLength;
+            }
+            if (runDescriptor.userPerceivedCharacterWidths.length === 0){
+                runDescriptors.pop();
+            }
         }
+        return removedWidth;
     },
 
-    endX: {
-        get: function UIHTMLTextTypesetterRunDescriptor_getEndX(){
-            var lastRect = this.clientRects[this.clientRects.length - 1];
-            return lastRect.x + lastRect.width;
+    _truncateHTMLRangesToLocation: function(ranges, location){
+        var end = location + 1;
+        var range;
+        while (ranges.length > 0 && end > location){
+            range = ranges[ranges.length - 1];
+            end = range.location;
+            if (end >= location){
+                ranges.pop();
+            }else{
+                range.length = location - range.location;
+            }
+        }
+        if (ranges.length === 0){
+            ranges.push(UIHTMLTextTypesetterPrintableRange(location, 0, 0));
         }
     },
 
-    numberOfLines: {
-        get: function UIHTMLTextTypesetterRunDescriptor_getNumberOfLines(){
-            return this.clientRects.length;
+});
+
+var UIHTMLTextTypesetterRunDescriptor = function(location, attributes){
+    if (this === undefined){
+        return new UIHTMLTextTypesetterRunDescriptor(location, attributes);
+    }
+    if (location instanceof UIHTMLTextTypesetterRunDescriptor){
+        this.location = location.location;
+        this.attributes = location.attributes;
+        this.length = location.length;
+        this.userPerceivedCharacterWidths = JSCopy(location.userPerceivedCharacterWidths);
+        this.userPerceivedCharacterLengths = JSCopy(location.userPerceivedCharacterLengths);
+        this.font = location.font;
+        this.attachment = location.attachment;
+    }else{
+        this.location = location;
+        this.attributes = attributes;
+        this.length = 0;
+        this.userPerceivedCharacterWidths = [];
+        this.userPerceivedCharacterLengths = [];
+        this.font = attributes.font || null;
+        this.attachment = null;
+    }
+};
+
+Object.defineProperties(UIHTMLTextTypesetterRunDescriptor.prototype, {
+
+    width: {
+        get: function(){
+            var width = 0;
+            var i, l;
+            for (i = 0, l = this.userPerceivedCharacterWidths.length; i < l; ++i){
+                width += this.userPerceivedCharacterWidths[i];
+            }
+            return width;
         }
     }
+
 });
 
-var UIHTMLTextTypesetterRunDescriptorFragment = function(runDescriptor, range){
+var UIHTMLTextTypesetterPrintableRange = function(location, length, width){
     if (this === undefined){
-        return new UIHTMLTextTypesetterRunDescriptorFragment(runDescriptor, range);
+        return new UIHTMLTextTypesetterPrintableRange(location, length, width);
+    }
+    if (location instanceof UIHTMLTextTypesetterPrintableRange){
+        this.location = location.location;
+        this.length = location.length;
+        this.width = location.width;
+    }else{
+        this.location = location;
+        this.length = length;
+        this.width = width;
     }
-    this.runDescriptor = runDescriptor;
-    this.range = range;
-    this.overflowed = false;
 };
 
 })();