☰

Mokuro.moe Better Chrome's Translate

Better translation for mokuro.moe's html manga, also rotated vertical japanese text to horizontal when translating to other languages

  1. // ==UserScript==
  2. // @name         Mokuro.moe Better Chrome's Translate
  3. // @namespace    PlanetXX2
  4. // @version      2025-04-26
  5. // @description  Better translation for mokuro.moe's html manga, also rotated vertical japanese text to horizontal when translating to other languages
  6. // @author       You
  7. // @match        https://mokuro.moe/*.html
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=mokuro.moe
  9. // @grant        GM_addStyle
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // replace all .textBox p with .textBox span
  17.     // so that Google Translate can inline the text
  18.     // which in result, provides better translation
  19.     document.querySelectorAll('.textBox p').forEach(p => {
  20.         const span = document.createElement('span');
  21.         span.innerHTML = p.innerHTML;
  22.         p.parentNode.replaceChild(span, p);
  23.     });
  24.  
  25.     GM_addStyle(`
  26.     .textBox:hover:has(font) {
  27.     writing-mode: horizontal-tb !important;
  28.     }
  29.  
  30.     .textBox:hover span {
  31.     opacity: 100%;
  32.     display: table;
  33.     }
  34.  
  35.     .textBox:hover span:has(font) {
  36.     background-color: white;
  37.     width: fit-content;
  38.     }
  39.  
  40.     .textBox span {
  41.     opacity: 0%;
  42.     white-space: nowrap;
  43.     letter-spacing: 0.1em;
  44.     line-height: 1.1em;
  45.     margin: 0;
  46.     background-color: rgb(255, 255, 255);
  47.     }
  48.     `)
  49.  
  50. })();