I am trying to understand how reveal.js ( http://lab.hakim.se/reveal-js/#/ ) resizes elements dynamically.
To see this, adjust the height of the page and see how elements (to a certain degree) shrink as the page shrinks.
However, using chrome inspector, I cannot see how this shrinking is actually happening, either in CSS or Javascript.
(My interest comes from wanting to improve it, if possible, but I was surprised how hard it was to figure out how it works at all.)
Have you heard of media queries? This is a technique deployed through CSS that allows you to affect the styling of elements based on the width and height of the window. Here is how it's used for reveal.js https://github.com/hakimel/reveal.js/blob/master/css/reveal.css
@media screen and (max-width: 900px), (max-height: 600px) {
.reveal .slides {
font-size: 0.82em;
}
}
@media screen and (max-width: 700px), (max-height: 400px) {
.reveal .slides {
font-size: 0.66em;
}
}
Read On: MDN CSS Media Queries
Mini Tut: CSS Media Queries & Using Available Space | CSS-Tricks
Presentations are configured with a "normal" resolution, meaning the resolution the presentation was originally authored at. This is currently set to 960x700 by default.
Based on that resolution and the aspect ratio derived from it the framework will apply CSS 2D transforms to fit your content inside of any screen size. There are configuration values to control all of this including limits on how much the framework will ever scale your content.
Reveal.initialize({
...
// The "normal" size of the presentation, aspect ratio will be preserved
// when the presentation is scaled to fit different resolutions. Can be
// specified using percentage units.
width: 960,
height: 700,
// Factor of the display size that should remain empty around the content
margin: 0.1,
// Bounds for smallest/largest possible scale to apply to content
minScale: 0.2,
maxScale: 1.0
});
If you look at the source code hosted on github https://github.com/hakimel/reveal.js/blob/master/js/reveal.js you can see exactly what it's doing.
It checks for browser CSS features like 2d and 3d transforms
// Detect support for CSS 3D transforms
supports3DTransforms = 'WebkitPerspective' in document.body.style ||
'MozPerspective' in document.body.style ||
'msPerspective' in document.body.style ||
'OPerspective' in document.body.style ||
'perspective' in document.body.style
It uses basic event listeners
// Force a layout when the whole page, incl fonts, has loaded
window.addEventListener( 'load', layout, false );
...
/**
* Binds all event listeners.
*/
function addEventListeners() {
window.addEventListener( 'hashchange', onWindowHashChange, false );
window.addEventListener( 'resize', onWindowResize, false );
...
The source code actually has decent commenting so you should be able to learn quite a bit.
Reveal.js also uses the zoom property to control the resizing of complete slide on small widths. It dynamically changes the value of zoom property which you can notice if you keep resizing the window.
