Generating Web Pages🔗ℹ

For general HTML parsing and rendering support, see html.

The html/page library builds on the html library with a html syntactic form. 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.

• 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"]

)

The second form of attrs_and_body, using [((elem{…}))] instead of a : block, is intended for use via @ notation, especially with span-like forms that are inline within text.

> '@{This is @b{Hello}, @i(~color: "blue"){goodbye}.}'

'(["This is ", b (["Hello"]), ", ", i (~color: "blue", ["goodbye"]), "."])'

> div:     @{This is @b{Hello}, @i(~color: "blue"){goodbye}.}

Element(

~name: "div",

~content:

[

"This is ",

Element(~name: "b", ~content: ["Hello"]),

", ",

Element(

~name: "i",

~attributes: [Attribute(~name: "color", ~value: "blue")],

~content: ["goodbye"]

),

"."

]

)

If ~implies is provided with one or more parent_ids, then each parent_id must have been similarly defined, and the ~class attribute added by id includes the names added by all parent_ids.

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.

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.

> 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"]

)

• --- → — (em dash)

• -- → – (en dash)

• `` → “ (curly open quote)

• '' → ” (curly close quote)

• ' → ’ (curly single close quote)

> @para{Say ``Hello, world!'' --- because it's traditional.}

[["Say “Hello, world!” — because it’s traditional."]]