[Bug] legend. textStyle. ellipsis the setting is not accurate enough when processing English, Arabic and other texts.

Open yukiyukixing opened this issue 2 years ago • 0 comments

Version

5.5.0

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?c=line-simple&renderer=svg&code=PYBwLglsB2AEC8sDeAoWsA2BTA5l6AJgFzJrqxgCeIWJA5CBgIYTR0A0Z6EAxjPQCcsPMBy6wIYLAFsA6hAJgAFiQCMANk7kJU6QAksEHErAkALFvKSZAcSYg1m8VIAeYAMpVsJVNvQAzGDBZQ2NTWABWAAYoy21A6A8IAC9aWFUAJjjyPgxgAXoAYgBmdTNVcrE_TFYsAyMTEidqgHcFZTUY7PRgADcsAX88lvowAQBXaB4mKSq_LAwMCBAAZwgV-gA6bbpxAF9sghmmEgBtcXQ6QsAxMEAhMEByMEAWMAB9e8ARMEBiMEBmMEAKMEAJMEAnGDPQCiYEDHvc_sDAFJgAFoXBAmMBpBAzHNtFcAEZY7E43F4_E4tHkK5LaALWqk8lkyk0im1ImXQpMZks1ls9kc1m7bQAXTIBzIYGAwAwkAcyAF6BcAEF4RtSNojmATrBTnRplIcPlKFEOLB1TNcNrVHqDZrtRk6Hz0JLYJRZesfOIVoxJNKhCrfH4VkpgCMKBMsPt-ZYVgMIFh5edtF7tNAmNI0lc7k9Xp9foCQWCIdC4QikSiGRRqEnKUWVsqeABrehMRblyjSDEi-g8CACHjYBtNkXuFJpVSxC6wJUq06qTZRYrsWBRTbqKKqGdzgAcEXUPO6sArWHFdHwBG55Ft6Fj5HjiaKBOvN9xRaoNHoZa3FaY1dr9ZfjebGFb7c7WDdj-fapJ0W6jmcE6qJky6bAAnKUsEAOxRGYm7Djue4HkeNrZGe6AXkmhS0tSdKkeRVKUfeJZPvSL6VjW-p1hgQEtvqbYdl2X49hgIEDkO1QQaqUEaLBK5IRY6SbBk6hIeh1SYfQ2H7Hhw6EUUnKaVpbLUY--rPhhDEfix3E_n-nGAaZvb9mBw5CeOmxmEhM4TmY05SRkcFwfJ3pSFhhA4bAexkHyewANxAA

Steps to Reproduce

I set width:100, but the length of the displayed text is only 79.8. This gap is too big because there is the letter "i" in this text, and the letter "a" is used in zrend to represent all letters. the width of This is too imprecise, which leads to a large gap in the end. Perhaps a more precise method should be used to calculate the width of letters, and the gap is even greater for Arabic letters.

For example, calculate it like this:

function truncateTextToWidth(text, maxWidth, font) {
  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");
  context.font = font;

  const ellipsis = "...";
  const ellipsisWidth = context.measureText(ellipsis).width;

  let currentWidth = 0;
  let truncatedText = "";

  for (let i = 0; i < text.length; i++) {
    const char = text[i];
    const charWidth = context.measureText(char).width;
    if (currentWidth + charWidth + ellipsisWidth > maxWidth) {
      return truncatedText + ellipsis;
    }

    currentWidth += charWidth;
    truncatedText += char;
  }

  return truncatedText;
}

const text = "#linelinelinelinelinelinelineline";
const maxWidth = 100;
const font = "500 12px sans-serif";
const truncated = truncateTextToWidth(text, maxWidth, font);
console.log(truncated);

Current Behavior

The current text overflow processing result is not ideal, and the understanding result should be similar to the processing result of text-overflow: ellipsis; in CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ellipsis Example</title>
    <style>
      .ellipsis-container {
        width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div class="ellipsis-container">#نقاش_الأسبوع_مع_شاومي-xiaomi4</div>
    <div class="ellipsis-container">#项目2222项目项目项目项目项目项目项目</div>
    <div class="ellipsis-container">#linelinelinelinelinelinelineline</div>
  </body>
</html>

Expected Behavior

the understanding result should be similar to the processing result of text-overflow: ellipsis; in CSS.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

Feb 19 '24 08:02 yukiyukixing