fix: Fix multiline text wrapping for foreign languages

[ZhymabekRoman]

Thank you for this project! I found a problem with wrapping text in the repo card and decided to fix it. The problem is that foreign language text is not wrapped properly because it's first encodes in HTML, and because of it certain foreign characters increases the line length, and it's not wrappes properly. See the PR code for more info. Sorry for my JavaScript ;)

Before: After:

[vercel[bot]]

@ZhymabekRoman is attempting to deploy a commit to the github readme stats Team on Vercel.

A member of the Team first needs to authorize it.

[Zo-Bro-23]

@rickstaa wasn't this already fixed with a PR? Or am I mistaken?

[rickstaa]

@rickstaa wasn't this already fixed with a PR? Or am I mistaken?

Do you mean https://github.com/anuraghazra/github-readme-stats/pull/206? If I understand it correctly, this PR fixes problems people encounter when the description is not written in English. 🤔

[TTATPuOT]

Not sure about other languages, but with russian its broken. For example: https://github-readme-stats.vercel.app/api/pin/?username=TTATPuOT&repo=cdek-sdk2.0

Its split into three lines but can fit at one. So, please, marge it PR if possible.

[ZhymabekRoman]

@rickstaa, is there an update?

[rickstaa]

@rickstaa, is there an update?

Sorry, I didn't have time yet to review this. If you could send me multiple examples of languages and repos where the problem exists, that would make it easier to study since I need more examples to understand the situation in depth 👍🏻. You can put them like so:

[![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=cdek-it&repo=sdk2.0)](https://github.com/anuraghazra/github-readme-stats)

[TTATPuOT]

I collected more examples. Sometimes, text not splits into multiline, but overflow of image (chinese, korean).

Russian: https://github-readme-stats.vercel.app/api/pin/?username=TTATPuOT&repo=cdek-sdk2.0

---

Chinese: https://github-readme-stats.vercel.app/api/pin/?username=modood&repo=Administrative-divisions-of-China

---

Japanese: https://github-readme-stats.vercel.app/api/pin/?username=oreilly-japan&repo=deep-learning-from-scratch

---

Arab: https://github-readme-stats.vercel.app/api/pin/?username=Hussain-Alsalman&repo=Arabian_Analyst_Blog

---

Ukrainian: https://github-readme-stats.vercel.app/api/pin/?username=reactjs&repo=uk.react.dev

---

Hindi: https://github-readme-stats.vercel.app/api/pin/?username=gopalindians&repo=awesome-hinduism

---

Korean: https://github-readme-stats.vercel.app/api/pin/?username=ClintJang&repo=awesome-swift-korean-lecture

[ZhymabekRoman]

After this fix:

Russian (Correct)

Another Russian (My own repo with big description) (Overflow problem)

Before: After:

Chinese (Overflow problem)

Arab (Correct)

Ukrainian (Correct)

Hindi (Correct)

Korean (Overflow problem (???)):

[rickstaa]

@ZhymabekRoman and @TTATPuOT, thanks for the examples. When the overflow problem is fixed, we can merge this pull request 👍🏻.

[ZhymabekRoman]

To fix the overflow, I have only two ideas:

1. Somehow calculate the maximum line width of the text and reduce the char length. But how do we know that a text line is overflowing?
2. Manually set max line char by user in text_width property. I have some implementation of this in custom branch:

[SimMarketBot](https://github-readme-stats-git-dev2-zhymabekroman.vercel.app/api/pin/?username=ZhymabekRoman&repo=SimMarketBot&text_width=54)

[ZhymabekRoman]

I found some libraries to calculate text width

1. https://github.com/schickling/calculate-size - Only for browser environment

import calculateSize from "calculate-size";

export function getTextWidth(text) {
  const size = calculateSize(text, {
    font: '"Montserrat", sans-serif',
    fontSize: "14px"
  });
  return size.width;
}

2. https://github.com/adambisek/string-pixel-width - doesn't require a browser, can be run in backend. Need to add custom fonts to library. May produce non-perceptible results.
3. https://github.com/Evgenus/js-server-text-width - doesn't require a browser, can be run in backend. Need to add custom fonts to library. May produce non-perceptible results.

[rickstaa]

I found some libraries to calculate text width

1. https://github.com/schickling/calculate-size - Only browser for environment

import calculateSize from "calculate-size";

export function getTextWidth(text) {
  const size = calculateSize(text, {
    font: '"Montserrat", sans-serif',
    fontSize: "14px"
  });
  return size.width;
}

2. https://github.com/adambisek/string-pixel-width - doesn't require a browser, can be run in backend. Need to add custom fonts to library. May produce non-perceptible results.
3. https://github.com/Evgenus/js-server-text-width - doesn't require a browser, can be run in backend. Need to add custom fonts to library. May produce non-perceptible results.

@ZhymabekRoman, thanks for looking into this! We already have a function that calculates the text width to adjust the card to the title length. I didn't write this code but since we have yet to offer a way to set different fonts, it might already be sufficient.

https://github.com/anuraghazra/github-readme-stats/blob/0d74d5a25d7e522a7aa50a54863e9b2833290f5e/src/common/utils.js#L357-L389

[ZhymabekRoman]

As alternative way we can use some JS code to properly wrap text since SVG specification officially doesn't support text wrapping: https://codepen.io/techniq/pen/MeNoQQ

[rickstaa]

As alternative way we can use some JS code to properly wrap text since SVG specification officially doesn't support text wrapping: https://codepen.io/techniq/pen/MeNoQQ

Looks good!