Span

Span is a part of text that can have different contents and design from the rest of your text. To add span, use the span operation.

Default span

To use the create span, we use this node:

let nodes = [
  {
    op: "span"
  }
];

let elements = [
  {
    type: "h1",
    value: "Hello"
  }
];

This generates defaults span operation on each element.

Span operation:

• parts - array of objects with the following structure:

Object structure in parts array

• text - text of the span
• style - Style object with properties. You can use properties as you are used to from the set method

 let text = new Text("The first time we went to the Moon.").set({
  fluidc: "S1",
  color: "green",
  span: {
    range: ["900px", "1000px"],
    op: {
      name: "span",
      parts: [
        {
          text: "The first time",
          style: {
            italic: true,
            arrpad: {
              sides: ["left"],
              value: "3rem"
            },
            stroke: {
              range: ["950px", "1000px"],
              op: {
                name: "blast",
                background: ["header", "button"],
                color: "yellow",
                width: "1px"
              }
            }
          }
        },
        {
          text: "We went to the Moon",
          style: {}
        }
      ]
    }
  }
}).render("#mount");