Fit / Fill text in slide

[alperyilmaz]

The fit/fill text property in DeckSet (sample) and Spectacle (sample slide3 and slide7) is a nice touch for having beautiful slides. I was trying to integrate fit/fill text property into remark. I decided to try BigText.js library (another alternative is FitText). Currently I have the following lines in HTML:

<script src="https://gnab.github.io/remark/downloads/remark-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bigtext.js"></script>
<script>
var slideshow = remark.create({

// ratio, navigation,slideNumberFormat,countIncrementalSlides,highlightStyle,sourceUrl variables are set here

}); 
</script>
<script>
// Only BigText on “new-ish” browsers
if( 'querySelectorAll' in document ) {
$('.bigtext').bigtext();
}
</script>

When I view the presentation, I had to refresh the slide to see the effect. (same problem with mermaid was described in issue #315

When I refresh, I see that BigText.js works as shown before:

My questions are;

1. What is the best way to integrate an external js library into remark? (do we need to trigger slide events?)
2. Is it possible to achieve fit/fill text effect by css only?

[dastrobu]

I have the same problem with mermaid and flot. At least some slide loaded to hook on would be nice. I currently did not find any other solution except reloading the page after switching slides, which is not really an option.

[jenokarthic]

I had the similar issue and found the solution.

Following code receives slideshow - afterShowSlide callback from remarkjs and recreate the bigtext content on current slide.

<script>
slideshow.on('afterShowSlide', function (slide) {
if( 'querySelectorAll' in document ) {
    $('.bigtext').bigtext();
}
</script>

[dastrobu]

@jenokarthic tip works also great with flot and solves the issue.

There is however a problem if you do a page relaod on the page showing the bigtext or flot graph. To be able to reload the page (or open it directly via a deep link), I suggest to do the following:

<script>
$(document).ready(function(){
    function doPlot(){
        $.plot("myPlotSelector", [...]);
    }
    // pass function to afterShowSlide event, to make sure plot is correctly sized
    slideshow.on('afterShowSlide', doPlot);
    // call function to make sure plot is shown when page is loaded directly
    doPlot();
});
</script>

[abelards]

Thanks everyone, now it's in the wiki!
https://github.com/gnab/remark/wiki/HTML-CSS-JS-samples