Wize Presentation

Created Wednesday 16 October 2019

Quick presentation using Wize_S5 export.

• left-click or right arrow → next slide
• left arrow → previous slide
• mouse over bottom right → shows navigation

#Wize from H4

#William Daniau from H4

Slides

Every H1 header will start a new slide.

This export uses special H4 and H5 headers for in document configuration, these headers begins with the "#" character and are never directly displayed. We will refer these as #H4 and #H5 in the following

The content of the first two #H4 on the page, will be placed in the footer. The #H5 headers will be interpreted as layout informations as demonstrated later.

Standard H4

Standard H5

will be of course normally displayed!

Features

The presentation will keep most of the current Wize theme, however the behaviour will be somewhat different.

• Resizing the browser will try to keep almost everything with same proportions.
• no scrolling is possible

Customization

All customization is done into the common-theme directory.

The specific Wize_S5 customization is done with four files :

• zim-pres-variables.css
• zim-pres-override.css
• Optional file logo-pres.png will be used as the logo.
• Optional file fond-pres.jpg will be used as the background.

Tables

Here's a table example :

It uses the current theme colors.
The relative font-size used in tables can be defined in zim-pres-variables.css file.

Pictures

By default, pictures will be centered and resized to an height of approximately 8 characters. This value can be modified into zim-pres-variables.css

Code

Code will be syntax highlighted but the portion of code that can be actually displayed is limited.

#include <iostream>

int main(int argc, char *argv[]) {
  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;
  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error
  
  return -2e3 + 12l;
}

The relative size of the used font for code can be defined in zim-pres-variables.css file.

In doc customization 1

Having pictures, tables, lists and code all displayed centered the same way can be boring in a presentation, this is why there's the ability to somewhat customize these by using #H5.

For example :

#left

#height5em

Adding two #H5 with "#left" and "#height5em" after the text "For example :" just before the image, makes it floating left, which means that text will flow around it. And we also specified a height of 5 characters.

In doc customization 2

This is a screnshot of how the previous appeared in zim

#left

#height7em

Every #H5 header must contain only one instruction.

In doc customization 3

Available configuration tags

The following configuration tags are available :

#left

#width40vw

• #left
• #right
• #widthXXUU
• #heightXXUU
• #fontsizeXX

These applied on

• images
• lists
• tables
• code

In doc customization 4

#left and #right

These will respectively make the following object float left or right

#fontsizeXX

This tag will only be usefull with other objects than images, it will apply a XX% factor on the font-size.

In doc customization 5

These tags use a unit. This unit better be a relative one such as em (character), vh (viewport height), vw (viewport width)

#heightXXUU

This tag will force the height of an object to value XX within unit UU. This tag is mainly intended to be used with images.

#widthXXUU

This tag will force the width of an object to value XX within unit UU. It also force height to auto.

In doc customization 6

Example 1

#width50vw

#right

#fontsize90

Here we used #width50vw, #right and #fontsize90 before this table, which means, that we want it to float on the right and to have its width equal be 50% of the viewport width (even if it seems to be more due to margins). We also apply a 90% sizing on the font.

In doc customization 7

Example 2

#width70vw

#fontsize80

#include <iostream>

int main(int argc, char *argv[]) {
  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;
  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error
  
  return -2e3 + 12l;
}

Here we used #width70vw and #fontsize80 before this block code, sizing it to 70% of viewport width.