0

I am trying to build an iOS app with Japanese text and I want to display some Furigana over my Kanji. Meaning I need to show ruby text.

I am using SwiftUI and have absolutely zero knowledge of UIKit.

I have read that there are some ways to make this possible in UIKit, however I am still a rookie that started with SwiftUI and still have a lot to learn.

So my question is: is it even possible in SwiftUI? If not, is there a way to connect something from UIKit to make this work?

Thanks a lot in advance! Have a wonderful day :)

niklevenets
  • 21
  • 3
  • See https://stackoverflow.com/questions/31009855/is-it-possible-to-type-in-furigana-and-ruby-characters-using-unicode. I expect this is impossible with stock tools. You would probably need to implement it by hand. This is likely a great deal of work, requiring CoreText at a minimum. I doubt UIKit can do it. Best of luck; it's a very interesting problem and would certainly teach you a lot about text layout. But I doubt there's an easy solution (unless there's a library somewhere on github that happens to do it). – Rob Napier Jun 16 '22 at 03:49
  • Does this answer your question https://stackoverflow.com/a/71122383/12299030? – Asperi Jun 16 '22 at 04:47
  • I came across this library on github: https://github.com/JustinWhiteDeveloper/laughing-octo-adventure if this does not address your needs, maybe some of its ideas can useful to create your own furigana lib. – workingdog support Ukraine Jun 16 '22 at 08:17

1 Answers1

0

You can use an NSAttributedString with kCTRubyAnnotationAttributeName to "add" the furigana on top of the kanji. There are lots of answers on StackOverflow about this. Here is one: https://stackoverflow.com/a/54294243/532368

The problem is that SwiftUI Text won't work with NSAttributedString, so you need to create a UIViewRepresentable that uses a UILabel to display the attributed string with the ruby annotation correctly. You can find an example (and explanations) in the Attributed Strings with SwiftUI article by The SwiftUI Lab.

That should give the desired result and allow you to display the furigana on top of the kanji.

enter image description here

Update: I haven't tried, but it seems the ApolloZhu/RubyAttribute project on GitHub provides the solution you need as a library.

Mokkun
  • 1,796
  • 1
  • 23
  • 32