This is a custom style that limits the width of meaning/reading explanations on lessons and reviews to 600px (or more precisely 37.5rem), making them a little easier to read.
click on the “Install with Stylish” button if you have their extension installed
click on the “Install style as userscript” link near the bottom of the page if you have a userscript extension such as Tampermonkey installed [edit: if you don’t see this link, you may be seeing a different version of the site - more details on the different site versions here]
Customisation
You can customise the max width using the “Customize” button on Stylish/userstyles.org.
Why?
By default, the info panel on lessons and reviews spans almost the full width of your window. For windows larger than around 800px, this results in a sub-optimal reading experience, particularly for meaning and reading explanations. You can read more about optimal text element widths here. This is also an accessibility issue.
Code
The code can be found both on the release page and on my Nihongo scripts repo. The userscript version on Stylish is automatically generated by the site - I didn’t write the old-school JavaScript code!
I’ve shipped an update to this style. It’s almost completely rewritten to work better for all the important contexts I could think of:
radicals, kanji and vocabulary
lessons before the quiz, lesson during the quiz and reviews
any screen size
The first version only really worked for lessons pre-quiz, and later versions that covered more contexts still had various quirks that I’ve now ironed out. Should now be good at most screen sizes
Let me know if you spot anything that doesn’t look quite right/optimal!
The update can be installed by going back to the userstyles.org page and clicking on the install link again
Thank you very much for making this script, @yndajas.
So far, I haven’t noticed anything off with the lessons using your script. In case I do, I’ll inform you about it.
Just did some lessons and noticed the width keeps changing between the sections, especially when the context sentence is longer than usual it basically goes to the full width. Is there a way to have it in a fix width and have the text wrapped?
You mentioned in the post a way to limit the width but I couldn’t find the customize button in the link
Just did some lessons and noticed the width keeps changing between the sections, especially when the context sentence is longer than usual it basically goes to the full width. Is there a way to have it in a fix width and have the text wrapped?
Would you be able to provide some screenshots of where you’re seeing unwanted behaviour, and let me know what you’d expect? The width does currently change between the sections with and without explanations, because it’s basically as wide as it needs to be for each section and no wider. For the sections with explanations (meaning/reading), it should be the same width all the time unless there are any really short explanations with only one line of less than 600px
I didn’t really optimise it for other sections beyond fitting the content since I never really use them, but I’m happy to make some adjustments. I might be able to set those sentences to wrap if I can access some examples
You mentioned in the post a way to limit the width but I couldn’t find the customize button in the link
Annoyingly, it looks like Stylish/userstyles.org are running some A/B testing on their site. I just opened the site in an incognito window and it looks very different, and has no clear way of installing this as a userscript (locking you into using their extension )
If you’re seeing the first image, the customise button is at the top next to a cog. If you’re seeing the second image, the cog is there on its own without a text label
I’m not 100% sure whether the customise button affects the userscript install or just the install via their extension - let me know if it doesn’t work for you
If you want to install this as a userscript and are seeing the version of the site in the second image, I have found one way to load the other version of the site. If you install a cookie editor like EditThisCookie, you can change the split_test_version cookie from nextjs to app50. I can provide more detailed instructions if needed
Cookie that determines which version of the site you see
Is what you’d like as simple as this? This is just setting the maximum width of the context sentences panel to the same as the meaning/reading explanations. As you can see, it automatically wraps the second sentence in Japanese. Let me know if this would work and I can push an update
Sorry for the delay - been a bit busy lately! I’ve updated the style to set the max width on context sentences in lessons. I need to wait a few hours until I have vocab reviews to check the CSS selectors for context sentences there - will update when I can!
Let me know if anything doesn’t look right, or if there’s anything else that would improve this
)
