How to get whitespace between html tags - html

Question

Using Elm's Html module, the output do not have any whitespace between html tags. But for inline displayed tags, whitespace has a function and makes the browser display empty space between them.
div []
[ strong [] [ text "Key:" ]
, span [] [ text "value" ]
, text "(extra)"
]
Results in:
<div><strong>Key:</strong><span>value</span>(extra)</div>
Shown in a browser as: Key:value(extra)
Desired result
The desired html must have some kind of whitespace:
<div>
<strong>Key:</strong>
<span>value</span>
(extra)
</div>
Shown in browser as: Key: value (extra)

Answer 1

You could just put whitespace between the elements manually:
div []
[ strong [] [ text "Key:" ]
, text " "
, span [] [ text "value" ]
, text " "
, text "(extra)"
]
Or if you want something more generic you can easily write a function to do so using List.intersperse, e.g.:
withSpacing : List (Html msg) -> List (Html msg)
withSpacing =
List.intersperse (text " ")
main : Html msg
main =
div []
(withSpacing
[ strong [] [ text "Key:" ]
, span [] [ text "value" ]
, text "(extra)"
]
)
Or with even more convenience, based on the reasonable assumption that you'll be applying it to a function that takes a list of child elements to produce a single element:
withSpacing : (List (Html msg) -> Html msg) -> List (Html msg) -> Html msg
withSpacing element =
List.intersperse (text " ") >> element
main : Html msg
main =
withSpacing (div [])
[ strong [] [ text "Key:" ]
, span [] [ text "value" ]
, text "(extra)"
]

Answer 2

You can make a wrapper for Html tags as follows:
type alias HtmlTag msg =
List (Html.Attribute msg) -> List (Html msg) -> Html msg
interspaced : HtmlTag msg -> HtmlTag msg
interspaced fn =
\attr content -> fn attr (content |> List.intersperse (text " "))
main : Html msg
main =
interspaced div []
[ strong [] [ text "Key:" ]
, span [] [ text "value" ]
, text "(extra)"
]