Furigana On-Hover Fixer

migaku-furigana-on-hover-fix

// ==UserScript==
// @name         Furigana Horizontal Fix
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Fix furigana display on hover
// @match        *://*/*
// @grant        none
// @run-at       document-idle
// @author       825i
// ==/UserScript==

(function() {
    'use strict';

    const cssRules = `
        .migaku-token:hover,
        .migaku-token.-mgk-hover:hover {
            position: relative !important;
            display: inline-block !important;
            padding-top: 14px !important;
        }

        .migaku-token:hover .migaku-reading,
        .migaku-token.-mgk-hover:hover .migaku-reading {
            position: absolute !important;
            top: -13px !important;
            left: 12px !important;
            width: 100% !important;
            text-align: center !important;
            white-space: nowrap !important;
            display: block !important;
        }

        .migaku-token:hover .migaku-reading rt,
        .migaku-token.-mgk-hover:hover .migaku-reading rt {
            display: inline-block !important;
            position: static !important;
            text-align: center !important;
            white-space: nowrap !important;
            font-size: 0.8em !important;
        }

        .migaku-token:hover .migaku-fragment,
        .migaku-token.-mgk-hover:hover .migaku-fragment {
            display: inline-block !important;
        }
    `;

    function injectStyles() {
        let style = document.createElement('style');
        style.textContent = cssRules;
        document.head.appendChild(style);

        document.querySelectorAll('*').forEach(el => {
            if (el.shadowRoot) {
                let shadowStyle = document.createElement('style');
                shadowStyle.textContent = cssRules;
                el.shadowRoot.appendChild(shadowStyle);
            }
        });
    }

    injectStyles();

    const observer = new MutationObserver(mutations => {
        for (const mutation of mutations) {
            if (mutation.addedNodes && mutation.addedNodes.length) {
                for (const node of mutation.addedNodes) {
                    if (node.nodeType === Node.ELEMENT_NODE &&
                        (node.shadowRoot || node.querySelector('.migaku-token') ||
                        (node.classList && node.classList.contains('migaku-token')))) {
                        injectStyles();
                        return;
                    }
                }
            }
        }
    });

    observer.observe(document.body, { childList: true, subtree: true });
    setInterval(injectStyles, 3000);
})();

A very sleepy and otherwise horrible attempt to fix the on-hover vertical furigana display on some sites using the Migaku plugin.

Not intended as a permanent solution.