Text Shapes

The text shape is derived from AnchoredShape and is used to display text. Like all AnchoredShapes, the location of the text is given relative to it anchor point. Various text attributes like fill style, width, height, font, color, etc. can be specified.
To control text size, specify either the text width or height and allow Text Shapes to compute its other dimension.
Text Shapes also supports wrapping and splitting as shown in the Text Real-Time section of this tutorial.

# Simple Text Shape

Text can be just plain text.

import { Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { AlignmentStyle } from "@int/geotoolkit/attributes/TextStyle.ts";
function createScene(canvas) {
  return new Plot({
    "canvaselement": canvas,
    "root": new Group().addChild([
      new Text({
        "text": "Alphabetical",
        "ax": 50,
        "ay": 50,
        "textstyle": {
          "color": KnownColors.Black,
          "alignment": AlignmentStyle.Left,
          "font": "42px Arial"
        },
        "alignment": AnchorType.LeftCenter
      })
    ])
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Text Style Decorations

In additional to Font style, Size and Color, Text Style has following decorations.

import { SizeMode, Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { VerticalBoxLayout } from "@int/geotoolkit/layout/VerticalBoxLayout.ts";
import { BaseLineStyle } from "@int/geotoolkit/attributes/TextStyle.ts";
function createScene(canvas) {
  const textLines = ["Bold style", "Italic style", "Underline style", "Strikethrough style", "Outline style", "Shadow style"];
  const textShapes = [];
  for (let i = 0; i < textLines.length; i++) {
    textShapes.push(
      new Text({
        "text": textLines[i],
        "textstyle": {
          "font": "32px Arial",
          "baseline": BaseLineStyle.Alphabetic
        },
        "alignment": AnchorType.LeftTop,
        "sizemode": SizeMode.FromFont
      })
    );
  }
  const plot = new Plot({
    "canvaselement": canvas,
    "root": new Group().setPaddingStyle({
      "left": "50px",
      "top": "10px",
      "bottom": "10px"
    }).setLayout(new VerticalBoxLayout()).addChild(textShapes)
  });
  textShapes[0].getTextStyle().setFontWeight("bold");
  textShapes[1].getTextStyle().setFontStyle("italic");
  textShapes[2].getTextStyle().setUnderline({
    "color": "red",
    "width": 2,
    "pixelsnapmode": true
  });
  textShapes[3].getTextStyle().setStrikethrough({
    "color": "red",
    "width": 2,
    "pixelsnapmode": true
  });
  textShapes[4].getTextStyle().setFontWeight("bold").setOutline({
    "color": "yellow",
    "width": 1
  });
  textShapes[5].getTextStyle().setShadow({
    "enable": true,
    "blur": 5,
    "offsetx": 5,
    "offsety": 5,
    "color": "rgba(0, 0, 0, 0.5)"
  });
  return plot;
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# HTML Text Shape

Text can also contain html text formatting tags. Each tag can contain style attributes. HTML named characters are also supported.

import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { AlignmentStyle, BaseLineStyle } from "@int/geotoolkit/attributes/TextStyle.ts";
function createScene(canvas) {
  const lines = '<p>This text is Normal.</p><p><b>This text is Bold.</b></p><p><strong>This text is Strong.</strong></p><p><i>This text is Italic.</i></p><p><em>This text is Emphasized.</em></p><p><mark>This text is Marked.</mark></p><p><small>This text is Small.</small></p><p><del>This text is Deleted.</del></p><p><ins>This text is Inserted.</ins></p><p>This text is <sub>subscript</sub> and <sup>superscript.</sup></p><p style="font-size:14px">Use &#38;symbols; like &#38;#34; and &#38;deg; <br/>Example :<font style="font-size:20px">&#34;Temperature <b style="color:red">110&deg;</b><small>(<i style="color:gray"><ins color="blue">Fahrenheit</ins></i>)</small>&#34;</font></p><br/><p>Use images <img src="/solutions/geotoolkit/assets/images/home.gif" width="24" height="24"/> and emoji <img src="&#127969" width="24" height="24"/> inside text</p>';
  return new Plot({
    "canvaselement": canvas,
    "root": new Group().addChild([
      new Text({
        "text": lines,
        "ax": 50,
        "ay": 10,
        "textstyle": {
          "color": KnownColors.Black,
          "alignment": AlignmentStyle.Left,
          "baseline": BaseLineStyle.Alphabetic,
          "font": "26px Arial",
          "multiline": true
        },
        "alignment": AnchorType.LeftTop
      })
    ])
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Text Background and/or Border

Text can also include a solid background color or a solid outline border, or both.

import { SizeMode, Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { AlignmentStyle } from "@int/geotoolkit/attributes/TextStyle.ts";
function createNode(text, y) {
  return new Text({
    "text": text,
    "ax": 50,
    "ay": y,
    "width": 150,
    "height": 50,
    "textstyle": {
      "font": "16px Arial",
      "color": KnownColors.Black,
      "alignment": AlignmentStyle.Right
    },
    "sizeisindevicespace": false,
    "alignment": AnchorType.LeftCenter
  }).setSizeMode(SizeMode.FixedHeight);
}
function createScene(canvas) {
  const node1 = createNode("Alphabetical", 45).setFillStyle(KnownColors.LightBlue);
  const node2 = createNode("Alphabetical", 125).setLineStyle(KnownColors.Orange);
  const node3 = createNode("Alphabetical", 205).setFillStyle(KnownColors.LightBlue).setLineStyle(KnownColors.Orange);
  return new Plot({
    "canvaselement": canvas,
    "root": new Group().addChild([node1, node2, node3])
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Text Width Size

Text size can be defined by its width. The text height, if defined, is not used.

import { SizeMode, Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { getAnchor } from "/src/code/Carnac/Shapes/Text/anchor.ts";
import { AlignmentStyle } from "@int/geotoolkit/attributes/TextStyle.ts";
function createNode(text, y) {
  return new Text({
    "text": text,
    "ax": 50,
    "ay": y,
    "width": 150,
    "height": 50,
    "textstyle": {
      "color": KnownColors.Black,
      "alignment": AlignmentStyle.Right,
      "font": "16px Arial"
    },
    "sizeisindevicespace": false,
    "alignment": AnchorType.LeftCenter
  }).setSizeMode(SizeMode.FixedWidth);
}
function createScene(canvas) {
  const node1 = createNode("Alp", 70).setFillStyle(KnownColors.LightBlue);
  const node2 = createNode("Alphab", 170).setFillStyle(KnownColors.LightGray);
  const node3 = createNode("Alphabetical", 225).setFillStyle(KnownColors.Orange);
  const group = new Group().addChild([
    node1,
    getAnchor(node1.getAnchorX(), node1.getAnchorY()),
    node2,
    getAnchor(node2.getAnchorX(), node2.getAnchorY()),
    node3,
    getAnchor(node3.getAnchorX(), node3.getAnchorY())
  ]);
  return new Plot({
    "canvaselement": canvas,
    "root": group
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Text Height Size

Text size can be defined by its height. The text width, if defined, is not used.

import { SizeMode, Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { getAnchor } from "/src/code/Carnac/Shapes/Text/anchor.ts";
function createNode(text, y) {
  return new Text({
    "text": text,
    "ax": 50,
    "ay": y,
    "width": 175,
    "height": 50,
    "textstyle": { "font": "40px Arial" },
    "sizeisindevicespace": false,
    "alignment": AnchorType.LeftCenter
  }).setSizeMode(SizeMode.FixedHeight);
}
function createScene(canvas) {
  const node1 = createNode("Alp", 35).setFillStyle(KnownColors.LightBlue);
  const node2 = createNode("Alphab", 95).setFillStyle(KnownColors.LightGray);
  const node3 = createNode("Alphabetical", 155).setFillStyle(KnownColors.Orange);
  const node4 = createNode("Alpha on<br/>Two Lines", 215).setFillStyle(KnownColors.Yellow);
  const group = new Group().addChild([
    node1,
    getAnchor(node1.getAnchorX(), node1.getAnchorY()),
    node2,
    getAnchor(node2.getAnchorX(), node2.getAnchorY()),
    node3,
    getAnchor(node3.getAnchorX(), node3.getAnchorY()),
    node4,
    getAnchor(node4.getAnchorX(), node4.getAnchorY())
  ]);
  return new Plot({
    "canvaselement": canvas,
    "root": group
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Text Font Size

Text size can be defined by the size of the font. Text width and height definitions are not used.


.cg-tooltip-holder {
  position: relative;
}

.cg-tooltip {
  position: absolute;
  display: block;
  padding: 2px 12px 3px 7px;
  overflow: visible !important;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  background: white !important;
  opacity: 0.9;
  color: #333333;
  border: solid 1px gray;
  border-radius: 5px;
  text-align: left;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 5px;
  margin: 0 !important;
  z-index: 10000;
  max-width: 400px;
  text-wrap: normal !important;
  white-space: normal !important;
}
/* Default setting for tooltip */
.cg-tooltip-container {
  position: absolute;
  display: block;
  overflow: visible !important;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px;
  padding: 3px 7px;
  background: #f7f7f7;
  color: #333333;
  border: 1px solid #938e8e;
  opacity: 0.8;
  text-align: left;
  box-shadow: 3px 3px 10px #888;
  margin: 0 !important;
  z-index: 10000;
  max-width: 400px;
  text-wrap: normal !important;
  white-space: normal !important;
  user-select: none;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .cg-tooltip-container {
    border-radius: 0;
  }
}
/* Default left arrow for tooltip */
.cg-tooltip-arrow-left::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 0;
  top: 50%;
  border: 5px solid transparent;
  border-left: 0;
  border-right: 5px solid  #938e8e;
  transform: translate(calc(-100%), -50%);
}
.cg-tooltip-arrow-left::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 0;
  top: 50%;
  border: 4px solid transparent;
  border-left: 0;
  border-right: 4px solid #f7f7f7;
  transform: translate(calc(-100%), -50%);
}
/* Default top arrow for tooltip */
.cg-tooltip-arrow-top::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  top: 0;
  border: 5px solid transparent;
  border-top: 0;
  border-bottom: 5px solid #938e8e;
  transform: translate(-50%, -100%);
}
.cg-tooltip-arrow-top::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  top: 0;
  border: 4px solid transparent;
  border-top: 0;
  border-bottom: 4px solid #f7f7f7;
  transform: translate(-50%, -100%);
}
/* Default right arrow for tooltip */
.cg-tooltip-arrow-right::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  right: 0;
  top: 50%;
  border: 5px solid transparent;
  border-right: 0;
  border-left: 5px solid #938e8e;
  transform: translate(100%, -50%);
}
.cg-tooltip-arrow-right::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  right: 0;
  top: 50%;
  border: 4px solid transparent;
  border-right: 0;
  border-left: 4px solid #f7f7f7;
  transform: translate(100%, -50%);
}
/* Default bottom arrow for tooltip */
.cg-tooltip-arrow-bottom::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  bottom: 0px;
  border: 5px solid transparent;
  border-bottom: 0;
  border-top: 5px solid #938e8e;
  transform: translate(-50%, 100%);
  z-index: 10000;
}
.cg-tooltip-arrow-bottom::after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 50%;
  bottom: 0;
  border: 4px solid transparent;
  border-bottom: 0;
  border-top: 4px solid #f7f7f7;
  transform: translate(-50%, 100%);
  z-index: 10000;
}
/* Tooltip item name */
/* Tooltip item value */
/* .cg-tooltip-item-value */
/* Tooltip item value */
.cg-tooltip-item-unit {
  text-transform: none;
}

.cg-tooltip-item-name {
    text-transform: capitalize;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 13px;
}
.cg-tooltip-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 100%;
  margin: 1px 0;
}
.cg-tooltip-title {
  font-size: 13px;
  height: 14px;
  text-transform: capitalize;
}
.cg-tooltip-title .cg-tooltip-symbol {
  margin-right: 0 !important;
}
.cg-tooltip-title-name {
  vertical-align: middle;
}
.cg-tooltip-row + .cg-tooltip-row {
  margin-top: 4px;
}
.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {
  margin-top: 5px;
}
.cg-tooltip-item-value + .cg-tooltip-item-unit {
    margin-left: 1px;
}
/* Tooltip symbol */
.cg-tooltip-symbol-cell {
  display: inline-flex;
  min-width: 13px; /* 10px size + 3px margin */
}
.cg-tooltip-symbol {
  margin-right: 3px;
  background-color: transparent;
  display: block;
}
.cg-tooltip-symbol > img {
  display: block;
}
.cg-tooltip-list-cell {
  display: inline-flex;
}
.cg-tooltip-list-symbol {
  display: block;
  margin-right: 3px;
  width: 6px;
  height: 6px;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.4);
}
.cg-tooltip-symbol-legacy {
  border-radius: 4px;
  margin-right: 5px;
  height: 8px;
  width: 8px;
  display: inline-block;
}
.cg-tooltip-title-legacy {
  font-weight: 900;
}

/* Tooltip symbol circle */
.cg-tooltip-symbol.circle {
  height: 10px;
  width: 10px;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.4);
}
/* Tooltip symbol line */
.cg-tooltip-symbol.line {
    height: 10px;
    width: 10px;
    display: inline-block;
    transform: scale(1.2, 0.2);
}
/* Tooltip symbol diamond */
.cg-tooltip-symbol.diamond {
    height: 10px;
    width: 10px;
    display: inline-block;
    transform: rotate(45deg);
    border-radius: 0px;
}
/* Tooltip symbol square */
.cg-tooltip-symbol.square {
    height: 10px;
    width: 10px;
    display: inline-block;
    border-radius: 0px;
    border: 1px solid rgba(0,0,0,.4);
}

# Text Font When Possible Size

Text size will be displayed based on its font when possible, otherwise the text size will fit its width or height.

import { SizeMode, Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { getAnchor } from "/src/code/Carnac/Shapes/Text/anchor.ts";
function createNode(text, y, comment) {
  return new Text({
    "text": text,
    "ax": comment ? 225 : 50,
    "ay": y,
    "width": 150,
    "height": 50,
    "textstyle": comment ? { "font": "italic 20px Arial" } : { "font": "40px Arial" },
    "sizeisindevicespace": false,
    "alignment": AnchorType.LeftCenter
  }).setSizeMode(SizeMode.FromFontWhenPossible);
}
function createScene(canvas) {
  const node1 = createNode("Alp", 35).setFillStyle(KnownColors.LightBlue);
  const node2 = createNode("Alphab", 95).setFillStyle(KnownColors.LightGray);
  const node3 = createNode("Alphabetical", 155).setFillStyle(KnownColors.Yellow);
  const node4 = createNode("Alpha on<br/>Two Lines", 215).setFillStyle(KnownColors.Orange);
  const group = new Group().addChild([
    node1,
    getAnchor(node1.getAnchorX(), node1.getAnchorY()),
    node2,
    getAnchor(node2.getAnchorX(), node2.getAnchorY()),
    node3,
    getAnchor(node3.getAnchorX(), node3.getAnchorY()),
    node4,
    getAnchor(node4.getAnchorX(), node4.getAnchorY()),
    createNode("//fits width", 155, true),
    createNode("//fits height", 215, true)
  ]);
  return new Plot({
    "canvaselement": canvas,
    "root": group
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Text Wrap Mode

Text will wrap words whenever it possible to fit specified width.

import { SizeMode, Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { AlignmentStyle, OverflowWrapStyle, WhiteSpaceStyle, WordBreakStyle } from "@int/geotoolkit/attributes/TextStyle.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
function createScene(canvas) {
  const group = new Group().addChild([
    new Text({
      "text": `THE USE OF AND RELIANCE UPON THIS RECORDED-DATA BY THE HEREIN NAMED COMPANY
(AND ANY OF ITS AFFILIATES, PARTNERS, REPRESENTATIVES, AGENTS, CONSULTANTS AND EMPLOYEES)
IS SUBJECT TO THE TERMS AND CONDITIONS AGREED UPON BETWEEN 
INT AND THE COMPANY, INCLUDING:<br/>
(a) RESTRICTIONS ON USE OF THE RECORDEDDATA;(b) DISCLAIMERS AND WAIVERS OF WARRANTIES AND REPRESENTATIONS
REGARDING COMPANY'S USE AND RELIANCE UPON THE RECORDED-DATA; AND (c) CUSTOMER'S FULL AND SOLE RESPONSIBILITY
FOR ANY INFERENCE DRAWN OR DECISION MADE IN CONNECTION WITH THE USE OF THIS RECORDED-DATA.`,
      "ax": 50,
      "ay": 25,
      "width": 600,
      "textstyle": {
        "font": "15px Arial",
        "alignment": AlignmentStyle.Justify,
        "whitespace": WhiteSpaceStyle.Normal,
        "wordbreak": WordBreakStyle.BreakWord,
        "overflowwrap": OverflowWrapStyle.BreakWord
      },
      "alignment": AnchorType.LeftTop,
      "sizemode": SizeMode.WrappedWidth
    }).setPaddingStyle(10).setLineStyle({
      "color": "gray",
      "pixelsnapmode": true
    }).setFillStyle("#FDD83522")
  ]);
  return new Plot({
    "canvaselement": canvas,
    "root": group
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Label

Label control is based on text shape and allow to adjust it inside shape bounds. Label shape supports both model spaces, device space and parent model space.

import { Label } from "@int/geotoolkit/controls/shapes/Label.ts";
import { AlignmentStyle, OverflowWrapStyle, WhiteSpaceStyle, WordBreakStyle } from "@int/geotoolkit/attributes/TextStyle.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
function createScene(canvas) {
  const group = new Group().addChild([
    new Label({
      "text": `THE USE OF AND RELIANCE UPON THIS RECORDED-DATA BY THE HEREIN NAMED COMPANY
(AND ANY OF ITS AFFILIATES, PARTNERS, REPRESENTATIVES, AGENTS, CONSULTANTS AND EMPLOYEES)
IS SUBJECT TO THE TERMS AND CONDITIONS AGREED UPON BETWEEN 
INT AND THE COMPANY, INCLUDING:<br/>
(a) RESTRICTIONS ON USE OF THE RECORDEDDATA;(b) DISCLAIMERS AND WAIVERS OF WARRANTIES AND REPRESENTATIONS
REGARDING COMPANY'S USE AND RELIANCE UPON THE RECORDED-DATA; AND (c) CUSTOMER'S FULL AND SOLE RESPONSIBILITY
FOR ANY INFERENCE DRAWN OR DECISION MADE IN CONNECTION WITH THE USE OF THIS RECORDED-DATA.`,
      "x": 5,
      "y": 5,
      "width": 500,
      "height": 150,
      "textstyle": {
        "font": "11px Arial",
        "alignment": AlignmentStyle.Right,
        "whitespace": WhiteSpaceStyle.Normal,
        "wordbreak": WordBreakStyle.BreakWord,
        "overflowwrap": OverflowWrapStyle.BreakWord
      },
      "alignment": AnchorType.RightBottom,
      "padding": "0.1in",
      "linestyle": {
        "color": "gray",
        "pixelsnapmode": true
      },
      "fillstyle": "#FDD83522"
    })
  ]);
  return new Plot({
    "canvaselement": canvas,
    "root": group
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));