Improve line wrapping in HTML output (#9)

Improve line wrapping in HTML output by adding a flexbox using inlined CSS. 

---------

Co-authored-by: adrhill <[email protected]>

Author: zzkt

Project.toml

@@ -1,7 +1,7 @@
 name = "TextHeatmaps"
 uuid = "2dd6718a-6083-4824-b9f7-90e4a57f72d2"
 authors = ["Adrian Hill <[email protected]>"]
-version = "1.2.2"
+version = "1.2.3-DEV"
 
 [deps]
 ColorSchemes = "35d6a980-a343-548e-a6ea-1d62b119f2f4"

src/heatmap.jl

@@ -87,13 +87,14 @@ luma(c::RGB) = 0.2126 * c.r + 0.7152 * c.g + 0.0722 * c.b # using BT. 709 coeffi
 
 # Used e.g. in Pluto notebooks
 function Base.show(io::IO, ::MIME"text/html", h::TextHeatmap)
-    print(io, "<p><heatmap>")
+    # wrap lines and break on whitespace
+    div_style = "display: flex; flex-wrap: wrap; gap: 5px 0px; align-items: flex-start;"
+    print(io, """<div id="heatmap" style="$div_style">""")
     for (word, color) in zip(h.words, h.colors)
         bg = hex(color)
         fg = is_background_bright(color) ? "black" : "white"
-
-        style = "background-color: #$bg; color: $fg; padding: 0.2em; margin: 0.2em;"
-        print(io, """<heatmap-word style="$style">$word</heatmap-word>""")
+        word_style = "background-color: #$bg; color: $fg; padding: 0.1em 0.3em;"
+        print(io, """<heatmap-word style="$word_style">$word</heatmap-word>""")
     end
-    print(io, "</heatmap></p>")
+    print(io, "</div>")
 end

test/Project.toml

@@ -8,3 +8,5 @@ ReferenceTests = "324d217c-45ce-50fc-942e-d289b448e8cf"
 Test = "8dfed614-e22c-5e08-85e1-65c5234f0b40"
 XAIBase = "9b48221d-a747-4c1b-9860-46a1d8ba24a7"
 
+[compat]
+JuliaFormatter = "1"

test/references/seismic_centered_html.txt

@@ -1 +1 @@
-<p><heatmap><heatmap-word style="background-color: #800000; color: white; padding: 0.2em; margin: 0.2em;">Test</heatmap-word><heatmap-word style="background-color: #8686FF; color: black; padding: 0.2em; margin: 0.2em;">TextHeatmaps</heatmap-word></heatmap></p>
+<div id="heatmap" style="display: flex; flex-wrap: wrap; gap: 5px 0px; align-items: flex-start;"><heatmap-word style="background-color: #800000; color: white; padding: 0.1em 0.3em;">Test</heatmap-word><heatmap-word style="background-color: #8686FF; color: black; padding: 0.1em 0.3em;">TextHeatmaps</heatmap-word></div>