(2016-03-15, 3:42 pm)jmignot Wrote: Thank you for these explanations. The table in the blog is quite clear. However, I still have a problem with the way  kanji are displayed in the koohii site.

For instance, the blog mentions that the kanji 遜 was added to the jouyou list in its non-simplified form, with two drops in the "road" primitive. This is also how it is now displayed one line above in my browser (Firefox).
However, if I go to the RevTK site and display this character in  "study" mode, it appears with only one dot, both in the standard display font, and in the alternate font (with stroke order) which is triggered when I hover the pointer over the character.

This is the kind of inconsistency I had in mind in my original post. I do not quite understand where it comes from and how to fix it.

The forum uses Open Sans by Google. This is a web font with up-to-date glyphs.

RevTK specifies several Mincho-style fonts, in this order:

1. Hiragino Mincho Pro
   
2. ヒラギノ明朝 Pro W3
   
3. ＭＳ 明朝
   
4. ＭＳ Ｐ明朝
   
5. serif
   

I am guessing you have a Mac, because "Hiragino Mincho Pro" comes with OS X and uses the old JIS X 0208:1997 glyph variants. Specifying "Hiragino Mincho ProN" would show the JIS X 0213:2004 glyphs.

This RevTK font choice was probably intentional to match the Remembering the Kanji print books as closely as possible and to avoid confusion for learners. EDIT: There's no clear reason why "Hiragino Mincho Pro" is specified for RevTK.

(2016-03-15, 11:50 pm)fkb9g Wrote: The forum uses Open Sans by Google. This is a web font with up-to-date glyphs.

RevTK specifies several Mincho-style fonts, in this order:

1. Hiragino Mincho Pro
   
2. ヒラギノ明朝 Pro W3
   
3. ＭＳ 明朝
   
4. ＭＳ Ｐ明朝
   
5. serif
   

I am guessing you have a Mac, because "Hiragino Mincho Pro" comes with OS X and uses the old JIS X 0208:1997 glyph variants. Specifying "Hiragino Mincho ProN" would show the JIS X 0213:2004 glyphs.

This RevTK font choice was probably intentional to match the Remembering the Kanji print books as closely as possible and to avoid confusion for learners.

You are right, I do have a Mac.

My current settings are as follows:

Proportional: Sans serif
Serif: Hiragano Mincho ProN
Sans serif: Hiragino Kaku Gothic ProN
Fixed width: Osaka-Mono
and I have the "Allow web pages to use their own fonts" checked

As I understand, the latter option likely overrides all others. I vaguely remember I selected it according to some discussion on this site, probably to retain the character style of the book, as you wrote.

I am currently using Stylish in Firefox to switch my display to a stroke order font when hovering the pointer over a kanji displayed in koohii. http://rtkwiki.koohii.com/wiki/Kanji_str...r_on_hover

Would it be possible to use the same trick to optionally switch the displayed character from Hiragino Mincho Pro to Hiragino Mincho ProN, for instance by hovering the pointer while pressing the alt key? I do not know the syntax used in the stylish script, though.

[fuaburisu]

Hi jmignot

All you want to do is target the main class that Koohii uses to set the Japanese fonts:

Code:

.cj-k { color:red; font-family: 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro W3', 'ＭＳ 明朝', 'ＭＳ Ｐ明朝', serif; }

I tested this briefly and the kanji appears red, showing it works. This works across the site, including flashcards. Replace the font selection to the one you need.

To target specific pages then you need to examine the HTML structure as I will explain below. For example for the flashcards you'd want something like:

Code:

#uiFcReview .cj-k { color:blue; }

For the Study / story edit area this should work:

Code:

#my-story .cj-k { color:blue; }

If you include the first example, it will apply first, and then the next examples will override in specific pages (due to the higher priority element id selector #likethis.

--

To do this type of "mods" in general you'd want to use the developer console in Google Chrome , or install Firebug in Firefox. You can toggle this developer pane with F12. You can select an element by pressing Ctrl Shift C , and then browse the DOM (Document Object Model) tree view on the left side and note the CSS rules on the right side.

As you can see the elements in the page are highlighted when you pick elements in the DOM tree. On the right side, double click to edit the CSS rules to see what happens. When you see a change you like, then make it permanent by adding it to Stylish.

@Fabrice: I think it'd be better if you just changed it from Pro to ProN by default like mentioned here. There is no reason to use fonts that follow the outdated standard.

(2016-03-15, 3:42 pm)jmignot Wrote: and in the alternate font (with stroke order) which is triggered when I hover the pointer over the character

That's because the stroke order font hasn't been updated in about 2 years.

(2016-03-16, 5:13 am)fuaburisu Wrote: [content deleted] --

To do this type of "mods" in general you'd want to use the developer console in Google Chrome , or install Firebug in Firefox. You can toggle this developer pane with F12. You can select an element by pressing Ctrl Shift C , and then browse the DOM (Document Object Model) tree view on the left side and note the CSS rules on the right side.

As you can see the elements in the page are highlighted when you pick elements in the DOM tree. On the right side, double click to edit the CSS rules to see what happens. When you see a change you like, then make it permanent by adding it to Stylish.

Thank you for these detailed instructions. I have to admit that I am not familiar with CCS and I should first learn a bit how it works.

In fact I am not too fond of customizing this site in general. My problem in the present case was just to avoid the seemingly random appearance of new or old glyphs for some characters. The fine tuning you suggest is one possibility to enforce an appropriate font, but I would still be happier if I could implement a solution like the one I suggested, namely displaying one or the other form by hovering the pointer, if possible without losing the option to also toggle the "stroke order" font. What I do not know is how to write a Stylish script for that, in particular with the use of a modifier key.

[fuaburisu]

Here is a proof of concept, using the :hover selector to apply the css rules when the element has "mouse over". You can see it works when the background is yellowish and the kanji in dark red color.

You'll want to adapt the font selection to the one you want on "mouse over":

Code:

/* this applies by default */
.cj-k {
  color:red;
}

/* this applies in the review flashcards */
#uiFcReview .cj-k {
  color:blue;
}

/* this applies during mouse over */
.cj-k:hover,
#uiFcReview .cj-k:hover {
  color:#400;
  background:#ffd;
  font-family:"HiraKakuPro-W3", "Hiragino Kaku Gothic Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "游ゴシック", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", sans-serif;
}

If you want on top of that to toggle the stroke order, then I think that would require Javascript.

(2016-03-17, 5:32 am)fuaburisu Wrote: Here is a proof of concept, using the :hover selector to apply the css rules when the element has "mouse over". You can see it works when the background is yellowish and the kanji in dark red color.

You'll want to adapt the font selection to the one you want on "mouse over":
[code removed]
If you want on top of that to toggle the stroke order, then I think that would require Javascript.

Sorry if I sound ignorant (which I am actually), but where am I supposed to enter this code in the first place?

(2016-03-17, 3:18 pm)jmignot Wrote:

(2016-03-17, 5:32 am)fuaburisu Wrote: Here is a proof of concept, using the :hover selector to apply the css rules when the element has "mouse over". You can see it works when the background is yellowish and the kanji in dark red color.

You'll want to adapt the font selection to the one you want on "mouse over":
[code removed]
If you want on top of that to toggle the stroke order, then I think that would require Javascript.

Sorry if I sound ignorant (which I am actually), but where am I supposed to enter this code in the first place?

Make sure the Stylish add-on is activated. Then go to Add-ons Manager > User Styles > Write New Style and paste the code in there.

[fuaburisu]

Yeah sorry I thought you meant that you didn't know how to write the code, but maybe you knew how to use Stylish.

In Google Chrome I just click th Stylish button, and select the last option "Write style for: (website url)".

Make sure "Applies to" is set to "URLs on the domain" and then "kanji.koohii.com" (for example).

Edit the code in the textarea.

Enter a name, click Save.

Usually every time you click Save you see the changes in real time in the other windows of the affected site / domain.

And later just go to Kanji Koohii for which you wrote a style and click the Stylish button and it should list the style you saved, and then click "Edit" to continue editing it.

Thank you. I will try this.

I have defined two different styles, one with Hiragano Mincho ProN and the other with the stroke order font.
I need to go to the Stylish preferences to activate one or the other. Not so straightforward as pressing the alt key, but still acceptable.
To get this to work, I must have the "Allow Web pages to use their own fonts" box checked in the Firefox settings.

[fuaburisu]

You mean two styles that each has a "mouse over" (:hover) option?

Yes for a third font we'd need something like a :keydown css selector but that doesn't exist AFAIK

And yes you need to let the default of allowing sites to manage the fonts otherwise the browser does essentially the same as you do with Stylish and enforces their own mini styles transparently over all the web pages.

(2016-03-19, 5:16 am)fuaburisu Wrote: You mean two styles that each has a "mouse over" (:hover) option?

Exactly. I just duplicated this script http://rtkwiki.koohii.com/wiki/Kanji_str...r_on_hover and changed the font name.
Perhaps in the future, the option to toggle the display font between ~Pro and ~ProN could offered as one of the settings of this site ?

It's not necessary to specify a font explicitly. You can just specify serif, and the browser will display an appropriate Mincho-style font. If you specify sans-serif, you'll see an appropriate Gothic-style font.

This works because RevTK already specifies the lang attribute for kanji, so the browser knows to use a Japanese typeface. Here's a sample web page that demonstrates glyph variants for Japan, China, and Taiwan.

I would suggest removing the list of Japanese fonts from the RevTK CSS and simply specifying serif, as Mac OS X defaults to Hiragino Mincho ProN and Windows defaults to MS Mincho—no need to define them explicitly. The lang attribute has been around since the HTML 4.01 Specification (published 24 December 1999) so it should work for all browsers.

(2016-03-17, 5:00 pm)fuaburisu Wrote: Yeah sorry I thought you meant that you didn't know how to write the code, but maybe you knew how to use Stylish.

In Google Chrome I just click th Stylish button, and select the last option "Write style for: (website url)".

Make sure "Applies to"  is set to "URLs on the domain" and then "kanji.koohii.com" (for example).

Edit the code in the textarea.

Enter a name, click Save.

Usually every time you click Save you see the changes in real time in the other windows of the affected site / domain.

And later just go to Kanji Koohii for which you wrote a style and click the Stylish button and it should list the style you saved, and then click "Edit" to continue editing it.

I tried following the instructions here: http://rtkwiki.koohii.com/wiki/Kanji_str...r_on_hover, but could not get the stroke order to appear when browsing the study pages (for example, this page doesn't show the stroke order: http://kanji.koohii.com/study/kanji/1).

I know I installed the Kanji stroke order font, because I can use it in other applications. I pasted this code into Stylish:

@-moz-document domain('kanji.koohii.com'), url-prefix('http://kanji.koohii.com') {
.fcData-kanji:hover {font-family: "KanjiStrokeOrders" !important }
}

I even saw the Stylish icon in the tray turn red and blue when I tab to the review page, but turn black and white when I go to other Firefox tabs, which tells me that Stylish knows that the script is active. But still, I can't see the stroke order.

Any ideas? I've seen some previous posts mention something about allowing web sites to use their own fonts, but I didn't know if that setting was relevant, nor could I find where I can set that. Any ideas how to fix this?

[fuaburisu]

Try without the moz-document-thingy, because extensions like Stylish already provide the option to apply the styles to a domain or subdomain or even a single page of your choice.

Also ".fcData-kanji" is a class used on the Review flashcards.

Use the general class .cj-k instead, which is applied throughout the site to all the kanji.

Something like this:

Code:

/* this applies during mouse over */
.cj-k:hover, #uiFcReview .cj-k:hover {
  color:#400;
  background:#ffd;
  font-family:"KanjiStrokeOrders";
}

"color" and "background" are simply for debugging. Seeing the color change just makes sure your style applies. Once you know it applies, if it still won't switch the font you know you misspelled the font, or don't have it installed; .. but you know the style does apply. Once you're happy, remove the unwanted color/background properties.

(2016-03-24, 7:20 pm)fuaburisu Wrote: Something like this:

Code:

/* this applies during mouse over */
.cj-k:hover, #uiFcReview .cj-k:hover {
 color:#400;
 background:#ffd;
 font-family:"KanjiStrokeOrders";
}

This worked on both the study and review pages. Thanks.