Slides do not resize to fit display/browser

[marcusps]

One nice feature of PowerPoint and Keynote is that the slides are displayed as designed, and do not change depending on the screen size. This can be an issue when connecting to a projector which changes the resolution of the display.

[imakewebthings]

Ok, I think I've seen this issue raised enough that I'll put it on the list of things to implement. In the meantime, you can use browser zooming to scale presentations manually. I understand it's inexact and requires a few clicks/keys before presentation time, but it should work for anyone that needs to scale before work on this is done.

[marcusps]

The zooming does work well for a single slide, but it may be tricky when there are many slides and you have to worry about how they all appear.

[nfiniteset]

I took a stab at this problem using the little-known yet decently supported css unit, rem.
1rem is equal to the font-size of the html element.

By setting the html element's font-size to 1/100 of the height of the window,
1rem becomes equal to 1% of the window's height.

Style your slides using rems and you're good to go.

Demo here:
http://sdurham.net/scaling-preso/

Source here:
https://gist.github.com/1172396

[marcusps]

Very nice!

[imakewebthings]

rem is a great solution for text, but this doesn't work out so well with images and videos, and also requires a hard set width and height for decks. Quite a cool solution though, and if anyone wants to use it for a text only custom presentation theme, wholly encouraged. For the browsers that don't support rem, you'll need to specify a px/em/% fallback I believe, or just not support them.

An update on the issue, I have a local branch that solves this whole thing pretty well using CSS transforms to scale. I just need to figure out what to do about embedded Flash videos (they don't play well with CSS transforms, particularly in FF.) It may just be that for now, if the scale module is included only HTML5 video is supported, rather than hold up the issue waiting for Flash/browser vendors to fix things.

[imakewebthings]

I've published a branch named scaling if anybody wants to check it out and see if anything breaks that I didn't find. I need to clean up the code and document it inline before pushing it to master, and if nothing alarming is found, to stable once the new public docs on gh-pages are updated. Here's the rundown of how it works in the meantime:

New extension in extensions/scale. Adds JS + CSS, no HTML. Uses CSS transforms to scale the container. If the content isn't tall enough to fill the container, no transform is applied. Overall this module is only recommended for standalone decks, and doesn't really make much sense if embedded into a page, since the width/height of the container are controlled in that environment.

Options

• classes.scale: Applied to the container if scaling is enabled. Defaults to deck-scale. Even if no transform is being applied because the content is tall enough for the container, this class would still be applied. Scaling is enabled on init.
• keys.scale: Toggles enabling/disabling scaling. I'll explain why you might want this in a second. Defaults to 's'.
• baseHeight: Null by default, which causes the module to calculate the scale according to the height of the tallest slide. But if you want, you can set this to a number (say if you're designing to a set height), and that will be used as the base for scaling. For example, if you set it to 1200 and then the height of the window is 600, the deck will be scaled to 50%, regardless of the height of the content.
• scaleDebounce: Default to 200. The recalculation of scaling on resize is debounced as a performance measure. This is the threshold in milliseconds.

The ability to disable and enable scaling is the best solution I can think of right now for dealing with embedded flash videos in decks. Since they don't work so hot under a CSS scaling transform, this at least gives presenters the option to go back to a non-transformed state and play the video, then return for the rest of the presentation.

[thedrow]

Is there any progress here? It's a really important feature for me.

[imakewebthings]

It's in master now, give it a try. I'm almost finished updating the public docs, so it should hit stable within a couple hours.

[imakewebthings]

Alright guys, this is in stable now and the docs page is updated with the new module. Please open new issues if you find something buggy. Closing this one.