Responsive Text Size in Elm-UI

Learn
1

As far as I can tell, within the confines of Elm-UI the text is assigned a fixed size, expressed by a Int number, in pixels:
Element.Font.size 400

What is then the proper Elm-UI way of resizing text depending on the viewport?
Is there a way to make the text size values responsive?
Or should I hardcode breakpoints with different fixed sizes?
Or should I use SVG graphics in place of plain text when creating stuff like a big title?
Or… what?

2

Is text size the only thing that is going to change with viewport changes?

In general responsiveness is ideally handled by storing the DeviceClass in the model and subscribing to changes.
https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#Device

3

I’m not sure.
I’m dabbling.
At the moment I have a row…
on the left there is a column of elements (a big title, a smaller sub-title, a paragraph of text)
on the right there is an image

the image is an SVG, so it fills the whole space, and I can simply partition the element width using the fill and fillPortion attributes

the Title and Subtitle are my problem
they are normal text, with a BIG font size
I would like for them to shrink and expand just like the SVG image does… unless a specific DeviceClass is reached and then the view structure will change.
But Element.Font.size only accepts an Int value in pixels… no percentage, no Length value.

My questions are:

  • what would be the Elm-UI way of approaching this problem?

Use DeviceClass to set breakpoints, and then change the original fixed values with new fixed values?
Or would it be possible to use DeviceClass to dynamically produce an Int to be passed to the Font.size function? (and if so… how?)

4

I think the typical responsive approach is using something like the following:

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        DeviceClassified device ->
            ( { model | device = device }
            , Cmd.none
            )



---- SUBSCRIPTIONS ----


subscriptions : Model -> Sub Msg
subscriptions model =
    onResize <|
        \width height ->
            DeviceClassified (Element.classifyDevice { width = width, height = height })

If you want to access the width or height to calculate your font size, just store fontSize in your model and calculate it in the update function passing the {width, height} instead of the DeviceClass.

5

You can achieve this with only CSS: https://css-tricks.com/fun-viewport-units/

1 Like
6

Simple ellie to illustrate what I was getting at in my previous post:
https://ellie-app.com/4c8wsgwsN9Sa1

Please note the flags being passed into the init of the elm app:

    <script>
        var app = Elm.Main.init({ node: document.querySelector('main')
                                ,
        flags: {
            width: window.innerWidth,
            height: window.innerHeight
        }})
        // you can use ports and stuff here
      </script>

alternative approach by wrapping elements in an el with Element.scale attribute set: https://ellie-app.com/4c9YwbGdhcpa1

1 Like
7

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