# Responsive Text Size in Elm-UI

**URL:** <https://discourse.elm-lang.org/t/responsive-text-size-in-elm-ui/2784>\
**Category:** Learn\
**Created:** [December 17, 2018, 7:12pm UTC](https://discourse.elm-lang.org/t/responsive-text-size-in-elm-ui/2784 "2018-12-17T19:12:12Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hasimir](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/hasimir/32/2367_2.png) [@Hasimir](https://discourse.elm-lang.org/u/Hasimir)\
**Post date:** [December 17, 2018, 7:12pm UTC](https://discourse.elm-lang.org/t/responsive-text-size-in-elm-ui/2784/1 "2018-12-17T19:12:12Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![stevensonmt](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/stevensonmt/32/889_2.png) [@stevensonmt](https://discourse.elm-lang.org/u/stevensonmt)\
**Post date:** [December 17, 2018, 8:56pm UTC](https://discourse.elm-lang.org/t/responsive-text-size-in-elm-ui/2784/2 "2018-12-17T20:56:03Z")

</div>

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](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#Device)

---

<div class="post-metadata">

**Author:** ![Hasimir](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/hasimir/32/2367_2.png) [@Hasimir](https://discourse.elm-lang.org/u/Hasimir)\
**Post date:** [December 17, 2018, 9:27pm UTC](https://discourse.elm-lang.org/t/responsive-text-size-in-elm-ui/2784/3 "2018-12-17T21:27:57Z")

</div>

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?)

---

<div class="post-metadata">

**Author:** ![stevensonmt](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/stevensonmt/32/889_2.png) [@stevensonmt](https://discourse.elm-lang.org/u/stevensonmt)\
**Post date:** [December 17, 2018, 10:13pm UTC](https://discourse.elm-lang.org/t/responsive-text-size-in-elm-ui/2784/4 "2018-12-17T22:13:04Z")

</div>

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![Warry](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/warry/32/3998_2.png) [@Warry](https://discourse.elm-lang.org/u/Warry)\
**Post date:** [December 18, 2018, 10:38am UTC](https://discourse.elm-lang.org/t/responsive-text-size-in-elm-ui/2784/5 "2018-12-18T10:38:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![stevensonmt](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/stevensonmt/32/889_2.png) [@stevensonmt](https://discourse.elm-lang.org/u/stevensonmt)\
**Post date:** [December 18, 2018, 2:44pm UTC](https://discourse.elm-lang.org/t/responsive-text-size-in-elm-ui/2784/6 "2018-12-18T14:44:09Z")

</div>

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

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

```auto
    <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](https://ellie-app.com/4c9YwbGdhcpa1)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [December 28, 2018, 2:44pm UTC](https://discourse.elm-lang.org/t/responsive-text-size-in-elm-ui/2784/7 "2018-12-28T14:44:14Z")

</div>

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