Published on 08/2/2012

Markup or not Markup?

  • Markup or not Markup?

Unlike HTML5 presentation frameworks, we at Taodyne made the conscious decision not to use a markup language for our 3D presentation software, Tao Presentations. Instead, we focused on designing a language that is specifically tuned for creating great 3D presentations.

There are good reasons for that. A recent discussion in Hacker News prompts me to write about these reasons.


Markup-based presentations tools

There are several markup-based presentation tools that help you create web-based presentations that you can show in a web browser.

The most advanced ones, such as reveal.js or impress.js, use Javascript and CSS3D to create interesting 3D effects in a web browser. Superficially, this may seem very similar to what Tao Presentations can do: a text-based, 3D capable presentation tool. But there really are a number of differences.

Benefits of HTML5-based tools

The primary benefit of a web-based presentation tool is that you can show it on the web. Duh. Plus they use all the good old markup syntax that we have grown to know and "love".

By contrast, Presentations created with Tao and tao:// links such as tao:// require a specific application (even if it's available as a free download). That being said, a dedicated software offers a number of benefits in performance and features.

Examples of markup code

What does a presentation look like in Impress.js or Reveal.js? Let's start with Impress.js:

<div class="step slide" data-x="0" data-y="-1500">
    <q>Don't you think that presentations given <strong>in modern browsers</strong> 
    shouldn't <strong>copy the limits</strong> of 'classic'
    slide decks?</q> 

<div class="step slide" data-x="1000" data-y="-1500">
    <q>Would you like to <strong>impress your audience</strong>
    with <strong>stunning visualization</strong> of your talk?</q>

Here is a similar example in Reveal.js:

        <h2>Heads Up</h2>
                reveal.js is an easy to use, HTML based, presentation tool.
                You'll need a modern browser with support for CSS 3D transforms
                to see it in its full glory.

Standard markup, yes, but still a new language

On the surface, this structure is well known, so that you can leverage what you already know about HTML.

But notice how the two examples above don't use exactly the same syntax. There's a reason for that: in both cases, the power of that code really lies in additional definitions using Javascript and CSS 3D. We no longer use a really standard language, but some kind of dialect. We still need to learn this dialect before creating presentations.

It's not like the required code is extraordinarily big. For Impress.js, we are talking about 700 lines of CSS and 800 lines of Javascript. Reveal.js is slightly more extensive, with 1238 lines of CSS and 1039 lines of Javascript, not counting a few libraries.

However, that still means that you need to learn new semantics on how to build animations. The benefits of using a "standard" language are somewhat mitigated. More importantly, it means that what makes the presentation really different, the interesting 3D animations and transitions, are not in the document description itself.


Tao Presentations' Dynamic Document Description

In Tao Presentations, we decided to build on a programming language called XL, not a markup language. Describing documents using programming language is not an entirely isolated case.

A language designed for presentations

The interesting challenge is designing a language specifically adapted to describing slides. Here is the code used to create a simple slide:

// Main title slide
main_title_slide "Automatic formatting saves time"

// A simple text slide
slide "Describe slides as simple text",
    * "Automatic slide layout "
    - "Focus on the story, not the appearance"
    - "Changing the theme globally is easy"

This kind of syntax follows the guiding principle of Concept programming, namely that the source code should mimic the way you think about the problem. If you think about something as a slide, then the structure of a slide should show up in your source code.

Benefits of a real programming language

Using a real programming language has a number of benefits. One of them is being able to easily create reusable definitions. Here is how slide is defined in the theme.xl for the presentation:

slide Title:text, Body ->
// ------------------------------------------------------------
//   Draw a default story slide
// ------------------------------------------------------------
    base_slide Title,
        story Body

This definition takes a Body parameter, which makes it very easy to specify the contents of the slide. Unlike for markup languages, the same language is used all the way, making it easy to create your own definitions in the document.

Keeping the language terse and simple

Notice that definitions do not need to take the form of a function or procedure. For example, the same theme.xl also contains definitions that we use for bullet points.

* T:text ->
// ------------------------------------------------------------
//   Draw a bullet point with a given text
// ------------------------------------------------------------
    margins 100, 0
    paragraph_space 30, 30
        light 0
        light_position 100, 100, 100
        translate -30, 20, 5
        color theme_color "red"
        sphere 0, 0, 0, 25, 25, 10, 10, 10
    text T

This is what makes it possible to draw bullet points in a slide as follows:

    * "Automatic slide layout"
    * "Some other bullet point here"
    * "Third bullet point"

Loops and repetitions

Having a full-fledged programming language at your disposal means that you can directly perform relatively sophisticated computations right in the document:

Parametric curve

The slide above showing an animated parametric curve can be created very simply, relative to what it would take for a combination of HTML and Javacript:

slide "Drawing in a document",
    * "We can draw something directly:"
    align 0.5
        A -> 1 + seconds / 5
        B -> 1 + seconds / 6
        C -> 1 + seconds / 7
        translate 0, -230, 200
        rotatey 20 * time
        scale 200, 200, 200
        line_color "green"
        color "transparent"
            curve with 0..200
            curve N:integer ->
                line_to cos(A*N*pi/100 + page_time), sin(B*N*pi/100 + 2 * page_time), sin(C*N*pi/100)

In that code, anchor indicates that we anchor a given graphic element relative to the current text position. In that case, it's relative to a text position that is in the middle of the text block, because we used align 0.5.


Following our own path

When Taodyne created Tao Presentations, we decided to stray away from the common path of XML, HTML and web browsers. That was a difficult decision. But in retrospect, it brings a number of benefits, most notably being able to create very advanced presentations in a relatively short time.

We invite you to join the party. Tell us which topics you'd like to see covered in this blog!


No customer comments for the moment.

Add a comment