Skip to content

Question about H1-H6 Heading Tags #578

@DevinDuricka

Description

@DevinDuricka

I'm working on my app, and one of the things I'm struggling with is building out Paragraph Styles selection (Heading 1 to Heading 6)

Image

Ideally I would like something similar to other docs editors and the HMTL/markdown spec and select a header size. Obviously I can set an approximate style using the SpanStyle, but I would also like it to adopt the h1-h6 tags when calling .tohtml().

I do see that there is a sort of equivalent:

internal val H1SpanStyle = SpanStyle(fontSize = 2.em, fontWeight = FontWeight.Bold)
internal val H2SpanStyle = SpanStyle(fontSize = 1.5.em, fontWeight = FontWeight.Bold)
internal val H3SpanStyle = SpanStyle(fontSize = 1.17.em, fontWeight = FontWeight.Bold)
internal val H4SpanStyle = SpanStyle(fontSize = 1.12.em, fontWeight = FontWeight.Bold)
internal val H5SpanStyle = SpanStyle(fontSize = 0.83.em, fontWeight = FontWeight.Bold)
internal val H6SpanStyle = SpanStyle(fontSize = 0.75.em, fontWeight = FontWeight.Bold)

along with the mappings:

    "h1" to H1SpanStyle,
    "h2" to H2SpanStyle,
    "h3" to H3SpanStyle,
    "h4" to H4SpanStyle,
    "h5" to H5SpanStyle,
    "h6" to H6SpanStyle,

    H1SpanStyle to "h1",
    H2SpanStyle to "h2",
    H3SpanStyle to "h3",
    H4SpanStyle to "h4",
    H5SpanStyle to "h5",
    H6SpanStyle to "h6",

But these vals are all internal, meaning that if I want to check if the span style == H1 to H6, i need to recreate the vals (and there is no guarantee that the SpanStyles will be the same).

Material design also has an equivalent (sort of) but it only applies to the composable.
https://developer.android.com/develop/ui/compose/designsystems/material2-material3#typography

What would be the best way to set the paragraph style, aligning with the html heading standard and ensuring the to/from html functions correctly produce the tags? I can also try my hand at implementing this functionality (assuming it doesn't already exist).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions