Skip to content

yomihon/Furiganable

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

213 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Furiganable

Furiganable is a simple and flexible library for adding furigana (phonetic readings) to text components. Itโ€™s designed to be easy to use.

This library is heavily inspired by the android-compose-furigana library.

Features

  • Compatible with Compose Multiplatform (Android, iOS)
  • Compatible with both Material 2 and Material 3 libraries
  • Easily add furigana by using a simple predefined format, such as [ๆผขๅญ—[ใ‹ใ‚“ใ˜]].
  • Supports Localization

Variations

This library consists of three modules: compose-core, compose-m2, and compose-m3. Including just one of them is sufficient. Both compose-m2 and compose-m3 already include compose-core.

Module Recommended Description Use Case
compose-core - A minimal core module with no dependency on Material libraries. Requires passing additional parameters to components. Ideal for projects that avoid using Material libraries.
compose-m2 โœ… Designed for projects using the Material 2 library. Use if your project relies on Material 2.
compose-m3 โœ… Designed for projects using the Material 3 library. Use if your project relies on Material 3.

Images

Material 2
Android (> 28) Android (<= 28) iOS 18
Material 3
Android (> 28) Android (<= 28) iOS 18

API Reference

API Reference๐Ÿข

Limitations

To force isFallbackLineSpacing = false for furigana text, the library swaps Jetpack Composeโ€™s Text composable for an AndroidTextView in certain paths. As a consequence, some Text-related parameters are currently ignored.

Unsupported at the moment

  • TextStyle: textMotion
  • Text composable args: onTextLayout

If you depend on these APIs, the library may not yet meet your requirements. PRs welcome.

Known Issues

When using lineHeightStyle with any trim option other than LineHeightStyle.Trim.None, text with furigana becomes misaligned compared to text without furigana.

Usage

Using this library via JitPack

This fork is published through JitPack rather than Maven Central. JitPack builds the library directly from the Git commit or tag you specify.

  1. Add the JitPack repository:
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        mavenCentral()
        maven { url = uri("https://jitpack.io") }
    }
}
  1. Add the dependency for the module you want. Replace TAG with a tag name, commit hash, or main-SNAPSHOT.

Version Catalog

If you're using Version Catalog, add the following to your libs.versions.toml file:

[versions]
furiganable = "TAG"

[libraries]
furiganable-core = { module = "com.github.yomihon.Furiganable:compose-core", version.ref = "furiganable" }
furiganable-m2 = { module = "com.github.yomihon.Furiganable:compose-m2", version.ref = "furiganable" }
furiganable-m3 = { module = "com.github.yomihon.Furiganable:compose-m3", version.ref = "furiganable" }
dependencies {
    implementation(libs.furiganable-m3)
}

Gradle

Kotlin DSL

dependencies {
    implementation("com.github.yomihon.Furiganable:compose-m3:TAG")
}

Groovy DSL

dependencies {
    implementation 'com.github.yomihon.Furiganable:compose-m3:TAG'
}

Choose compose-core, compose-m2, or compose-m3 depending on which API surface you want.

Add component to your composable function

The format to add furigana is like, [ๆผขๅญ—[ใ‹ใ‚“ใ˜]]. To recognize the start and end positions of kanji, outer brackets are required.

Before

@Composable
fun SampleComponent() {
    // ...

    // I want to add furigana to this Text component
    Text(
        text = "ใ“ใ‚Œใฏ่ฉฆ้จ“็”จใฎๆ–‡ๅญ—ๅˆ—ใงใ™ใ€‚",
    )
}

After

@Composable
fun SampleComponent() {
    // ...

    // Replace Text component with TextWithReading component
    TextWithReading(
        formattedText = "ใ“ใ‚Œใฏ[่ฉฆ้จ“็”จ[ใ—ใ‘ใ‚“ใ‚ˆใ†]]ใฎ[ๆ–‡ๅญ—ๅˆ—[ใ‚‚ใ˜ใ‚Œใค]]ใงใ™ใ€‚",
    )
}

You can use localized string for text with furigana like below.

In strings.xml(ja),

<string name="sample_text">ใ“ใ‚Œใฏ[่ฉฆ้จ“็”จ[ใ—ใ‘ใ‚“ใ‚ˆใ†]]ใฎ[ๆ–‡ๅญ—ๅˆ—[ใ‚‚ใ˜ใ‚Œใค]]ใงใ™ใ€‚</string>

In your composable function,

@Composable
fun SampleComponent() {
    // ...

    // You can use localized string with furigana
    TextWithReading(
        formattedText = stringResource(R.string.sample_text),
    )
}

Customization

You can customize the appearance of the furigana text by passing additional parameters to the TextWithReadingCore, TextWithReading(m2), or TextWithReading(m3) components:

  • furiganaEnabled:
    Whether to enable furigana.
    If false, a normal text component is used.

  • furiganaGap:
    Space between the main text and the furigana.
    Defaults to style.fontSize * 0.03f if unspecified.

  • furiganaFontSize:
    Font size for the furigana text.
    Defaults to style.fontSize * 0.45f if unspecified.

  • furiganaLineHeight:
    Line height for the furigana text.
    Defaults to furiganaFontSize if unspecified.

  • furiganaLetterSpacing:
    Letter spacing for the furigana text.
    Defaults to -style.fontSize * 0.03f if unspecified.

Furigana Params

Examples

See demo app code for more examples.

License

Copyright 2026 turtlekazu

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

About

Compose Multiplatform library that enables adding furigana (phonetic readings) to text components easily

Resources

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Languages

  • Kotlin 98.9%
  • Swift 1.1%