Documentation

• Home

SML

• Elements
• Layout

Simple Markup Language (SML) Documentation for Designers

Overview

Simple Markup Language (SML) is a user-friendly markup language designed for creating structured documents, particularly for interactive eBooks and mobile applications. SML allows designers to define content layout and properties using a simple and intuitive syntax, making it easy to craft visually appealing and interactive user experiences.

Key Features

SML offers a variety of features that enable designers to create engaging content:

• Structured Syntax: SML provides a clear structure for defining elements and their properties, allowing for easy interpretation and rendering by applications.
• Interactive Components: Designers can create interactive elements such as buttons, links, and media content, enhancing user engagement and navigation within the content.
• Markdown Support: The inclusion of Markdown allows for easy formatting of text, enabling designers to incorporate headers, bold text, lists, and other formatting options seamlessly.

Basic Syntax

Elements

SML consists of various elements that can be combined to form a complete document. Each element represents a specific type of content or layout. Here are some common elements:

Text Elements: Used for displaying text, including formatted text using Markdown.

Example:

Markdown {
  text: "
    # Title
    ## Subtitle
    This is a **bold** statement."
}

Image Elements: Used to embed images within the document.

Example:

Image { src: "image.png" }

Video Elements: Used to embed videos from local sources or external URLs.

Examples:

Video { src: "beach.mp4" }
Video { src: "https://example.com/beach.mp4" }

YouTube Elements: Used to embed YouTube videos directly.

Example:

YouTube { id: "pOL66P0FdPQ" }

Scene Elements: Used for 3D content, allowing for interactive 3D models with environment settings.

Example:

Scene {
  height: 200 
  model: "BusterDrone.gltf" 
  skybox: "venetian_crossroads_2k_skybox.ktx"
  ibl: "venetian_crossroads_2k_ibl.ktx" 
}

Column Elements: Used to organize content vertically, allowing for nesting of other elements.

Example:

Column {
  Text { text: "Lorem ipsum" }
  Row {
    Button { label: "Back" }
    Button { label: "Next" }
  }
}

Row Elements: Used to arrange elements horizontally within a column.

Spacer Elements: Used to create space between components, allowing for better layout control.

Example:

Spacer { amount: 16 }

Button Elements: Used to create interactive buttons that can link to other pages or actions.

Example:

Button { label: "Next" link: "page:next" }

Layout Organization

SML allows for the organization of elements into logical structures. This can include vertical stacking of components, grouping of related items, and the use of spacers to adjust spacing dynamically. Columns can contain Rows for horizontal arrangements, enabling a flexible layout.

Usage

Designers can leverage SML to create visually compelling and user-friendly layouts for interactive content. By combining different elements effectively, SML facilitates the development of rich and engaging eBooks that can adapt to various screen sizes and devices.

Conclusion

SML serves as a powerful tool for designers aiming to create interactive documents with ease. Its straightforward syntax and support for various components make it an ideal choice for crafting structured content that is both attractive and functional.

For more information on utilizing SML, designers are encouraged to explore its capabilities and experiment with different layouts and components to fully leverage the potential of this markup language.