Skip to content

feat: add support for converting Netflix-style ruby text to HTML#829

Merged
killergerbah merged 8 commits intokillergerbah:mainfrom
mcgrizzz:feat/ruby-text
Nov 24, 2025
Merged

feat: add support for converting Netflix-style ruby text to HTML#829
killergerbah merged 8 commits intokillergerbah:mainfrom
mcgrizzz:feat/ruby-text

Conversation

@mcgrizzz
Copy link
Copy Markdown
Contributor

This adds optional parsing of netflix style ruby text: https://partnerhelp.netflixstudios.com/hc/en-us/articles/215767517-Japanese-Timed-Text-Style-Guide

I encounter this a lot, I'm sure others do too. But the netflix style ruby text can look really messy when we don't parse it. Here's a visual example of the new behavior:

Convert Ruby: OFF (original behavior)

image image

Convert Ruby: ON + Render HTML: Render

image image

Convert Ruby: ON + Render HTML: Remove (This effectively removes the ruby)

image image

@mcgrizzz
Copy link
Copy Markdown
Contributor Author

Currently unable to push a fix due to github git operations being down... Will push when back up.

@mcgrizzz mcgrizzz marked this pull request as ready for review November 18, 2025 22:00
Copy link
Copy Markdown
Owner

@killergerbah killergerbah left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for doing this, this is super useful and a lot of people have requested this feature.
My main comment is that I think the setting and how it maps to behavior can be simplified:

  • Netflix-only because no other streaming service supplies word readings this way. See PageSettings.
  • If you turn it on, Netflix should render readings as ruby. If you turn it off, then it should do nothing.
  • I think the name of the setting could be clearer. Maybe something like "detect and display ruby." "Convert ruby text" sounds like you already have the ruby, and you need to convert it.

import { WebVTT } from 'vtt.js';
import { XMLParser } from 'fast-xml-parser';
import { SubtitleHtml, SubtitleTextImage } from '@project/common';
import { parseRubyText } from '../util';
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like this file didn't need to be changed

private _buildTextHtml(text: string, track?: number) {
let processedText = parseRubyText(text, this.convertRubyText);

if (this.subtitleHtml === SubtitleHtml.remove) {
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd like to avoid having to mix settings like this to achieve very specific behaviors. We already have a regex filter that would do the same thing as convert ruby text + remove html.
Instead, I think convert ruby text should just be a Netflix-specific setting that displays the ruby when enabled and does nothing when disabled. Let me know what you think.

@mcgrizzz
Copy link
Copy Markdown
Contributor Author

Thanks for the feedback.

  • Netflix-only because no other streaming service supplies word readings this way. See PageSettings.

That is true. Netflix is the only platform that actually provides readings in this format. The reason I didn’t want to scope the setting strictly under "Netflix" is that a lot of people (myself included) download subtitles from sites like jimaku that are in Netflix format, then watch them elsewhere (Plex, Crunchyroll, local files, etc.). In that workflow the playback source isn’t Netflix, but the subtitles still contain Netflix-style ruby.

Because of that, I’m a bit worried that putting this under Netflix-specific settings would make it harder to discover for those cases.

  • I think the name of the setting could be clearer. Maybe something like "detect and display ruby." "Convert ruby text" sounds like you already have the ruby, and you need to convert it.

Yup, totally agree.

I'd like to avoid having to mix settings like this to achieve very specific behaviors. We already have a regex filter that would do the same thing as convert ruby text + remove html.

Somehow I completely missed there was already a regex filter. That is a much cleaner solution.

@killergerbah
Copy link
Copy Markdown
Owner

Ah yeah you're right. I agree it shouldn't be a Netflix specific setting then. Can just keep it at the top level.

@mcgrizzz
Copy link
Copy Markdown
Contributor Author

mcgrizzz commented Nov 22, 2025

Just pushed the following changes:

  1. Remove specific handling in _buildTextHtml
  2. Remove unused import in subtitle-reader.ts
  3. Renamed convertRubyText boolean to convertNetflixRuby internally
  4. Renamed parseRubyText method to convertNetflixRubyToHtml to make it more clear what it is doing
  5. Setting Message changed from "Convert Ruby Text" to "Detect and Display Ruby"

@mcgrizzz
Copy link
Copy Markdown
Contributor Author

I've made those changes

The only issue is there's some unexpected behavior when you change the HTML remove/render settings with subtitles already loaded. The correct behavior occurs when you reload the subtitle though.

I guess this is because once subtitle-reader.ts processes the subtitle, it doesn't reprocess when the user changes the Render HTML or Display Ruby setting.

Examples:

[Render HTML: RENDER] + [Detect and Display Ruby: ON]

  1. Load subtitles
  2. Correct ruby text:(炭治郎たんじろう)ハア ハア…
  3. Set [Render HTML: REMOVE]
  4. You now see something like: (<ruby><rb>炭治郎</rb><rt>たんじろう</rt></ruby>)ハア ハア…
  5. Reload the subtitle with the same settings and you get the expected (炭治郎)ハア ハア…

[Render HTML: REMOVE] + [Detect and Display Ruby: ON]

  1. Load Subtitles
  2. You see the correct (炭治郎)ハア ハア…
  3. Set [Render HTML: RENDER]
  4. You now incorrectly still see (炭治郎)ハア ハア…

Obviously what I did with the useMemo is a bit hacky, but it did fix this weird toggle behavior. I'm happy to do whatever you think is best though.

Copy link
Copy Markdown
Owner

@killergerbah killergerbah left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For what it's worth I don't think the useMemo in App.tsx is a hack. The extension side might still need some help too but it's an existing bug.

Copy link
Copy Markdown
Owner

@killergerbah killergerbah left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you

@killergerbah killergerbah merged commit dc4328e into killergerbah:main Nov 24, 2025
1 check passed
@killergerbah killergerbah added this to the Extension v1.14.0 milestone Nov 24, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants