fluid typography - SOLVED

kosirm

Thank you all for your helpful posts, especially @qyloxe for detailded explanation. I personally like tachyons harmonious font scale. With rfs & https://type-scale.com/ it’s really easy to create any scale you want (and rest sure that rfs will make it responsive).

digiproduct

@kosirm That https://type-scale.com/ looks very interesting … thanks for posting that link.

kosirm

On my box rfs is not working with q-markdown (quasar ext add @quasar/qmarkdown), which is fantactic extension. I’m totally new user (5 days of Quasar experience). Any idea, how can I make rfs to work with my markdown text?

s.molinari

For my curiosity, what is a “box rfs”?

Scott

kosirm

sorry i thought on my computer (win10, quasar 1.05, etc ) and rfs is https://github.com/twbs/rfs

digiproduct

@kosirm that RFS package looks very interesting

s.molinari

@kosirm - Got it. Thanks for the clarification.

Scott

kosirm

@digiproduct well I found it here on this page on @qyloxe explanation. But on the end of the day for me works better stylus function (thanks!!! @qyloxe). Forget about q-markdown, it was my mistake… I just needed to overwrite stuff in markdown.styl. Consider this solved

kosirm

This is similar as @qyloxe code, just extended to other properties, so it can be used for padding, margin, etc.

fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value)
  for $property in $properties
    {$property} $min-value
  
  @media screen and (min-width: $min-vw)
    for $property in $properties
      {$property} "calc(%s + %s * ((100vw - %s) / %s)) !important" % ($min-value (remove-unit($max-value - $min-value)) $min-vw (remove-unit($max-vw - $min-vw)))

  @media screen and (min-width: $max-vw)
    for $property in $properties
      {$property} $max-value

// Single property example
:root
  fluid-type(font-size, 320px, 1920px, 16px, 24px)

// Multiple property example
h1
  fluid-type(padding-left padding-right, 320px, 1920px, 10px, 30px)

Works for me… Props to Fredrik Beckius! There are also more sophisticated versions, for example to make different scales for different breakpoints…

dgk

Since finding this post I’ve been fiddling round with dynamic fonts specifically on form fields.
So sharing a bit what I have set up so far.

First though for some reason if rfs-base-font-size is not explicitly set (even if to default) then the fonts don’t resize. Note I use a “factor” so I know it’s bigger which according to docs should enable the resizing.

Secondly like @kosirm noted although useful it doesn’t adjust the related class properties (height, padding etc). That’s ok I suppose but the smaller font on smaller devices could have a smaller field box height saving precious vertical space and not look so wonky. Too classes like q-field__label need more bottom padding at smaller font size in order to keep the field content from running into the label.

Too looks like instead of using padding the field box height is controlled by the height parameter of .q-field__control. So would have to be able to grab the computed font size in order to scale that number I suppose.

Bottom line is that quasar at this point is agnostic to the dynamic font size. So if the framework wants to support dynamic font size then just need easy ways to scale all the related classes/properties when the font size changes. One idea would be that the framework has variables for font-size of various components/elements (e.g. q-field). Then you set that dynamically or manually (with defaults) instead of messing with classes directly. Guess those variables can be part of the component rather than in the core. Then all related can be changed accordingly. Nothing in the core variables like that except $input-font-size which gets ignored when wrapped in a field.

@import "../../node_modules/rfs/stylus"

// rfs settable variables - commented are defaults
$rfs-base-font-size = 1.25rem
// $rfs-font-size-unit = rem
$rfs-breakpoint = 1400px
// $rfs-breakpoint-unit = px
// $rfs-factor = 10
// $rfs-rem-value = 16
$rfs-two-dimensional = true
// $rfs-class = false

$field-font-factor = 1.3
$field-label-font-factor = 1

.q-field__native
.q-item__label
  rfs($rfs-base-font-size * $field-font-factor)

.q-field__label
   &.no-pointer-events
     rfs($rfs-base-font-size * $field-font-factor)

.q-field__label
   rfs($rfs-base-font-size * $field-label-font-factor)
   padding-bottom .3em // needs to be dynamic based on font size

.q-field__control
   // height ??px // needs to be computed based on font size.

kosirm

Thanks for your elaborative interrogation @dgk. It’s true what you said, I noticed that I need quite a lot of tweaking to get visual style that I want with Quasar. Hopefully Quasar theming will get some love from dev team … for now “theme builder” (https://quasar.dev/style/theme-builder) is pretty basic… But overall quality and flexibility of whole framework is a few light years ahead of the competition, so I’m not complaining