Injecting custom CSS files in each WebView

[838]

We have created a custom CSS file for the comics book. What would be a good approach of injecting that CSS file into the each WebView?

[mickael-menu]

We plan to work soonish on an Injectable API to inject custom JavaScript and CSS but there's nothing available yet.

However, you can implement a custom transformer for the HTML resources to use with the TransformingFetcher and inject the CSS yourself.

You can wrap the publication fetcher from the Streamer.open(onCreatePublication:) closure:

suspend fun injectCss(resource: Resource): Resource {
    ...
}

streamer.open(
    ...,
    onCreatePublication = {
        fetcher = TransformingFetcher(fetcher, injectCss)
    }
)

Take a look at the HtmlInjector for an example:

• kotlin-toolkit/readium/streamer/src/main/java/org/readium/r2/streamer/fetcher/HtmlInjector.kt

  Line 27 in 540c80f

  internal class HtmlInjector(

[838]

@mickael-menu Thanks for your help 🙏 🙂