HtmlAnnotator

Translation: 中文

HtmlAnnotator is an HTML rendering library based on Kotlin Multiplatform and Compose Multiplatform, with support for parsing CSS styles. It also supports the Android View system.

Features

• Supports custom tags and CSS parsers
• Freely replaceable default parsers
• Supports multiple sources of CSS styles: inline, internal stylesheets, and even external stylesheets
• Supports caching of conversion results
• Supports Jetpack Compose
• Written in Kotlin Multiplatform and utilizes Kotlin coroutines

Default parsers

Jetpack Compose

Html Tag

• i
• em
• cite
• dfn
• b
• strong
• blockquote
• ul
• ol
• li
• br
• p
• div
• h1
• h2
• h3
• h4
• h5
• h6
• tt
• pre
• big
• small
• sub
• sup
• center
• a
• img
• span

CSS Rule

• text-align

• font-size

• font-weight

• font-style

• color

• background-color

• text-indent

• text-decoration

View

Html Tag

• i
• em
• cite
• dfn
• b
• strong
• blockquote
• ul
• ol
• li
• br
• p
• div
• h1
• h2
• h3
• h4
• h5
• h6
• tt
• pre
• big
• small
• sub
• sup
• center
• a
• span

CSS Rule

• text-align
• font-size
• font-style
• color
• background-color
• text-indent
• text-decoration

Import

Published on mavenCentral

${LAST_VERSION}: (excluding 'v')

dependencies {
    // Jetpack Compose extension support, providing out-of-the-box display components and caching mechanisms
    implementation("io.github.ravenliao.htmlannotator:htmlAnnotator-compose-ext:${LAST_VERSION}")
    // Basic support for Jetpack Compose
    implementation("io.github.ravenliao.htmlannotator:htmlAnnotator-compose:${LAST_VERSION}")
    // View
    implementation("io.github.ravenliao.htmlannotator:htmlAnnotator-view:${LAST_VERSION}")
}

R8 / Proguard

This library doesn't require any specific Proguard rules to be configured, but you may need to add Proguard configurations for indirect dependencies like Kotlin Coroutines and ksoup

Quickly Started

Include htmlAnnotator-compose-ext and sketch

// Implement parsing of HTML documents with images
BasicHtmlImageText(
    html = srcHtml,
    imageContent = { imgUrl ->
        AsyncImage(
            uri = it,
            contentDescription = "photo",
            Modifier
                .fillMaxWidth()
                .wrapContentHeight(),
            contentScale = ContentScale.FillWidth
        )
    }
)

For more details, see DemoScreen.

For the Android View implementation, refer to MainActivity.

Special Thanks

• NightWhistler/HtmlSpanner: HtmlAnnotator referenced some code from HtmlSpanner, including parsing, transformation, and the parser components
• ksoup: HtmlAnnotator leverages ksoup to parse HTML and select the final CSS
• panpf/sketch: Referenced the build and release configurations of this project

License

Apache 2.0. For more details, see the LICENSE file.