Reveal.js: Scale presentations to always fit within window bounds

[hakimel]

Try moving reveal.js away from the current dynamic width layout using media queries to a solution that scales the presentation to always fit within the window dimensions. The "normal" size – the size at which the presentation was authored – should ideally be a config option.

Replaces #309
See #304 for example implementation

[hakimel]

A first implementation of this is available in the dev branch. It currently uses zoom to scale the .slides container since CSS transforms led to content being blurry. Has only been tested in Chrome so far.

[hakimel]

Pushed some further improvements. Looks good on Chrome/FF OS X. iOS has a few quirks to work out.

[aseemk]

Nice work so far! Tried it on my presentation and things generally work well.

The width/height config is interesting. 1024x768 is a good default, since that's the resolution of many projectors, and that was the resolution I needed to match for my presentation too. But, I authored the presentation with those dimensions in mind for the whole view(port)! Not the inner portion (which happens to be a div named slides.)

(Edit: you can see this in my custom slides+notes viewer by the fact that the _iframe_ is set to 1024x768.)

If it's not too late, what do you think of changing the semantics of the width/height config to include the padding (i.e. be derived after it, rather than before it)? This is sort of like how box-sizing: border-box is often more useful than content-box.

Edit: and with that change, the slides div would ideally be flush with the parent reveal div if the viewport was exactly the width/height you specified in the config. Don't know if this makes some transitions harder to implement though.

[hakimel]

The 'padding' config option was badly named, it's a margin and has been renamed accordingly. I want that to be there by default rather than a padding inside since that doesn't work with most of the transitions. Though if you wanted a 100% fit with padding inside you could specify margin: 0 in the config and define your own padding in CSS.

[aseemk]

Thanks Hakim, I'll try that when I get a chance.

[aseemk]

Another thought that occurred to me: what does specifying the width/height as a config get you that just putting it in CSS wouldn't?

.reveal > .slides > section {
    width: 1024px;
    height: 768px;
}

The advantage to using CSS would be that I could override it for particular slides. E.g. if my slides are authored for 1024x768, but I'm viewing on a (widescreen) laptop, and one slide has a nice panoramic image.

With CSS, I could change that one slide to have 100% width and height instead of 1024x768 (which would get constrained to the laptop screen's height, making the pano just a fraction of the total screen).

[hakimel]

This feature is now complete in the dev branch. Would love help with testing on different setups and devices if anyone has some time to spare. Especially IE9-10 and Android.

@aseemk Variable sizes on different slides in the same presentation would break the transitions. The sections themselves are sized at 100% at all times now, it's the .slides container that gets set to the configured with/height and then scaled. I prefer keeping it in JS since it lives next to a few other config options that affect scaling. With the new implementation you can at least configure width/height to 100% if you want the entire presentation to always cover the whole browser window.

[hakimel]

Tried IE9 and IE10 briefly and both seem OK.

[hakimel]

This has been merged into master (reveal.js v2.3). Has not been tested very thoroughly but hopefully it will be now.

[didibus]

How do you use this? My text overflows, and I'd like its size to shrink to fit.

[NicolasWebDev]

I am currently having the same problem, with my images and my text overflowing from the <div class="slides">.

[G1305]

how to fix it? please HELP

desktop browser works fine, but I want full height for mobile browsers...
@hakimel @aseemk
I hope this is very important issue for everyone