We can use text zoom on the whole page, but I don’t need/want the generator page to be bigger, just the code itself. Having separate control over this would be great. My page is designed to look best at a certain kind of zoom level, so I need to keep changing back and forth if I want to see how it looks, know what I mean?
Okay, it’s not very accessible for non-technical users, but for now I’ve just added
localStorage.editorFontSize
. The default value is currently 12. So you can open the browser console withCtrl+Shift+J
and then type/paste this:localStorage.editorFontSize = 10
And then refresh the page, and you should see that the font size has decreased. And of course you can try:
localStorage.editorFontSize = 14
To make the editor text a bit bigger.
You noted it in your question, but since others may find this via a web search, I’ll emphasize that you can also use the built-in browser zoom by holding
Ctrl
and then pressing the+
sign or the-
sign on your keyboard. But as noted that will also resize the output area, not just the editors.Oh great! Thanks!
As is my way, I’ve made a little bookmarklet for people to use to let them do this easier. Make a bookmark, then change its address to:
javascript: if (window.location.host === "perchance.org") { var old_size = localStorage.editorFontSize; var new_size = prompt("What size do you want the code in the editor to be?", localStorage.editorFontSize || ""); if (new_size && new_size !== old_size) { localStorage.editorFontSize = new_size; if (confirm("Font size set. Would you like to refresh the page to see the changes?")) { window.location.reload(); } } } else if (confirm("Would you like to open perchance.org?")) { alert("Use this bookmarklet again when it loads."); window.open("https://perchance.org"); } void (0);
If not on perchance, opens perchance. If on perchance, asks for a font size, sets it, and optionally refreshes the page. 👍