Remark: Auto-scaling font sizes

[dangoldin]

I've been using Remark for a class I've been teaching after wanting to take advantage of syntax highlighting and think it's awesome. One thing I wish it had was the ability to automatically resize font sizes on each slide similar to what Keynote does.

I'll be glad to take a stab at this if people think it's a decent idea and it would definitely be implemented as a separate option.

[gnab]

Sorry for the slow reply. If your up for taking a stab that would be awesome! You're not the only one interested in such a feature.

[dangoldin]

I'm definitely new to the JS world though so would need some review and oversight. Will take a stab at it.

[kgaut]

Subscribing ! Let me know if i can help you.

[junderhill]

Did you make any progress with this feature? If not I may take a look.
Perhaps we could utilise a library such as https://github.com/davatron5000/FitText.js in order to fulfil this feature?

Another such library is http://www.zachleat.com/web/bigtext-makes-text-big/

[dangoldin]

Nope - I wasn't able to get much done unfortunately.

[junderhill]

OK, I'm going to take a look at this and see what I can do.

[junderhill]

@gnab What's your thoughts on utilising jQuery to support this? It seems that all the libraries that would offer this functionality depend on jQuery.

[gnab]

It would be nice if jQuery wasn't required to use remark. If jQuery is needed for this feature, maybe it can be an optional plugin that depends on jQuery, that is not bundled by default. If you can make it work the way you want with jQuery first, we'll take it from there. Maybe we can bundle only the parts of jQuery that is needed, or even implement it ourselves.

[junderhill]

I can understand that. I will see what aspects of jQuery it utilises and see if it's something we can reimplement using standard JavaScript.

[gnab]

The updateDimensions function is called to set the dimensions of a single slide:

https://github.com/gnab/remark/blob/develop/src/remark/views/slideView.js#L29

The dimensions remain the same unless the ratio of the slideshow is modified after creation. Window resizing is handled by scaling the entire slide, so font-sizing should only be needed in after the slide's dimensions are set/updated in the above function.

[aseigneurin]

Does anyone have a solution for this issue? Maybe a prototype of implementation?

[kgaut]

Hi @aseigneurin

Personnaly I moved to reveal.js for my presentations.

[aseigneurin]

@kgaut: do you imply that reveal.js does auto-scaling?

[Vebryn]

According reveal.js README, it does: https://github.com/hakimel/reveal.js/#presentation-size

I like remark because it doesn't require a web server to interpret Markdown :+1:

[koppor]

Quick solution using jquery-quickfit:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
    <script src="https://cdn.rawgit.com/chunksnbits/jquery-quickfit/master/jquery.quickfit.js"></script>
    <script>
      var slideshow = remark.create();
      $('.remark-slide-content').quickfit({'min': 10, 'max': 36});
    </script>

In case the text still flows out, just replace 10 by a smaller minimum size.

[xaprb]

I added this to my Story website theme with a quick hack in the HTML source of the file that contains the Remark slide. This depends on JQuery, and on the slide having the fit-h1 class, and on the following CSS:

fit-h1 h1 {
      height: 1.25em;
      overflow: hidden;
   }

      // Shrink headers until they fit. (They have to be momentarily made
      // visible first.)
      $(".remark-slide-content.fit-h1 h1").each(function(i, e) {
         var $e = $(e);
         var $p = $e.closest('div.remark-slide-container');
         var needsToggle = !$p.hasClass('remark-visible');
         console.log(needsToggle);
         if ( needsToggle ) $p.toggleClass('remark-visible');
         while (e.scrollHeight > e.clientHeight + 1 && $e.css('font-size') != '1px') {
            $e.css('font-size', (parseInt($e.css('font-size')) - 1) + "px");
            // console.log($e.css('font-size') + "sh:" + e.scrollHeight + "ch:" +
            //    e.clientHeight);
         }
         if ( needsToggle ) $p.toggleClass('remark-visible');
      });

[alswl]

I use FitText.js resolved this problem.

    <script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/FitText.js/1.2.0/jquery.fittext.min.js"></script>

    <script>
        var slideshow = remark.create();
        $('.remark-slide-content').fitText(1.2, { minFontSize: '14px', maxFontSize: '36px' });
    </script>

quick command here:
https://github.com/alswl/.oOo./blob/master/local/bin/remark

[abelards]

Documented here, thanks all! https://github.com/gnab/remark/wiki/HTML-CSS-JS-samples