Installing Webfonts
- -Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.
- -1. Upload your webfonts
-You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.
- -2. Include the webfont stylesheet
-A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:
- - -
-@font-face{
- font-family: 'MyWebFont';
- src: url('WebFont.eot');
- src: url('WebFont.eot?iefix') format('eot'),
- url('WebFont.woff') format('woff'),
- url('WebFont.ttf') format('truetype'),
- url('WebFont.svg#webfont') format('svg');
-}
-
- We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:
-<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
-
- 3. Modify your own stylesheet
-To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:
-p { font-family: 'MyWebFont', Arial, sans-serif; }
-
-4. Test
-Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.
-
+
+#### Navigation Mode
+You can fine tune the reveal.js navigation behavior by using the `navigationMode` config option. Note that these options are only useful for presentations that use a mix of horizontal and vertical slides. The following navigation modes are available:
+
+| Value | Description |
+| :--------------------------- | :---------- |
+| default | Left/right arrow keys step between horizontal slides. Up/down arrow keys step between vertical slides. Space key steps through all slides (both horizontal and vertical). |
+| linear | Removes the up/down arrows. Left/right arrows step through all slides (both horizontal and vertical). |
+| grid | When this is enabled, stepping left/right from a vertical stack to an adjacent vertical stack will land you at the same vertical index.
+
+
+
+
+#### Step-by-step Highlights
+
+You can step through multiple code highlights on the same code block. Delimit each of your highlight steps with the `|` character. For example `data-line-numbers="1|2-3|4,6-10"` will produce three steps. It will start by highlighting line 1, next step is lines 2-3, and finally line 4 and 6 through 10.
+
+
+
+### Slide number
+
+If you would like to display the page number of the current slide you can do so using the `slideNumber` and `showSlideNumber` configuration values.
+
+```javascript
+// Shows the slide number using default formatting
+Reveal.configure({ slideNumber: true });
+
+// Slide number formatting can be configured using these variables:
+// "h.v": horizontal . vertical slide number (default)
+// "h/v": horizontal / vertical slide number
+// "c": flattened slide number
+// "c/t": flattened slide number / total slides
+Reveal.configure({ slideNumber: 'c/t' });
+
+// You can provide a function to fully customize the number:
+Reveal.configure({ slideNumber: function( slide ) {
+ // Ignore numbering of vertical slides
+ return [ Reveal.getIndices( slide ).h ];
+}});
+
+// Control which views the slide number displays on using the "showSlideNumber" value:
+// "all": show on all views (default)
+// "speaker": only show slide numbers on speaker notes view
+// "print": only show slide numbers when printing to PDF
+Reveal.configure({ showSlideNumber: 'speaker' });
+```
+
+### Overview mode
+
+Press »ESC« or »O« keys to toggle the overview mode on and off. While you're in this mode, you can still navigate between slides,
+as if you were at 1,000 feet above your presentation. The overview mode comes with a few API hooks:
+
+```javascript
+Reveal.addEventListener( 'overviewshown', function( event ) { /* ... */ } );
+Reveal.addEventListener( 'overviewhidden', function( event ) { /* ... */ } );
+
+// Toggle the overview mode programmatically
+Reveal.toggleOverview();
+```
+
+### Fullscreen mode
+
+Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode.
+
+### Embedded media
+
+Add `data-autoplay` to your media element if you want it to automatically start playing when the slide is shown:
+
+```html
+
+```
+
+If you want to enable or disable autoplay globally, for all embedded media, you can use the `autoPlayMedia` configuration option. If you set this to `true` ALL media will autoplay regardless of individual `data-autoplay` attributes. If you initialize with `autoPlayMedia: false` NO media will autoplay.
+
+Note that embedded HTML5 `