How to show a Kanji stroke order tooltip for each Kanji character being right-clicked?

Question

I have installed KanjiStrokeOrders font on my machine to show the Kanji stroke order.

Objective

I want to create a web page for my own purpose of learning Japanese. When HTML pages are viewed on the browser, I want to be able to show the stroke order of a single Kanji character being right-clicked via a tooltip with KanjiStrokeOrders font family and of course with a bigger font size.

My Attempt

The following code is my attempt but it just toggles the font whenever I hover the region bounded by the body. The result is annoying because,

the space is dynamically changed so it produces blinking that is not eye-friendly,
I cannot select just a single character,

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script language="JavaScript">
        function toggleFont() {
            var _font = document.getElementsByTagName('body')[0].style.fontFamily;
            if (_font != 'KanjiStrokeOrders') {
                document.getElementsByTagName('body')[0].style.fontFamily = 'KanjiStrokeOrders';
                document.getElementsByTagName('body')[0].style.fontSize = '120px';
            }
            else {
                document.getElementsByTagName('body')[0].style.fontFamily = 'Arial';
                document.getElementsByTagName('body')[0].style.fontSize = '12pt'; // return to the normal font
            }
        }
    </script>
</head>


<body onmouseover="toggleFont();" onmouseout="toggleFont();">

    僕は合気道が好きだ。I love Aikido.

</body>

</html>

Questions

How to show a tooltip with KanjiStrokeOrders font whenever a single character is right-clicked and the tooltips vanishes when the mouse is released?

why do you want to use Right-click? in web its not good practice to use right-click — Tawfiq abu Halawah, May 12 '16 at 16:21

score 2 · Accepted Answer · answered May 12 '16 at 16:27

2

to interact with each letter alone you need to have each letter in its own tag like this:

<span>僕</span><span>は</span><span>合</span><span>気</span>

then add the event to each span you can write a small javascript to put each character in its own span

I suggest putting this on character hover. or on click and hold.

answered May 12 '16 at 16:27

Tawfiq abu Halawah

1,214
1
12
20

1

But tagging for every single Kanji seems to be a nightmare. The HTML code becomes cluttered. – Second Person Shooter May 12 '16 at 16:29
1

don't do it manually do it using a javascript check this question http://stackoverflow.com/questions/21896591/wrapping-each-character-in-a-span – Tawfiq abu Halawah May 12 '16 at 16:32
1

its your only solution if you want to interact with each letter alone – Tawfiq abu Halawah May 12 '16 at 16:32

How to show a Kanji stroke order tooltip for each Kanji character being right-clicked?

Objective

My Attempt

Questions

1 Answers1