Install the Stylus browser extension or equivalent
Open the UserStyles.world page linked above and click on the install button
Why?
By default, the explanations can grow quite wide depending on the size of your browser window. At a certain width, it gets a little harder to read paragraphs of text, so it’s generally a good idea to set a sensible limit. You can read more about optimal text element widths here. This is also an accessibility issue.
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
I’ve just updated this userstyle to work with the latest iteration of WaniKani. I’ve only checked reviews and vocab lesson explanations, not lesson quizzes or non-vocab lessons, so let me know if you see anything wonky, and I’ll update if/when I see issues
A few notes:
I upped the max width from 600px to 800px, which still seems reasonable, but I’m open to persuasion/could look into making it customisable like before
the code is a lot simpler than before, so it should be easily modifiable with some basic CSS knowledge
it’s now hosted on UserStyles.world and I recommend using the Stylus extension - these appear to be the new standards for userstyles. I’ll remove the old Stylish/userstyles.org release shortly
)
