Invalid Text height with HTML-Attributed string

I want to display a simple HTML (<h1>HEADER</h1>) inside Text using AttributedString. The problem is that it displays with invalid height.

extension NSAttributedString {

    convenience init(htmlString: String) throws {
        try self.init(data: Data(htmlString.utf8),
                      options: [
                        .documentType: NSAttributedString.DocumentType.html
                      ],
                      documentAttributes: nil)
    }
}

struct CommentView: View {
    var body: some View {
        comment()
    }

    @ViewBuilder
    private func comment() -> some View {
        let string = try! NSAttributedString(htmlString: "<h1>HEADER</h1>")
        Text(AttributedString(string))
            .background(Color.yellow)
    }
}

the following result:

The issue you are experiencing where the HTML attributed string takes up more space than expected is likely due to the fact that one or more of the elements in the HTML string has a block display behaviour, such as a <div> or <p> tag.

When an HTML element with a block display behavior is encountered in an attributed string, it will be rendered as a block-level element with its own line, causing additional vertical space to be added to the text view. This is because block-level elements are designed to take up the full width of their parent container and create a new line after the element.

To avoid this issue, one solution would be to modify the HTML string to use inline elements instead of block-level elements. For example, instead of using a <div> or <p> tag, you can use a <span> tag to wrap the text content. The <span> tag has an inline display behavior, which means it will not create a new line and will instead flow with the text around it.

let htmlString = "<span style=\"font-size: 24px;\">HEADER</span>"

Or you can use this modified extension, which first trim the leading and trailing whitespaces and newline characters from the HTML string.

extension NSAttributedString {
    func trimmedAttributedString() -> NSAttributedString {
        let nonNewlines = CharacterSet.whitespacesAndNewlines.inverted
        
        // Find first non-whitespace character and new line character
        let startRange = string.rangeOfCharacter(from: nonNewlines)
        
        // Find last non-whitespace character and new line character.
        let endRange = string.rangeOfCharacter(from: nonNewlines, options: .backwards)
        guard let startLocation = startRange?.lowerBound, let endLocation = endRange?.lowerBound else {
            return self
        }
        // Getting range out of locations. This trim out leading and trailing whitespaces and new line characters.
        let range = NSRange(startLocation...endLocation, in: string)
        return attributedSubstring(from: range)
    }
}

Results:

    let string = try! NSAttributedString(htmlString: "<h1>HEADER</h1>")
    Text(AttributedString(string.trimmedAttributedString()))
        .background(Color.yellow)