search

Ionaru / easy-markdown-editor

EasyMDE: A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.
https://stackblitz.com/edit/easymde
MIT License
2.38k stars 314 forks source link

Use Responsive Font Sizes #452

Closed vanillajonathan closed 2 years ago

vanillajonathan commented 2 years ago

Change headers to use Responsive Font Sizes (RFS) from Bootstrap.

Ionaru commented 2 years ago

Why is this needed? The editor already scales its text and icons with font sizes.

vanillajonathan commented 2 years ago

The Bootstrap documentation has more information:

The mechanism automatically calculates the appropriate values based on the dimensions of the browser viewport.

https://getbootstrap.com/docs/5.2/getting-started/rfs/

The headers are defined to have the same font-size as Bootstrap which makes it play nice with websites using Bootstrap.

Ionaru commented 2 years ago

Can you explain what is different with RFS vs without it? How it affects the editor in different conditions and the benefits of it?

(Screenshots help)

vanillajonathan commented 2 years ago

The advantages listed in the README for RFS is:

  • No need to rescale paddings or margins anymore.
  • Text won't be chopped off in smaller viewports when RFS is applied to font sizes.
  • RFS will prevent the font size from rescaling too small, so readability can be assured.
  • The font sizes of all text elements will always remain in relation with each other.

https://github.com/twbs/rfs

The README also includes a animated GIF.

But my personal motivation is just to have the header sizes be consistent with Bootstrap since that is what I use.

Ionaru commented 2 years ago

How does it affect the editor? What noticeable differences will there be in the context of the editor for users before and after the change?

vanillajonathan commented 2 years ago

It doesn't affect the editor, the sizes of the headers will be slightly different, but users are not likely to notice.

Before (now): headers-before

After: headers-after