Creating Newspaper Columns in elm-ui

Learn
1

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 column-count.

This works great if you are only using text for the periodical. Here is an example of this in action.
https://ellie-app.com/b3PBXCNL94qa1

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.paragraph and 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
image

Top of the second column
image

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.
https://ellie-app.com/b3Qg7dmWVJPa1

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.

2

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.