Mokuro: Read Japanese manga with selectable text inside a browser

I did manage to open the html files using some android html ide (sounds dreadful tbh), because you basically need to run a server as far as I understand. Other methods I haven’t tried, but that probably work just as well are running termux and then hosting the files in a temporary server, for example through python or whatever, and the one that could potentially work the best out of these is just hosting a regular, private server on a rented or otherwise machine and then connecting to that with your android device.

However, the default experience isn’t great. It’s quite hard to control and selecting text is annoying at best. So probably the best would be doing the server method from earilier (basically plex but for books) and then coding up a better android ready viewer for it.

As for the pdf, I just tried stuff like adobe acrobat reader, google drive reader etc etc, also the same annoying text selection issues. And you either don’t see the text and therefore you won’t know if it’s incorrectly parsed until you copy it out, or you have it overlayed, which isn’t the best. But it did work with those I think.

1 Like

So I played around with it a bit more and it’s reeeeaaally slow. Which is ok if you’re going to use it to make frequency lists for manga/novels (so you only need to run it once and you can save the results), but it pretty much rules out more on-the-fly applications.

1 Like

Does anyone read on their tablet? I recently got one and wanted to try reading manga on there so I moved all the mokura files (the _ocr, the html and the manga itself) onto my tablet but when I open the html, its just a blank screen. I flipped through a few pages and they were all blank but I noticed if I tap in the middle of the screen where speech bubbles would be at, just the text appears but nothing else

I’m trying to read this using the kiwi browser and I put the files under Android/data/com.kiwibrowser.browser/files/Download/

Does anyone have any ideas on how to fix this? All these files work fine when reading on my computer but can’t get them to work on the tablet.

Make sure the images are in the same place compared to the html than when you parsed the file, with the same name and all. But might not be easily possible.

1 Like

Are you able to separately open an image in the browser?

Does the browser show you the URL to the image when it’s open?

What about the HTML file?

Knowing the URLs for both should help troubleshoot.

The _ocr file isn’t needed for this, only the folder with the images and the HTML file.

1 Like

Unfortunately it sounds like they’re having the same issue I had here.

I haven’t played around with it to find a work around yet, but the issue seems to be related to how android opens the files into a different directory that the images aren’t in. At least it was for me.

I was going to try just installing Linux on my tablet thru andronix to see if that would be an easy fix or not. You had also mentioned a server but I haven’t yet looked into it much to figure out how.

Well, the easiest solution would be something like installing termux, a linux image into that, and then a server in that

1 Like

Server may not even be needed if Linux on Android can locate and open the files without screwing with the filepath like android does. I’ve only used Linux with computers not like that so I’d have to play around with it.

One thing I also hadn’t tried was creating an actual folder path where android opens the html to (com.android.externalstorage.documents/document) and placing the files there so they would be available. No idea if it would work.

I think I’ll try testing both out either this weekend or next to see if either work well or even at all.

I was able to open up the HTML files fine in kiwi browser although not sure how to get the images to open up in the browser instead of the gallery/photo apps.

However, I did find out how to fix my issue. I downloaded this local file server app here GitHub - Aquafina-water-bottle/LocalFileServerAndroid and followed the instructions under “usage”. Not sure why it works but opening the html inside of the local host fixes it somehow and now the images load & I can read all of my Mokuro’d stuff in there.

4 Likes

It’s a common safety thing. Browsers often don’t let you open certain files locally without serving it through a server. Your desktop browser does the same, just with fewer limitations.

3 Likes

Ooooh great find! In your link there’s another link to mokuro.moe that links to an app called Jidoujisho that’s pretty neat. It can read mokuro files, has an embedded ttu reader for epubs, anki support, and even video with subtitles though I haven’t tried that part yet. I uploaded my yomichan dictionaries without any issues.

It collects the mokuro files in the history page, making it look like a bookshelf of sorts, like how ttu reader does.

I’m going to reprocess my mokuro files with the fork for swipe support on mobile, but even the original mokuro processed works fine in it.

3 Likes

Thank you so much for this tool. I got it working on one of my machines and it’s a GAME CHANGER!
edit: I used pyenv in order to use older versions of Python

2 Likes

I was interested in searching japanese examples in manga volumes but I’m not good at programming, so is there any work going on to make it user-friendly? It would be really great.

I’m not currently working on any kind of UI for text search. I’d be surprised if no one else has, but I haven’t looked around.

Are you able to reach the minimum of installing Mokuro and running it on a manga?

What operating system do you use?

1 Like

The user-friendly side of it is that we are several users ready to help you step by step making it work :slight_smile: so hopefully it gets down to installing things, reading the messages it gives you, and a bit of copy pasting

2 Likes

I’m working on Windows. I’ve installed Mokuro and got .json files.

1 Like

I’m ready to work! I’ve done some things on Python but it was a looooong time ago. I have Notepad++ if it will help.

1 Like

Alright, nice :slight_smile:
I haven’t tried @ChristopherFritz 's Ruby version because I ported the code to Java, but I think it will be easiest for you to use his ruby version. @Gorbit99 I don’t remember if you’ve tried the Ruby version too or if you haven’t used the search function?

The code is in this post, search.rb:

Maybe those instructions can help, disclaimer, I haven’t tried myself

To run a Ruby function on Windows, you can follow these steps:

  • Install Ruby: If you haven’t already installed Ruby on your Windows machine, you can download the Ruby installer from the official website (https://rubyinstaller.org/) and run it to install Ruby.
  • Save the function in the post to a search.rb file
  • Open Command Prompt: Press Win + R, type cmd, and press Enter to open the Command Prompt.
  • Navigate to Script Directory: Use the cd command to navigate to the directory where your Ruby script is located. For example:
    cd C:\path\to\your\script\directory
  • Run the Script: Once you are in the directory containing your Ruby script, execute the script using the ruby command:
    ruby search.rb
    This will run the Ruby script, and you will see the output of your Ruby function in the Command Prompt.

Remember that you need to have Ruby installed and added to your system’s PATH for the ruby command to be recognized. If you encounter any issues, make sure Ruby is installed correctly and try restarting your Command Prompt after installing Ruby to refresh the PATH variable.

I don’t think this will work out of the box, we need also to extract the text first from your json files and to align your file structure so the script can search in the correct folders, but if you can already install ruby and see if it can run the script, it can be a first step.

3 Likes

Did you find a solution?

I didn’t have much time last days but I changed paths to my folders in search.rb and got this:

C:\Users\user>cd C:\Users\user\Desktop\Set7\Examples

C:\Users\user\Desktop\Set7\Examples>ruby search.rb
search.rb: --> search.rb
invalid Unicode escapeInvalid escape character syntax
  34  sorted_files_to_check.each do |file_to_check|
  36    IO.foreach(file_to_check) do |line|
  38    end
  39    next if matches.empty?
> 44    manga_folder = "C:\Users\user\Desktop\Set7\Examples\Manga\#{series}\#{volume}"
  62  end
search.rb:44: invalid Unicode escape (SyntaxError)
  manga_folder = "C:\Users\user\Desktop\Set7\Examples\Man...
                            ^
search.rb:44: Invalid escape character syntax
...s\user\Desktop\Set7\Examples\Manga\#{series}\#{volume}"
...   ^~~~~~~~~~~~~~~~~~~~~~~~~~~~

My search.rb

require 'naturally'

# This needs to be manually changed to whatever I want to search for.
search = /何.{0,3}今の/

def output_match(match, manga_folder, search)
  image_filename, line_text = match.split("\t")
  image_file = "#{manga_folder}/#{image_filename}.jpg"
  image_file = "#{manga_folder}/#{image_filename}.jpeg" unless File.file?(image_file)
  unless File.file?(image_file)
    puts "Cannot find image file: #{image_file}"
    puts 'Maybe its extension is not .jpg or .jpeg?'
    return ''
  end
  line_text_with_html = line_text.gsub(/(#{search})/, '<strong>\1</strong>').chomp
  "<li tabindex='0' onfocus='showImage(this, \"#{image_file}\")'>#{image_filename}: #{line_text_with_html}</li>\n"
end

base_folder = 'C:\Users\user\Desktop\Set7\Examples\_ocr'

output = ''

output += '<link rel="stylesheet" href="styles.css">'
output += '<script src="script.js"></script>'

output += '<div id="parent">'
output += '<div id="matches">'

current_series = ''

files_to_check = Dir.glob("#{base_folder}/**/*.txt")
sorted_files_to_check = Naturally.sort(files_to_check)

sorted_files_to_check.each do |file_to_check|
  matches = []
  IO.foreach(file_to_check) do |line|
    matches.append(line) if line =~ search
  end
  next if matches.empty?

  # puts file_to_check
  series, volume = file_to_check.sub("#{base_folder}/", '').sub(' Searchable Text.txt', '').split('/')

  manga_folder = "C:\Users\user\Desktop\Set7\Examples\Manga\#{series}\#{volume}"
  unless File.directory?(manga_folder)
    puts "Cannot find manga folder: #{manga_folder}"
    puts 'Implement checking other known locations.'
    next
  end

  if series != current_series
    output += "<h2>#{series}</h2>"
    current_series = series
  end
  output += "<h3>#{volume}</h3>"

  output += "<ul>\n"
  matches.each do |match|
    output += output_match(match, manga_folder, search)
  end
  output += "</ul>\n"
end
output += '</div>'

output += '<div id="page">'
output += '<a id="link" target="_blank"><img id="image" /></a>'
output += '</div>'

output += '</div>'

File.write('results.html', output)

And I made a folder Set7/Examples on my desktop. There are _ocr folder with .json files, Manga folder with OnePiece v105, search.rb and script.js and style.css.

2 Likes