I am looking to create a newspaper column style format in my app that is using elm-ui. I have been able to figure out a way to create it, but it is not without complications. First off I found that there was already some css properties that control this behavior, mainly
This works great if you are only using text for the periodical. Here is an example of this in action.
textColumn [ Element.htmlAttribute <| Html.Attributes.style "column-count" "2" , Element.htmlAttribute <| Html.Attributes.style "display" "block" -- Alternatively "inline-block" ] (...) -- Paragraphs and text elements
However, when you have more than
Element.text in there, things start to go awry. Changing from using
display = flex to
display = block has consiquences on any other elements that may be in your content body. It looks like elm-ui makes heavy use of the flex property in for it’s styling
The picutres show what is happening to me because
column  blocks are getting messed up.
Bottom of the first column
Top of the second column
Unfortunately, the best I was able to recreate this issue was with this ellie which doesn’t really show the same problems that I had in my project. This does somewhat capture a problem state if you are willing to horizontally resize the browser carefully, you can see states where the M is shifted down into the text.
The last thing I’ll say is that I was looking to create more of a book experience where the user would only see the content that is listed on that page, then when they scroll they would get the continuation of the content. If I was to use only basic formatting and stick with what I had in my ellies, the user would have to read the first column all the way down to the bottom and then pick up back up at the top of the page. I haven’t been able to come up with an approach that would break up the content into one viewport worth of information. If there was a way of figuring out that information, then I could do this only in elm-ui and then just use groups of columns that I create myself.
Please let me know what your thoughts are on all of this and if you know of anything I could try to accomplish any of this. It seems like I am stretching the limits of both elm-ui and css in general on this one by adding in the page-break functionality.