Adjustable font sizes (25-200%) for Youtube video titles.

[Panthror]

Talking point	Short answer
Problem	Can't read video titles
Solution	Add option to change font-size
Alternatives	Not available/Not found
Scope	Potential to be huge
Side effects	None or negligible
Context	Extension + new feature = loads of happy people

⚬ PROBLEM: I watch Youtube on a TV connected to my PC. But from my couch it is very difficult to read the video titles because the text is so small. So I'd like to make all text on Youtube bigger, However, I have no way of doing that at the moment. Most extensions only allow me to choose a different font from a provided list, but offer no way to change the size. One allows me to change all text to capital letters, but that's it.

⚬ SOLUTION: Please add an option to change the font-size, both bigger and smaller, and maybe also add options to make all text bold, italic or underlined.

⚬ ALTERNATIVES: I've searched for CSS-code and Javascripts I could add through the Developer Options to solve this problem, but I couldn't find a clear solution. All files with codes containing the keywords I used (the name of the extension; font; text; bold; bigger; size; etc.) seemed to be part of bigger projects. So no clear piece of code or script only dealing with text size is available to me.

⚬ RELEVANCE / SCOPE: I believe that adding this feature will help improve readability from any distance, whether you watch from 6 feet, 6 inches, or even from 6 yards. Being able to make Youtube readable not matter how far you are from the screen could benefit a lot of people I imagine.

⚬ "SIDE EFFECTS": I don't think people will react negatively to this feature, most will probably use it to tweak the text to a size they like, be it bigger or smaller. Others, who don't have this problem, or don't see the need to change the size, will probably ignore it.

⚬ CONTEXT: You would make me very happy by adding this feature, and probably also make the day of other people, who didn't even know they wanted this, a little brighter. Anyway, I love the extension, it has vastly improved my Youtube usage, so thanks for all the great work you did so far, and hopefully I'll be seeing this feature soon.

Thanks for your time and effort!

Panthror.

[joshhazelhurst123]

@Panthror would this involve updating fonts.css and perhaps adding larger and smaller font's?

[Panthror]

@joshhazelhurst123 Don't know. I can't make anything computer-program related. I've seen people create a computer-program and still couldn't tell you how they did it. The only "coding" I ever did was typing HTML4 in Notepad back in the early 2000's to make a shitty web-site. This also being the reason for making the original post. So, yeah, not the faintest idea on what could be involved. Adding larger fonts to the font-selection could also be a fix, but I rather have a way to finetune the size. I'm a media-technician in a church, in this function I need to be able to see what is on a TV screen on the other side of the hall, a 50 foot distance. So having a slider or changeable numerical value would come in handy.

[joshhazelhurst123]

@Panthror I am not sure whether or not this makes any difference for you. Does this work when you follow these steps?

---

If you want to know how to change font size on YouTube using your computer, go by these steps –

Visit the YouTube website on your Windows or Mac computer. You can use any web browser of your preference like Google Chrome or Safari.
Once the YouTube website loads on your screen, take your mouse cursor and move it over any blank or empty space on the browser.
Now press and hold the “Control” key (on Windows) or “Command” key (on Mac OS) on your keyboard. With the help of your mouse scroll wheel, scroll upwards.
The more you scroll up, the bigger the fonts on that page get. Stop when you reach your ideal font size.
You can also do this with the help of your keyboard alone. Simply, press (Control + “+”) or (Command + “+”) to increase font size and press (Control + “-”) or (Command + “-”) to decrease font size.
If you wish to reset the font size to default settings, press (Control + 0) or (Command + 0) on your keyboard.
Another way to do this is by downloading a YouTube extension. This application will help you alter the font size based on your requirement.

Reference
https://theserif.net/fonts/change-font-size-on-youtube/

---

Otherwise, I thought in the player.css file,
https://github.com/code-charity/youtube/blob/master/js%26css/extension/www.youtube.com/appearance/player/player.css

at line 139

VIDEO TITLE IN FULLSCREEN

--------------------------------------------------------------*/
html[it-hide-video-title-fullScreen='true'] .ytp-title-text > a,

---

perhaps in here this could be modified, I am not sure what can be done, or what .ytp-title-text is.
I think if that could be changed there.

[Panthror]

@joshhazelhurst123 Thanks for thinking along, but neither will help. The first is a standard zoom function every browser has, this does not only make the text bigger but also everything else and messes up the layout of Youtube. The second seems to be referring to the title not appearing when you mouse over the video while in full screen.

[joshhazelhurst123]

okay thanks @Panthror I have just added the extension and I have a better idea how it works. I can see how you can change the font style ie PT Sans, Poppins, under general.

I think if we can have an option for font size as a dropdown box under 'font' so the user can change the font from small, medium, large, extra large. I think that would be a good way to add that feature there. Just need to figure out how to do that. I can see the youtube api has lots of information.

I think it needs to be added above.

I am just trying to figure out where to make the necessary changes. I cannot see where the .html file is or where to add in the extra configuration change, any help or direction would be great from anyone. I would love to be able to figure this out. I am trying here.

[ImprovedTube]

hi! & thanks @Panthror @joshhazelhurst123! We didnt prepare this feature.

try:
#title h1 { font-size:300%)

#title h1 { font-size:100%)

[joshhazelhurst123]

thanks @ImprovedTube I guess that means adding the code below into satus.css ???

#title h1 { font-size:300%)

#title h1 { font-size:100%)

• I can make a pull request and add the 2 lines of code into satus.css

[ImprovedTube]

hi! @joshhazelhurst123
satus.js is used for our menu only yet.

the 300% are 1.5x, the 100% are 0.5x
there can be a toggle in the menu/skeleton appearance: details: "title-size". this could be a drop-down or a slider allowing any input. Our feature's code is in the folder js&css.

For convenience we write all our bool variables (on/off toggles) to the element before the DOM loaded, so some things work adding CSS only (and a variable value could also be set. But not yet dynamic values (like sliders), so we should just add it with JS including any size. (this could equally be part of themes: custom)
(edited)

[joshhazelhurst123]

thanks @ImprovedTube
yes I see, in --> general.js
youtube-master\js&css\extension\www.youtube.com\general

I can see /*--------------------------------------------------------------

FONT

--------------------------------------------------------------*/

• I think here we can add the JS for title-size.

(youtube-master\youtube-master\js&css\web-accessible\www.youtube.com and here is the themes.js file. I guess custom could be made here, if the changes were to be made here).
............................
I think I can understand the logic here, I definitely would need some help translating this into code and making it work with the extension. I like the idea of a drop-down box with sizes, like you said the slider is dynamic so I think the drop down box would be great. I would like to be able to make the necessary changes. I think a changelog would help this project out as well. Cheers.

[ImprovedTube]

hi! @joshhazelhurst123 sorry i forgot to click comment (send) earlier

A slider called title_size could be added in our section appearance : details https://github.com/code-charity/youtube/blob/master/menu/skeleton-parts/appearance.js (check https://github.com/code-charity/youtube/blob/master/menu/skeleton-parts/player.js for another slider)

Then the feature code can be added in one of our javascripts running on youtube (such as https://github.com/code-charity/youtube/blob/master/js%26css/web-accessible/www.youtube.com/appearance.js )

if (ImprovedTube.storage.title_size) document.styleSheets[0].insertRule(`#title h1 { font-size: ${ImprovedTube.storage.title_size * 2}px; }`, 0);

[Panthror]

@ImprovedTube
If the slider was put in those javascripts, wouldn't that only make the text on a page with a video playing bigger?
Because that wouldn't solve my problem, which is that the text on the "overview" pages, such as Home; Subscriptions and search results is just a bit too small to read on my 31" TV from an 8 foot distance*. At that range I'd be happy with a size of about 125% - 150%, to solve my home-viewing issue.
This would also somewhat benefit my voluntary work, as those TVs are bigger than mine, so 150% might make it readable. However they are also a lot further away, so having the option to go twice the size, or bigger, would be a great help. What it comes down to, regarding this, is that anyone should be able to point to the video they want played from anywhere in the church-hall for sing-along events. Once the video plays there's no issue as Youtube provides subtitles with up to 400% font size, which is easily readable, even from the back of the hall.

(*=This is using the biggest font currently on offer in the extension.)

P.s. Once the changes to the correct javascripts have been made, will the extension update automatically or do I have to do something in order to get the changes?

[ImprovedTube]

hi! @Panthror, yes, we can test more css rules like:
or html, body { font-size: 50px; !important;}
or #dismissible, #below, #secondary, ytd-search { font-size: 150%; }
or #title, h1, h2, h3, h4, h5, h6 { font-size: 150%; }
( And we already have this script to add multiple rules at once with dynamic values https://github.com/code-charity/youtube/blob/master/js%26css/web-accessible/www.youtube.com/themes.js
even at most just two of them are used by our the custom theme option yet. )

Testing extension edits: Chrome://extensions can be loaded unpacked (like the current version from github) and edited.
while changes to the "content scripts" require extensions to click reload there (, so that one might wants a hotkey for that
https://github.com/code-charity/youtube/wiki/Contributing#developer-convenience-efficiency-methods. )

While our "custom css"-feature is missing in the current version: #1658 (=can be fixed easily for everyone!).

And you can also always try it as uBO rules (can use chatGPT or anything to convert conveniently from or to CSS.)
( can also already try css rules on any side with another extension like our dark mode extension https://chromewebstore.google.com/detail/dark-mode/declgfomkjdohhjbcfemjklfebflhefl)
But especially the element selector, slider of uBO helps when simply selecting a single element at a time ( the browser's right click: inspect opens the whole DOM, vs. right click: "block" (with uBO) will help to focus on one at a time )

---

In short: Thanks for caring @joshhazelhurst123 @Panthror! - While this mess can fill all these lines in English, it is simple and you know more than enough already. And it's shocking, if nobody in the world just organizes that as a team (and much more). (If not us then nobody?!) - Check out this extensive feature: https://github.com/gijsdev/ublock-hide-yt-shorts/blob/master/list.txt - This blocks every different way Youtube might shows shorts on both www.youtube.com and m.youtube.com too. ( This is efficient, since CSS is declarative programming and there is high demand for this. Still once you are there as an author you might get bored to maintain it even if there are many users and chances are since Feburary (last update) youtube changed require to add a line or a few. Also users might not copy&paste that manually again already. There already was a project to automatically load updates of such a set of rules (https://github.com/letsblockit/letsblockit) but it ended again already)

• So the best conclusion might be: https://github.com/code-charity/crowd-fixes & [collab/coop?] Dear fellow developers of parallel projects (youtube.com, <video> . . .) #1881
  (compare: Remove YouTube Playables (Games) #2505 (comment) )

[Panthror]

@ImprovedTube Right... I have no idea what any of that means.
I'm not a developer, or programmer, or something along those lines, I'm just a user who likes to customize my user experience with tools made available to me by others, such as the 'Improve Youtube!' extension. Using this extension I noticed there wasn't a font size changer where I could use one, so I clicked the "Wish/Idea" button in the footer. That led me here, which isn't quite what I expected. I thought I was just submitting an idea for future updates or versions, not a site where people are actively thinking along and trying to come up with solutions.
So while I'm grateful for your contributions, I have no clue what to do with those lines of code. I also wouldn't know how to extract the files from the extension, nor how to edit them without screwing up the program. So an explanation on how that all works or a beginner level tutorial would be welcome. Like I asked in my previous post: Is there anything I need to do? And please explain in detail what it is and how I do it, or give links to pages/sites with that information.
Much thanks!

[joshhazelhurst123]

Hi @Panthror I would call this gathering user requirements part of the software development life cycle. I believe I understand what you are saying and what you are asking for. That is 1/2 of the work completed. It's just putting the code together part.

I am happy to write the code with someone, I have a better idea how the program works, and I can see where the code is. I just don't know how to exactly change the css and javascript in a way that @Panthror would like. @ImprovedTube if we could work together that would be really great. I think @Panthror would like a drop down list where you can change the font size up to 400%. So the title is easy to read at a distance, like he say's, when he is in church and he needs to read the youtube video title. So being able to make it larger is what he is after.

If I can figure out how to code this, hopefully, @ImprovedTube could help me, and the we can submit a pull request and update the program.