On this page:
Generating HTML Pages
html
html
styles
Style  Set
Style  Set.to_  css
css
elem
head
meta
title
style
script
body
link
h1
h2
h3
h4
h5
h6
div
span
pre
img
a
br
b
i
li
ul
ol
p
head.def
meta
title.def
style.def
script.def
body.def
link.def
h1.def
h2.def
h3.def
h4.def
h5.def
h6.def
div.def
span.def
pre.def
img.def
a.def
br.def
b.def
i.def
li.def
ul.def
ol.def
p.def
0.45+9.1

Generating HTML Pages🔗ℹ

 import: html/page open package: rhombus-html-page-lib

For general HTML parsing and rendering support, see html.

The html/page library builds on the html library with a html syntactic formk. the html form resembles the html.syntax form for writing HTML syntax objects, but it differs in several key ways:

  • html produces an html.Element, not a syntax object;

  • the body forms and attribute right-hand sides of html are expressions, not quoted syntax positions that must be escaped to write expressions;

  • html is defined alongside head, body, div, span, a, and more forms, all of which produce html.Elements intended to be incorporated into other html.Elements; and

  • each element form like div or a provides a definition form div.def or a.def for defining a CSS class with a corresponding constructor that refers to the class, where each definition form must be used in the body of a styles form.

styles sans:

  body.def main_body:

    ~font_family: "sans-serif"

  span.def emph:

    ~font_weight: "bold"

def the_title = "Example"

def page:

  html:

    head:

      title:

        the_title

      style:

        sans.to_css()

    main_body:

      h1: the_title

      div:

        @{It's @(emph: "great")!}

      div:

        ~style: css:

                  ~font_style: "italic"

                  ~text_color: "forestgreen"

        "The End"

> html.write(page)

<html><head><title>Example</title><style>

.emph{

  font-weight: bold;

}

.main-body{

  font-family: sans-serif;

}</style></head

><body class="main-body"><h1>Example</h1

><div>It's <span class="emph">great</span>!</div

><div style=" font-style: italic; text-color: forestgreen;">The End</div

></body

></html>

expression

html attrs_and_body

 

attrs_and_body

 = 

:

  attr_keyword: attr_expr

  ...

  content_expr

  ...

The html form expands to a html.Element(~name: "html", ~content: content, ~attributes: attrs) construction where

  • content is the recursive flattening of

    [content_expr, ...]

    i.e., flattening nested lists into one list of html.Content elements; and

  • attrs is a list

    [html.Attribute(~name: kw_str(#'attr_keyword), ~value: val_str(attr_expr)),

     ...]

    where kw_str converts a keyword to a string and replaces each _ with -, and var_str coerces a String or Real to a string.

Forms like div, span, and a work the same way, and they differ only in the ~name argument for the constructed html.Attribute. New forms like html can be defined by elem and forms like html.def and div.def.

> html:

    ~age: 42

    "Hello"

Element(

  ~name: "html",

  ~attributes: [Attribute(~name: "age", ~value: "42")],

  ~content: ["Hello"]

)

nestable declaration

html.def id:

  attr_keyword: attr_expr

  ...

For use with styles, defines id as a syntactic form similar to html, but adding an implicit ~class attribute to each use of id whose value is the string form of id with _ replaced by -.

Forms like div.def, span.def, and a.def work the same way, and they differ only in the ~name argument for the html.Attribute that will be generated by uses of the new id.

styles sans:

  html.def all_html:

    ~font_family: "sans-serif"

> all_html:

    "Hello"

Element(

  ~name: "html",

  ~attributes: [Attribute(~name: "class", ~value: "all-html")],

  ~content: ["Hello"]

)

nestable declaration

styles id:

  nestable_body

  ...

 

class

class StyleSet():

  constructor ~error

 

method

method (style_set :: StyleSet).to_css() :: String

The styles form defines id as an instance of StyleSet to hold a set of CSS styles. Forms like html.def can appear among the body forms to define new element-constructor forms and CSS classes that are included in the class set. The nestable_body sequence is otherwise treated the same as in a namespace ~open form.

The style_set.to_css method returns a string with CSS content that contains the class definitions for the style set. Use it with a "style" HTML element in a document’s "head" element.

styles sans:

  body.def main_body:

    ~font_family: "sans-serif"

> sans.to_css()

"\n.main-body{\n  font-family: sans-serif;\n}"

expression

css:

  attr_keyword: attr_expr

  ...

Intended for use on the right-hand side of a ~style attribute, combines attribute keywords and values into a string for inline CSS.

> div:

    ~style: css:

              ~font_style: "italic"

              ~text_color: "forestgreen"

    "The End"

Element(

  ~name: "div",

  ~attributes:

    [

      Attribute(

        ~name: "style",

        ~value: " font-style: italic; text-color: forestgreen;"

      )

    ],

  ~content: ["The End"]

)

nestable declaration

elem id

Defines syntactic forms id and id.def that is like html and html.def, but that creates a hteml.Element using the string form of id as the name.

expression

head attrs_and_body

 

expression

meta attrs_and_body

 

expression

title attrs_and_body

 

expression

style attrs_and_body

 

expression

script attrs_and_body

 

expression

body attrs_and_body

 

expression

link attrs_and_body

 

expression

h1 attrs_and_body

 

expression

h2 attrs_and_body

 

expression

h3 attrs_and_body

 

expression

h4 attrs_and_body

 

expression

h5 attrs_and_body

 

expression

h6 attrs_and_body

 

expression

div attrs_and_body

 

expression

span attrs_and_body

 

expression

pre attrs_and_body

 

expression

img attrs_and_body

 

expression

a attrs_and_body

 

expression

br attrs_and_body

 

expression

b attrs_and_body

 

expression

i attrs_and_body

 

expression

li attrs_and_body

 

expression

ul attrs_and_body

 

expression

ol attrs_and_body

 

expression

p attrs_and_body

Like html, but for other standard HTML element names as defined via elem. Of course, this is not a complete list of standard element names, so you can define more using elem.

nestable declaration

head.def id_and_attrs

 

nestable declaration

meta id_and_attrs

 

nestable declaration

title.def id_and_attrs

 

nestable declaration

style.def id_and_attrs

 

nestable declaration

script.def id_and_attrs

 

nestable declaration

body.def id_and_attrs

 

nestable declaration

link.def id_and_attrs

 

nestable declaration

h1.def id_and_attrs

 

nestable declaration

h2.def id_and_attrs

 

nestable declaration

h3.def id_and_attrs

 

nestable declaration

h4.def id_and_attrs

 

nestable declaration

h5.def id_and_attrs

 

nestable declaration

h6.def id_and_attrs

 

nestable declaration

div.def id_and_attrs

 

nestable declaration

span.def id_and_attrs

 

nestable declaration

pre.def id_and_attrs

 

nestable declaration

img.def id_and_attrs

 

nestable declaration

a.def id_and_attrs

 

nestable declaration

br.def id_and_attrs

 

nestable declaration

b.def id_and_attrs

 

nestable declaration

i.def id_and_attrs

 

nestable declaration

li.def id_and_attrs

 

nestable declaration

ul.def id_and_attrs

 

nestable declaration

ol.def id_and_attrs

 

nestable declaration

p.def id_and_attrs

 

id_and_attrs

 = 

id:

  attr_keyword: attr_expr

  ...

Like html.def, but for defining style that based other standard HTML element names. Define more using elem.