Start Learning Japanese in the next 30 Seconds with
a Free Lifetime Account

Or sign up using Facebook

Making Japanese Text on Flashcards Look Better

Moderators: Moderator Team, Admin Team

mmmason8967
Expert on Something
Posts: 758
Joined: January 7th, 2012 12:24 pm

Making Japanese Text on Flashcards Look Better

Postby mmmason8967 » January 2nd, 2014 10:32 pm

The Japanese text on the front of flashcards doesn't look very good in my opinion. The problem is that the stylesheet that controls the appearance of the text sets a font weight of 600. Normal text has a weight of 400 and bold text has a weight of 700, so 600 means something like "bolder-than-normal but not completely bold". I know that JPod101 likes the Mac, and Macs are very good at font rendering, so the result probably looks quite nice on a Mac. On Windows and Linux, though, what happens is the browser tries to render the bolder-than-normal font by smearing the characters horizontally and the result is, I think, rather ugly and hard to read.

This is what the kanji look like on a Windows or Linux machine running Firefox. As you can see, the first two characters are pretty difficult to make out; even on the third character it's hard to be sure whether the second horizontal line from the top touches the short outer vertical strokes or not:-

Image

Firefox allows me to create a User Stylesheet that I can use to override the JPod101 stylesheet. Here is a screenshot done on a Linux machine showing how much clearer the font becomes when it is displayed at normal weight (instead of the specified font-weight of 600) :-

Image

I think this shows that it would be better to remove the "font-weight: 600" setting from the flashcard stylesheet, so I'd like to request that this is done. The selector where the setting is made is ".fc_content_wrapper.front .source".

Once you've created a User Stylesheet you can make other changes. In the next screenshot I've changed the font to "Kozuka Gothic Pro R", a Japanese font that I have installed on my Windows 7 computer. I've also increased the font size very slightly:-

Image

...and this one uses another Japanese font, "EPSON 教科書体M", with the font-size changed to be about 20% larger than specified in the flashcard stylesheet. I think that this one is my favourite font for flashcards:-

Image

If anyone would like to set up a User Stylesheet but doesn't know how to do it, please reply below and I'll post instructions on how you do it.

And JapanesePod101, can you please turn off the "font-weight: 600" settting?

マイケル

community.japanese
Expert on Something
Posts: 2704
Joined: November 16th, 2012 8:54 am

Re: Making Japanese Text on Flashcards Look Better

Postby community.japanese » January 10th, 2014 5:39 am

マイケルさん、
Thank you very much for the detailed (and well analised) report!
I'll forward your post to the tech team and ask them to have a look.
It's really helpful and it's nice of you to give us a complete technical analysis. Much appreciated! :D
(It's something I'd never be able to as I'm rubbish in IT :mrgreen: )

Natsuko (奈津子),
Team JapanesePod101.com
Get 40% OFF

Return to “Technical Support”