Problems with Unicode characters

[efb4f5ff-1298-471a-8973-3d47447115dc]

Is your feature request related to a usage problem (not a bug)? Please describe.

So i did some further investigation on Unicode characters and i found out that people can use Unicode characters everywhere on YouTube (I used this 𒐫 Unicode character in my research).

I found out the following things (All of these things have corresponding screenshots):

The following applies for these pages Subscriptions, Trending, Most Popular, Playlist, History, Search and Profile page with the setting enabled view video type = grid

1. Video titles are getting too long in the vertical direction.
2. Profile names are overlapping on other profile names or even video titles.
3. Profile names don't stay within the border of the grid.
4. Thumbnail is getting stretched in horizontal direction.

The following applies for the Video player page.

5. Video title getting too long in the vertical direction.
6. Profile name getting too long.
7. Video description is getting too long.
8. Buttons under the video dont stay within the border.

The following applies for the Comment section on the Video player page.

9. Profile name getting too long.
10. Comments don't stay within the border.
11. Comments getting too long in vertical direction.
12. Allot of Unicode characters are not supported by FreeTube.

The following applies for the Up next section on the Video player page.

13. Profile name doesn't stay within the border of the grid, stretches the other titles out of border and the option button doesn't stay in place.
14. Video title gets too long.

The following applies for the Channel page.

15. Profile name getting too long and doesn't stay within border.
16. Channel description getting too long.

The following applies for the Playlist page.

17. Title gets too long.
18. Profile name gets too long.
19. Video section: Title gets too long.
20. Video section: Profile name gets too long.

The following applies for the Playlist section on the video page.

21. Playlist title doesnt stay within border.
22. Profile name of list creator gets too long.
23. Thumbnails in list doesn't stay within the list.
24. Video title gets too long.
25. Profile name gets too long.

The following applies for these pages Subscriptions, Trending, Most Popular, Playlist, History, Search and Profile page with the setting enabled view video type = list

26. Video title is getting to long in horizontal direction and gets out of border.
27. Profile name is getting to long in horizontal direction and gets out of border.
28. Video description is not consistently shown on every page.

Describe the solution you'd like to see implemented (Some of the 'solutions' have corresponding screenshots)

1. Cut a title off when its too long and put three dots(...) at the end.
2. Cut profile name off when its too long and maybe put three dots(...) at the end.
3. Profile name must stay within the border and cut off if too long.
4. Stay within the borders of the grid.
5. Cut the title off then its too long.
6. Cut of the profile name when it is too long.
7. Make an preview of the description and a button to click on that says 'Show more' and when u click on it you'll see the full description.
8. Stay within the border of the section where the buttons normally are.
9. Cut the profile name off when too long.
10. Comment must stay within border and cut off if too long and put three dots(...) at the end.
11. Make a preview and a tab that says 'Read more' and when u click on it you'll see the full comment.
12. I really don't know a solution for this.
13. Stay within the border (cut the profile name off), don't stretch other titles out of the border and option button stays in place.
14. Cut of title when it gets too long.
15. Cut profile name off when too long and profile name stays within border.
16. Cut of when its too long and put three dots(...) at the end with a show more button.
17. Make the title visible in the vertical direction.
18. Make the profile name visible in vertical direction.
19. If title reaches end of border, continue the title in the line below.
20. If Profile name reaches end of border, cut profile name off.
21. If title reaches end of border, cut title off.
22. Cut the profile name off and put ... behind it.
23. Make the thumbnails stay in the list.
24. Cut a title off when its too long and put three dots(...) at the end.
25. Cut the profile name off when too long.
26. Display title properly and dont let it go out of the border.
27. Display profile name properly and dont let it go out of the border.
28. Display description everywhere.

Describe alternatives/optional things you've considered (All the 'alternatives' have corresponding screenshots)

1. None
2. YT cuts them off when they're too long but they also implemented that when u hover on a profile name, the full profile name shows itself in a popup. However on the profile page YT just removed the profile name, because there is no need for it to be there.
3. None.
4. None.
5. None.
6. Same alternative as number 2.
7. None.
8. None.
9. Same alternative as number 2.
10. None.
11. None.
12. None.
13. Same alternative as number 2.
14. None.
15. Same alternative as number 2.
16. None.
17. None.
18. Same alternative as number 2.
19. None.
20. Same alternative as number 2.
21. None.
22. Same alternative as number 2.
23. None.
24. None.
25. Same alternative as number 2.
26. None.
27. Same alternative as number 2.
28. None.

Screenshots (Dark theme is FreeTube and Light theme is YouTube Solution / Alternative)

1. https://www.youtube.com/results?search_query=%F0%92%90%AB+
   

2. https://www.youtube.com/results?search_query=%F0%92%90%AB+
   

Alternative:

3. https://www.youtube.com/results?search_query=%F0%92%90%AB+
   

4. Best way to find this is to search 𒐫 with filter Type: Videos enabled
   

5. https://youtu.be/mAMdleRNTjk
   

YT solution:

6. https://youtu.be/gSlhGZg4Kfc
   

7. https://youtu.be/lf2kONhTdoE
   

YT solution:

8. https://youtu.be/ta67rqaSVnc
   

9. https://www.youtube.com/watch?v=aXqt-10pWpw
   

10. https://youtu.be/UAj01-6lWD8
    

11. https://youtu.be/UAj01-6lWD8
    (Well its not the same comment but you'll get the principle)
    

YT solution:

12. https://youtu.be/oL59ryNVaXk
    
    

13. https://www.youtube.com/channel/UCYjRiR2FeyxpROu3laVWo_Q
    (Go to his channel > watch a vid > check the up next section > if u dont see it > go back to his channel and watch a other vid > check up next section > repeat procedure untill u get the result)
    

14. I couldn't find an example for this so i edited this with the developer tools.
    

15. https://www.youtube.com/channel/UCYjRiR2FeyxpROu3laVWo_Q
    

16. I couldn't find an example for this so i edited this with the developer tools.
    

17. https://youtube.com/playlist?list=PL_7YUVmmp-LeUE2P6AbRKr4bRsr6p2ycs

qc3YsQeiS2.mp4

YT solution:

18. https://www.youtube.com/playlist?list=PLU_lUL8sj0nuNfOcOxuPOEFCuOEYCJ4ir (See video 15, the same scrolling problem happens here too.)
    

19. https://www.youtube.com/playlist?list=PLECWFmo8x9dZdduiItKmg1qS40vUB68Ir

PMkJxv0t2a.mp4

20. https://www.youtube.com/playlist?list=PLECWFmo8x9dZdduiItKmg1qS40vUB68Ir

PMkJxv0t2a.mp4

21. https://youtube.com/playlist?list=PL_7YUVmmp-LeUE2P6AbRKr4bRsr6p2ycs (U will get to the playlist page. U need to start a video in the list.)
    

YT solution:

22. https://www.youtube.com/playlist?list=PLECWFmo8x9dZdduiItKmg1qS40vUB68Ir (U will get to the playlist page. U need to start a video in the list.)

23. https://www.youtube.com/playlist?list=PLECWFmo8x9dZdduiItKmg1qS40vUB68Ir (U will get to the playlist page. U need to start a video in the list.)

Border.thumbnails.mp4

24. I couldn't find an example for this so i edited this with the developer tools.
    

25. I couldn't find an example for this so i edited this with the developer tools.

23.mp4

26. Search for 𒐫 with this filter enabled Type=video

nQkZYS5X4E.mp4

27. Search for 𒐫 with this filter enabled Type=video

nQkZYS5X4E.mp4

28. Just check out the pages like in the video.

lbOuDGtkAP.mp4

Additional context
In this post i have every section within Freetube covered.

Related #1336 (i created this one by accident i didnt know before that it belongs here)

[GilgusMaximus]

Where are you even finding this stuff?

Regarding the exiting of HTML boundaries, it would be important to see how these are actually clipped with CSS and then implement a working solution for it. I would imagine that stopping the text somewhere, showing a ... and then having an overlay which appears when you hover over the text would fit the best here.

For the moment I'd suggest not searching for this character? I mean, I didn't even know this character existed in the first place.

[efb4f5ff-1298-471a-8973-3d47447115dc]

Where are you even finding this stuff?

Do u want me to add hyperlinks to the specific pages?

For the moment I'd suggest not searching for this character? I mean, I didn't even know this character existed in the first place.

I used this character for creating extreme examples (just for the principle of it) to make u aware of these problems (before yesterday i also didn't know these kind of characters existed).

[PrestonN]

Having the links to them do help.

Like was mentioned, these are fairly extreme examples but it wouldn't hurt to do better checks for cases like these. The issue seems to be more of an issue with long strings of text with no whitespace than with the characters themselves.

In theory these should be simple CSS fixes but I won't know until I look at them closer.

[efb4f5ff-1298-471a-8973-3d47447115dc]

Hyperlinks are added at the screenshots.
It is possible that u don't see the result immediately when u go to the pages.
To get some results u have to scroll a bit.

[efb4f5ff-1298-471a-8973-3d47447115dc]

@PrestonN @GilgusMaximus would it be better if i split this issue up into twelve issues? For each problem i found one issue. I think contributors would start with an issue faster when its not this big, because they think its maybe easier. I think contributors get a little scared of all the things i summed up here.

[GilgusMaximus]

Not really. Basically the underlying problem is that some obscure characters become so long that they do not fit into the html boxes correctly.

[efb4f5ff-1298-471a-8973-3d47447115dc]

@GilgusMaximus Okay no problem. Just added 9 more problems :(

[peepo5]

img no. 8 is referenced in the above issue ^

[efb4f5ff-1298-471a-8973-3d47447115dc]

Note to self: Restest issue and convert to proper feature request

[efb4f5ff-1298-471a-8973-3d47447115dc]

Converted #4284