Github-readme-stats: [Bug] Few issues with a repo description

[Paveloom]

Describe the bug

1. Only one line of a description gets displayed on a repo card. This seems a bit confusing since GitHub usually displays few lines if needed. This makes these cards and GitHub's standard pins less interchangeable.
2. The description of one of my repositories didn't get trimmed at all for some reason (see the live demo below).

Expected behavior

1. Display few lines if needed, at least two.
2. Trim the description as expected.

Live demo

[anuraghazra]

Thanks for reporting the issue @Paveloom

This seems strange that string.slice failed because of russian language :thinking:
Also i did not show multi lines because it is a pain to work with multiline text in svg, so i just trimmed them for the sake of simplicity

[xiaoyu2006]

This seems strange that string.slice failed because of russian language 🤔

@anuraghazra No it trims well:

desc = "Шаблоны make-файлов для компиляции программ и публикаци.."
// => "Шаблоны make-файлов для компиляции программ и публикаци.."
desc.slice(0, 50)
// => "Шаблоны make-файлов для компиляции программ и публ"

It's the font problem. For example, characters like "D" are longer, while "i" are shorter. e.g.

1. 
   https://github-readme-stats.vercel.app/api/pin/?username=xiaoyu2006&repo=github-readme-stats-debug1
2. 
   https://github-readme-stats.vercel.app/api/pin/?username=xiaoyu2006&repo=github-readme-stats-debug2

---

NOTE

BTW, GitHub deals with this by expanding the card.

And cards are aligned, but lines are not.

[xiaoyu2006]

Since you use SVG, sizes are fixed and can't expand automatically like the stock pin card.

@anuraghazra I have a not-so-good fix:

1. Increase the SVG's height a little
2. Auto break if the desc is too long.

Plz let me know if this is available. I can submit a PR.

[anuraghazra]

Increase the SVG's height a little
Auto break if the desc is too long.

This of course sounds simple, but isn't. SVG does not have auto text wrapping. I'll have to write a function to detect the text length (and not just text length also have to consider each word's width which is hard to figure out, otherwise we face the issue what you mentioned about "DDDD" longer than "III")

And we cannot simply make the height large it will look bad, we have to auto resize the height depending on how many line breaks there are (it's possible tho)

[xiaoyu2006]

SVG does not have auto text wrapping.

@anuraghazra
See foreignObject. By adding an <p> in it will fix this.

[anuraghazra]

SVG does not have auto text wrapping.

@anuraghazra
See foreignObject. By adding an <p> in it will fix this.

I know about foreignObject and github also supports it, but there is no guarantee that it will render on all browser as it's not in SVG v1.1 Spec

[xiaoyu2006]

I'll have to write a function to detect the text length (and not just text length also have to consider each word's width which is hard to figure out, otherwise we face the issue what you mentioned about "DDDD" longer than "III")

@anuraghazra This is going to be tricky as we're handling some "rendered thing", but what we have on the server side are just texts.

By doing this we have to return with a js embedded.

Also, reimplement everything in HTML's way will be a choice.

I feel like I keep providing rubbish. My frontend knowledge is almost zero!😨

---

Wait, this is solved with packages!

[anuraghazra]

This should be partially fixed in #206

Although russian language text is now messing up.

[Paveloom]

This should be partially fixed in #206

Well, that's progress. Thank you for the PR, @HaaLeo and @anuraghazra.

Although russian language text is now messing up.

Yep:

Hopefully this problem will be solved too.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Paveloom]

Bump.