Benchmark: String wrapping - MeasureThat.net

HTML Preparation code:

<!--your preparation HTML code goes here-->

Tests:

progressively
var approxMeasure = (a) => a.length * 0.6 * 26; var getLine = ({ str, lineStartIndex, lineEndIndex, standardCharWidth, maxWidth, measure, }) => { const line = str.slice(lineStartIndex, lineEndIndex); const lineWidth = measure(line); // in the current code something seems to be adjusting the max width based on the label width, but it is not in scope of the string wrapping // so I floor the delta for now. which is impresice but avoids wrapping the string based on sub-pixel discrepancies const delta = Math.floor(maxWidth - lineWidth); if (lineEndIndex + 1 > str.length && delta >= 0) { // string fits into max width completely return line; } const numberOfCharsDeviating = Math.floor( Math.abs(delta / standardCharWidth) ); if (delta < 0) { // do not exceed the maximum width, even if the dela is less than the standard char width return getLine({ str, lineStartIndex, lineEndIndex: lineEndIndex - Math.max(numberOfCharsDeviating, 1), standardCharWidth, maxWidth, measure, }); } else if (numberOfCharsDeviating > 0) { // add chars only if the delta is greater than the standard char width return getLine({ str, lineStartIndex, lineEndIndex: lineEndIndex + numberOfCharsDeviating - 1, standardCharWidth, maxWidth, measure, }); } // If there is a space within 3 chars at the end of the line, move the word to a next line const lastSpaceIndex = line.lastIndexOf(' '); if (lastSpaceIndex !== -1 && line.length - lastSpaceIndex <= 3) { return line.slice(0, lastSpaceIndex + 1); } // If there is no space in the whole current line, break it regardless of the next 3 chars // but if there is a space within the current line: // - move the word to a next line if there is a space within the next 3 chars // - move the word to a next line the remaining chars are less than 4 const remainingTextLength = str.length - lineEndIndex - 1; if ( lastSpaceIndex !== -1 && (remainingTextLength < 3 || str.slice(lineEndIndex, lineEndIndex + 4).includes(' ')) ) { return line.slice(0, lastSpaceIndex + 1); } else if (remainingTextLength < 3) { // If ther remaining text is too short for a line and there is no space in the current line, // the the word should be truncated ideally, but I am making up the requirements here. // So for now we will simply break so that there are at least 4 chars on the next line (e.g. "Applica" -> "tion") return line.slice(0, line.length - (3 - remainingTextLength)); } return line; }; function wrapString( str, maxWidth, measure ) { if (str.length < 7) { return [str]; } const standardCharWidth = measure('a'); const numberOfStandardCharsInLine = Math.floor(maxWidth / standardCharWidth); const lines = []; let lineStartIndex = 0; let lineEndIndex = numberOfStandardCharsInLine; while (lineStartIndex < str.length) { const line = getLine({ str, lineStartIndex, lineEndIndex, standardCharWidth, maxWidth, measure, }); lines.push(line); lineStartIndex = lineStartIndex + line.length; lineEndIndex = lineStartIndex + numberOfStandardCharsInLine; } return lines; }; const ws = new RegExp('[ \\t\\n]+'); // should include all whitespace characters as defined by Ardoq // or possibly change "measure" to work thusly // measure(str, a, b) returns the length of the substring function wrapString_2( str, width, measure ) { const tokens = str.split(ws, 100); const output = []; const wrapWord = (word) => { if (measure(word) > width) { // str contains no line breaks but must be fit to width // this implementation can break anywhere, although in // practice it should not break in all sorts of clever // circumstances such as after a currency symbol let a = 0; while (a < word.length) { let b = word.length; while (measure(word.slice(a, b)) > width) { b = b - 1; } if (b === word.length) { break; } output.push(word.slice(a, b)); a = b; } return word.slice(a); } return word; }; for (let i = 0; i < tokens.length;) { let line = wrapWord(tokens[i++]); while (i < tokens.length && measure(line.concat(' ', tokens[i])) < width) { line = line.concat(' ', tokens[i++]); } output.push(line); } return output; }; var testString = "djf sjdbfsd sdkfjsdfsj dh shd djd d d dkskdfsdjkdj.sfks" const result = wrapString(testString, 500, approxMeasure)
split and wrap worsds
var approxMeasure = (a) => a.length * 0.6 * 26; var getLine = ({ str, lineStartIndex, lineEndIndex, standardCharWidth, maxWidth, measure, }) => { const line = str.slice(lineStartIndex, lineEndIndex); const lineWidth = measure(line); // in the current code something seems to be adjusting the max width based on the label width, but it is not in scope of the string wrapping // so I floor the delta for now. which is impresice but avoids wrapping the string based on sub-pixel discrepancies const delta = Math.floor(maxWidth - lineWidth); if (lineEndIndex + 1 > str.length && delta >= 0) { // string fits into max width completely return line; } const numberOfCharsDeviating = Math.floor( Math.abs(delta / standardCharWidth) ); if (delta < 0) { // do not exceed the maximum width, even if the dela is less than the standard char width return getLine({ str, lineStartIndex, lineEndIndex: lineEndIndex - Math.max(numberOfCharsDeviating, 1), standardCharWidth, maxWidth, measure, }); } else if (numberOfCharsDeviating > 0) { // add chars only if the delta is greater than the standard char width return getLine({ str, lineStartIndex, lineEndIndex: lineEndIndex + numberOfCharsDeviating - 1, standardCharWidth, maxWidth, measure, }); } // If there is a space within 3 chars at the end of the line, move the word to a next line const lastSpaceIndex = line.lastIndexOf(' '); if (lastSpaceIndex !== -1 && line.length - lastSpaceIndex <= 3) { return line.slice(0, lastSpaceIndex + 1); } // If there is no space in the whole current line, break it regardless of the next 3 chars // but if there is a space within the current line: // - move the word to a next line if there is a space within the next 3 chars // - move the word to a next line the remaining chars are less than 4 const remainingTextLength = str.length - lineEndIndex - 1; if ( lastSpaceIndex !== -1 && (remainingTextLength < 3 || str.slice(lineEndIndex, lineEndIndex + 4).includes(' ')) ) { return line.slice(0, lastSpaceIndex + 1); } else if (remainingTextLength < 3) { // If ther remaining text is too short for a line and there is no space in the current line, // the the word should be truncated ideally, but I am making up the requirements here. // So for now we will simply break so that there are at least 4 chars on the next line (e.g. "Applica" -> "tion") return line.slice(0, line.length - (3 - remainingTextLength)); } return line; }; function wrapString( str, maxWidth, measure ) { if (str.length < 7) { return [str]; } const standardCharWidth = measure('a'); const numberOfStandardCharsInLine = Math.floor(maxWidth / standardCharWidth); const lines = []; let lineStartIndex = 0; let lineEndIndex = numberOfStandardCharsInLine; while (lineStartIndex < str.length) { const line = getLine({ str, lineStartIndex, lineEndIndex, standardCharWidth, maxWidth, measure, }); lines.push(line); lineStartIndex = lineStartIndex + line.length; lineEndIndex = lineStartIndex + numberOfStandardCharsInLine; } return lines; }; const ws = new RegExp('[ \\t\\n]+'); // should include all whitespace characters as defined by Ardoq // or possibly change "measure" to work thusly // measure(str, a, b) returns the length of the substring function wrapString_2( str, width, measure ) { const tokens = str.split(ws, 100); const output = []; const wrapWord = (word) => { if (measure(word) > width) { // str contains no line breaks but must be fit to width // this implementation can break anywhere, although in // practice it should not break in all sorts of clever // circumstances such as after a currency symbol let a = 0; while (a < word.length) { let b = word.length; while (measure(word.slice(a, b)) > width) { b = b - 1; } if (b === word.length) { break; } output.push(word.slice(a, b)); a = b; } return word.slice(a); } return word; }; for (let i = 0; i < tokens.length;) { let line = wrapWord(tokens[i++]); while (i < tokens.length && measure(line.concat(' ', tokens[i])) < width) { line = line.concat(' ', tokens[i++]); } output.push(line); } return output; }; var testString = "djf sjdbfsd sdkfjsdfsj dh shd djd d d dkskdfsdjkdj.sfks" const result = wrapString_2(testString, 500, approxMeasure)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
progressively
split and wrap worsds

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 23 days ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Linux

View result in a separate tab

Test name	Executions per second
progressively	6722033.0 Ops/sec
split and wrap worsds	1464361.5 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 23 days ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON focuses on evaluating the performance of two different string wrapping implementations in JavaScript. Both implementations aim to achieve the same goal: wrapping strings so that they fit within a specified maximum width while selecting appropriate line breaks. Below is a detailed analysis of the benchmark, including the methods being compared, their advantages and disadvantages, and some additional considerations.

### Benchmark Overview

#### 1. **Benchmark Definition**
   - **Name**: String wrapping
   - **Description**: Not specified.
   - **Script Preparation Code**: Not specified.
   - **Html Preparation Code**: Not specified.

#### 2. **Individual Test Cases**
Two specific implementations are being tested:
- **Implementation 1: `wrapString`**
- **Implementation 2: `wrapString_2`**

### Test Cases Explained

1. **Implementation 1: `wrapString` (Test Name: progressively)**
   - **Functionality**: This function divides a given string into lines that do not exceed a specified maximum width. It calculates the width of the string using an external measuring function (`measure`), which likely approximates the pixel width based on character length.
   - **Logic**: It examines each segment of the string to see if it can be fit into the specified width, iterating through each character to determine line breaks. It intelligently handles edge cases, such as moving words to the next line when they don't fit or keeping them together if they exceed the width.
   - **Strengths**:
     - Capable of accounting for spaces, ensuring that words are not split unnecessarily.
     - Considers sub-pixel discrepancies leading to a more visually pleasing output.
   - **Weaknesses**:
     - Complexity in recursion could lead to performance hits on longer strings, particularly if the measure is inefficient.

2. **Implementation 2: `wrapString_2` (Test Name: split and wrap worsds)**
   - **Functionality**: This function uses a tokenization approach, splitting the input string into a maximum of 100 tokens (words) based on whitespace. It fits these tokens into lines while ensuring they do not exceed the maximum width.
   - **Logic**: It checks each word's length against the maximum width and breaks long words further if necessary. Then it tries to add subsequent words to the current line until the maximum width is reached.
   - **Strengths**:
     - Efficiently handles words as discrete units, which can simplify logic for wrapping.
     - The use of a loop rather than recursion can improve performance and reduce stack depth issues.
   - **Weaknesses**:
     - May struggle with very long individual words since each one is treated independently, which could lead to undesirable splits.

### Benchmark Results

- **Performance**:
  - **`wrapString`**: 6,722,033.0 executions per second.
  - **`wrapString_2`**: 1,464,361.5 executions per second.

The first implementation, `wrapString`, performs significantly better than the second, likely due to better handling of logic that avoids unnecessary calculations and recursively evaluates line breaks more efficiently.

### Considerations

- **Choice of Measuring Function**: Both implementations employ a `measure` function to estimate the width of strings. The choice of this measurement function can greatly impact performance outcomes. Selecting a highly optimized measurement can enhance the wrapping performance.
  
- **Edge Cases**: Addressing various string conditions—such as very long words, strings with mixed whitespace characters, or excessive punctuation—can be crucial across different implementations. The handling of such edge cases can vary drastically in performance and output quality.

- **Browser Performance**: The benchmark results show that performance can differ significantly based on the browser and environment. In real-world scenarios, profiling in the specific context (browser, platform) where the code will run is always recommended.

### Alternatives

Apart from the methods outlined in this benchmark, there are various libraries and techniques available for string wrapping and formatting:

- **Text Metrics**: Libraries like `canvas` in HTML can be used to measure text size more accurately when dealing with dynamic font settings.
  
- **CSS Text Wrapping**: Modern CSS properties like `word-wrap` and `overflow-wrap` can also tackle many string wrapping issues without the need for complex JavaScript functions, although they may not provide as much control as custom JavaScript solutions.

- **Utilizing Frameworks**: Libraries such as `lodash` or `underscore` can assist with string manipulations, though not specifically aimed at wrapping; they can provide convenient utilities that support efficient processing.

In summary, the benchmark effectively compares novel approaches to string wrapping with clear performance metrics, revealing the nuances and complexities inherent in text formatting tasks.

Related benchmarks:

String wrapping (version: 1)

Comparing performance of: progressively vs split and wrap worsds

Created: 23 days ago by: Guest

Jump to the latest result

progressively

split and wrap worsds

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 23 days ago):