{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Text Shapes","description":"Accelerate E&P application development and protect your innovation by consuming our Data and Domain APIs / Platform APIs.","lang":"en-US","meta":[{"name":"robots","content":"noindex"}],"llmstxt":{"hide":true,"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"text-shapes","__idx":0},"children":["Text Shapes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The text shape is derived from ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/doc/classes/geotoolkit.scene.shapes.anchoredshape.anchoredshape.html"},"children":["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.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"To control text size, specify either the text width or height and allow Text Shapes to compute its other dimension.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Text Shapes also supports wrapping and splitting as shown in the Text Real-Time section of this tutorial."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"simple-text-shape","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Shapes/Text/textShapes#simple"},"children":["#"]}," Simple Text Shape"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Text can be just plain text."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Text } from \"@int/geotoolkit/scene/shapes/Text.ts\";\nimport { AnchorType } from \"@int/geotoolkit/util/AnchorType.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { AlignmentStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nfunction createScene(canvas) {\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": new Group().addChild([\n new Text({\n \"text\": \"Alphabetical\",\n \"ax\": 50,\n \"ay\": 50,\n \"textstyle\": {\n \"color\": KnownColors.Black,\n \"alignment\": AlignmentStyle.Left,\n \"font\": \"42px Arial\"\n },\n \"alignment\": AnchorType.LeftCenter\n })\n ])\n });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Shapes/Text/textShapes?section=simple&extract=true","width":"100%","height":"188.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"text-style-decorations","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Shapes/Text/textShapes#textStyleDecorations"},"children":["#"]}," Text Style Decorations"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In additional to Font style, Size and Color, Text Style has following decorations."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { SizeMode, Text } from \"@int/geotoolkit/scene/shapes/Text.ts\";\nimport { AnchorType } from \"@int/geotoolkit/util/AnchorType.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { VerticalBoxLayout } from \"@int/geotoolkit/layout/VerticalBoxLayout.ts\";\nimport { BaseLineStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nfunction createScene(canvas) {\n const textLines = [\"Bold style\", \"Italic style\", \"Underline style\", \"Strikethrough style\", \"Outline style\", \"Shadow style\"];\n const textShapes = [];\n for (let i = 0; i < textLines.length; i++) {\n textShapes.push(\n new Text({\n \"text\": textLines[i],\n \"textstyle\": {\n \"font\": \"32px Arial\",\n \"baseline\": BaseLineStyle.Alphabetic\n },\n \"alignment\": AnchorType.LeftTop,\n \"sizemode\": SizeMode.FromFont\n })\n );\n }\n const plot = new Plot({\n \"canvaselement\": canvas,\n \"root\": new Group().setPaddingStyle({\n \"left\": \"50px\",\n \"top\": \"10px\",\n \"bottom\": \"10px\"\n }).setLayout(new VerticalBoxLayout()).addChild(textShapes)\n });\n textShapes[0].getTextStyle().setFontWeight(\"bold\");\n textShapes[1].getTextStyle().setFontStyle(\"italic\");\n textShapes[2].getTextStyle().setUnderline({\n \"color\": \"red\",\n \"width\": 2,\n \"pixelsnapmode\": true\n });\n textShapes[3].getTextStyle().setStrikethrough({\n \"color\": \"red\",\n \"width\": 2,\n \"pixelsnapmode\": true\n });\n textShapes[4].getTextStyle().setFontWeight(\"bold\").setOutline({\n \"color\": \"yellow\",\n \"width\": 1\n });\n textShapes[5].getTextStyle().setShadow({\n \"enable\": true,\n \"blur\": 5,\n \"offsetx\": 5,\n \"offsety\": 5,\n \"color\": \"rgba(0, 0, 0, 0.5)\"\n });\n return plot;\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Shapes/Text/textShapes?section=textStyleDecorations&extract=true","width":"100%","height":"328.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"html-text-shape","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Shapes/Text/textShapes#html"},"children":["#"]}," HTML Text Shape"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Text can also contain ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://www.w3schools.com/html/html_formatting.asp"},"children":["html text formatting tags"]},". Each tag can contain style attributes. ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references"},"children":["HTML named characters"]}," are also supported."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { AnchorType } from \"@int/geotoolkit/util/AnchorType.ts\";\nimport { Text } from \"@int/geotoolkit/scene/shapes/Text.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { AlignmentStyle, BaseLineStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nfunction createScene(canvas) {\n const lines = '

This text is Normal.

This text is Bold.

This text is Strong.

This text is Italic.

This text is Emphasized.

This text is Marked.

This text is Small.

This text is Deleted.

This text is Inserted.

This text is subscript and superscript.

Use &symbols; like &#34; and &deg;
Example :"Temperature 110°(Fahrenheit)"


Use images and emoji inside text

';\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": new Group().addChild([\n new Text({\n \"text\": lines,\n \"ax\": 50,\n \"ay\": 10,\n \"textstyle\": {\n \"color\": KnownColors.Black,\n \"alignment\": AlignmentStyle.Left,\n \"baseline\": BaseLineStyle.Alphabetic,\n \"font\": \"26px Arial\",\n \"multiline\": true\n },\n \"alignment\": AnchorType.LeftTop\n })\n ])\n });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Shapes/Text/textShapes?section=html&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"text-background-andor-border","__idx":4},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Shapes/Text/textShapes#backgroundBorder"},"children":["#"]}," Text Background and/or Border"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Text can also include a solid background color or a solid outline border, or both."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { SizeMode, Text } from \"@int/geotoolkit/scene/shapes/Text.ts\";\nimport { AnchorType } from \"@int/geotoolkit/util/AnchorType.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { AlignmentStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nfunction createNode(text, y) {\n return new Text({\n \"text\": text,\n \"ax\": 50,\n \"ay\": y,\n \"width\": 150,\n \"height\": 50,\n \"textstyle\": {\n \"font\": \"16px Arial\",\n \"color\": KnownColors.Black,\n \"alignment\": AlignmentStyle.Right\n },\n \"sizeisindevicespace\": false,\n \"alignment\": AnchorType.LeftCenter\n }).setSizeMode(SizeMode.FixedHeight);\n}\nfunction createScene(canvas) {\n const node1 = createNode(\"Alphabetical\", 45).setFillStyle(KnownColors.LightBlue);\n const node2 = createNode(\"Alphabetical\", 125).setLineStyle(KnownColors.Orange);\n const node3 = createNode(\"Alphabetical\", 205).setFillStyle(KnownColors.LightBlue).setLineStyle(KnownColors.Orange);\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": new Group().addChild([node1, node2, node3])\n });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Shapes/Text/textShapes?section=backgroundBorder&extract=true","width":"100%","height":"338.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"text-width-size","__idx":5},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Shapes/Text/textShapes#widthSize"},"children":["#"]}," Text Width Size"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Text size can be defined by its width. The text height, if defined, is not used."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { SizeMode, Text } from \"@int/geotoolkit/scene/shapes/Text.ts\";\nimport { AnchorType } from \"@int/geotoolkit/util/AnchorType.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { getAnchor } from \"/src/code/Carnac/Shapes/Text/anchor.ts\";\nimport { AlignmentStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nfunction createNode(text, y) {\n return new Text({\n \"text\": text,\n \"ax\": 50,\n \"ay\": y,\n \"width\": 150,\n \"height\": 50,\n \"textstyle\": {\n \"color\": KnownColors.Black,\n \"alignment\": AlignmentStyle.Right,\n \"font\": \"16px Arial\"\n },\n \"sizeisindevicespace\": false,\n \"alignment\": AnchorType.LeftCenter\n }).setSizeMode(SizeMode.FixedWidth);\n}\nfunction createScene(canvas) {\n const node1 = createNode(\"Alp\", 70).setFillStyle(KnownColors.LightBlue);\n const node2 = createNode(\"Alphab\", 170).setFillStyle(KnownColors.LightGray);\n const node3 = createNode(\"Alphabetical\", 225).setFillStyle(KnownColors.Orange);\n const group = new Group().addChild([\n node1,\n getAnchor(node1.getAnchorX(), node1.getAnchorY()),\n node2,\n getAnchor(node2.getAnchorX(), node2.getAnchorY()),\n node3,\n getAnchor(node3.getAnchorX(), node3.getAnchorY())\n ]);\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": group\n });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Shapes/Text/textShapes?section=widthSize&extract=true","width":"100%","height":"338.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"text-height-size","__idx":6},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Shapes/Text/textShapes#heightSize"},"children":["#"]}," Text Height Size"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Text size can be defined by its height. The text width, if defined, is not used."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { SizeMode, Text } from \"@int/geotoolkit/scene/shapes/Text.ts\";\nimport { AnchorType } from \"@int/geotoolkit/util/AnchorType.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { getAnchor } from \"/src/code/Carnac/Shapes/Text/anchor.ts\";\nfunction createNode(text, y) {\n return new Text({\n \"text\": text,\n \"ax\": 50,\n \"ay\": y,\n \"width\": 175,\n \"height\": 50,\n \"textstyle\": { \"font\": \"40px Arial\" },\n \"sizeisindevicespace\": false,\n \"alignment\": AnchorType.LeftCenter\n }).setSizeMode(SizeMode.FixedHeight);\n}\nfunction createScene(canvas) {\n const node1 = createNode(\"Alp\", 35).setFillStyle(KnownColors.LightBlue);\n const node2 = createNode(\"Alphab\", 95).setFillStyle(KnownColors.LightGray);\n const node3 = createNode(\"Alphabetical\", 155).setFillStyle(KnownColors.Orange);\n const node4 = createNode(\"Alpha on
Two Lines\", 215).setFillStyle(KnownColors.Yellow);\n const group = new Group().addChild([\n node1,\n getAnchor(node1.getAnchorX(), node1.getAnchorY()),\n node2,\n getAnchor(node2.getAnchorX(), node2.getAnchorY()),\n node3,\n getAnchor(node3.getAnchorX(), node3.getAnchorY()),\n node4,\n getAnchor(node4.getAnchorX(), node4.getAnchorY())\n ]);\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": group\n });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Shapes/Text/textShapes?section=heightSize&extract=true","width":"100%","height":"338.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"text-font-size","__idx":7},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Shapes/Text/textShapes#fontSize"},"children":["#"]}," Text Font Size"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Text size can be defined by the size of the font. Text width and height definitions are not used."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { SizeMode, Text } from \"@int/geotoolkit/scene/shapes/Text.ts\";\nimport { AnchorType } from \"@int/geotoolkit/util/AnchorType.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { getAnchor } from \"/src/code/Carnac/Shapes/Text/anchor.ts\";\nfunction createNode(text, y) {\n return new Text({\n \"text\": text,\n \"ax\": 50,\n \"ay\": y,\n \"width\": 175,\n \"height\": 50,\n \"textstyle\": { \"font\": \"40px Arial\" },\n \"sizeisindevicespace\": false,\n \"alignment\": AnchorType.LeftCenter\n }).setSizeMode(SizeMode.FromFont);\n}\nfunction createScene(canvas) {\n const node1 = createNode(\"Alp\", 25).setFillStyle(KnownColors.LightBlue);\n const node2 = createNode(\"Alphab\", 80).setFillStyle(KnownColors.LightGray);\n const node3 = createNode(\"Alphabetical\", 135).setFillStyle(KnownColors.Orange);\n const node4 = createNode(\"Alpha on
Two Lines\", 205).setFillStyle(KnownColors.Yellow);\n const group = new Group().addChild([\n node1,\n getAnchor(node1.getAnchorX(), node1.getAnchorY()),\n node2,\n getAnchor(node2.getAnchorX(), node2.getAnchorY()),\n node3,\n getAnchor(node3.getAnchorX(), node3.getAnchorY()),\n node4,\n getAnchor(node4.getAnchorX(), node4.getAnchorY())\n ]);\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": group\n });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Shapes/Text/textShapes?section=fontSize&extract=true","width":"100%","height":"338.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"text-font-when-possible-size","__idx":8},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Shapes/Text/textShapes#fontWhenPossibleSize"},"children":["#"]}," Text Font When Possible Size"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Text size will be displayed based on its font when possible, otherwise the text size will fit its width or height."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { SizeMode, Text } from \"@int/geotoolkit/scene/shapes/Text.ts\";\nimport { AnchorType } from \"@int/geotoolkit/util/AnchorType.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { getAnchor } from \"/src/code/Carnac/Shapes/Text/anchor.ts\";\nfunction createNode(text, y, comment) {\n return new Text({\n \"text\": text,\n \"ax\": comment ? 225 : 50,\n \"ay\": y,\n \"width\": 150,\n \"height\": 50,\n \"textstyle\": comment ? { \"font\": \"italic 20px Arial\" } : { \"font\": \"40px Arial\" },\n \"sizeisindevicespace\": false,\n \"alignment\": AnchorType.LeftCenter\n }).setSizeMode(SizeMode.FromFontWhenPossible);\n}\nfunction createScene(canvas) {\n const node1 = createNode(\"Alp\", 35).setFillStyle(KnownColors.LightBlue);\n const node2 = createNode(\"Alphab\", 95).setFillStyle(KnownColors.LightGray);\n const node3 = createNode(\"Alphabetical\", 155).setFillStyle(KnownColors.Yellow);\n const node4 = createNode(\"Alpha on
Two Lines\", 215).setFillStyle(KnownColors.Orange);\n const group = new Group().addChild([\n node1,\n getAnchor(node1.getAnchorX(), node1.getAnchorY()),\n node2,\n getAnchor(node2.getAnchorX(), node2.getAnchorY()),\n node3,\n getAnchor(node3.getAnchorX(), node3.getAnchorY()),\n node4,\n getAnchor(node4.getAnchorX(), node4.getAnchorY()),\n createNode(\"//fits width\", 155, true),\n createNode(\"//fits height\", 215, true)\n ]);\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": group\n });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Shapes/Text/textShapes?section=fontWhenPossibleSize&extract=true","width":"100%","height":"338.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"text-wrap-mode","__idx":9},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Shapes/Text/textShapes#textWrapMode"},"children":["#"]}," Text Wrap Mode"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Text will wrap words whenever it possible to fit specified width."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { SizeMode, Text } from \"@int/geotoolkit/scene/shapes/Text.ts\";\nimport { AlignmentStyle, OverflowWrapStyle, WhiteSpaceStyle, WordBreakStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nimport { AnchorType } from \"@int/geotoolkit/util/AnchorType.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nfunction createScene(canvas) {\n const group = new Group().addChild([\n new Text({\n \"text\": `THE USE OF AND RELIANCE UPON THIS RECORDED-DATA BY THE HEREIN NAMED COMPANY\n(AND ANY OF ITS AFFILIATES, PARTNERS, REPRESENTATIVES, AGENTS, CONSULTANTS AND EMPLOYEES)\nIS SUBJECT TO THE TERMS AND CONDITIONS AGREED UPON BETWEEN \nINT AND THE COMPANY, INCLUDING:
\n(a) RESTRICTIONS ON USE OF THE RECORDEDDATA;(b) DISCLAIMERS AND WAIVERS OF WARRANTIES AND REPRESENTATIONS\nREGARDING COMPANY'S USE AND RELIANCE UPON THE RECORDED-DATA; AND (c) CUSTOMER'S FULL AND SOLE RESPONSIBILITY\nFOR ANY INFERENCE DRAWN OR DECISION MADE IN CONNECTION WITH THE USE OF THIS RECORDED-DATA.`,\n \"ax\": 50,\n \"ay\": 25,\n \"width\": 600,\n \"textstyle\": {\n \"font\": \"15px Arial\",\n \"alignment\": AlignmentStyle.Justify,\n \"whitespace\": WhiteSpaceStyle.Normal,\n \"wordbreak\": WordBreakStyle.BreakWord,\n \"overflowwrap\": OverflowWrapStyle.BreakWord\n },\n \"alignment\": AnchorType.LeftTop,\n \"sizemode\": SizeMode.WrappedWidth\n }).setPaddingStyle(10).setLineStyle({\n \"color\": \"gray\",\n \"pixelsnapmode\": true\n }).setFillStyle(\"#FDD83522\")\n ]);\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": group\n });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Shapes/Text/textShapes?section=textWrapMode&extract=true","width":"100%","height":"263.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"label","__idx":10},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Shapes/Text/textShapes#label"},"children":["#"]}," Label"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Label } from \"@int/geotoolkit/controls/shapes/Label.ts\";\nimport { AlignmentStyle, OverflowWrapStyle, WhiteSpaceStyle, WordBreakStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nimport { AnchorType } from \"@int/geotoolkit/util/AnchorType.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nfunction createScene(canvas) {\n const group = new Group().addChild([\n new Label({\n \"text\": `THE USE OF AND RELIANCE UPON THIS RECORDED-DATA BY THE HEREIN NAMED COMPANY\n(AND ANY OF ITS AFFILIATES, PARTNERS, REPRESENTATIVES, AGENTS, CONSULTANTS AND EMPLOYEES)\nIS SUBJECT TO THE TERMS AND CONDITIONS AGREED UPON BETWEEN \nINT AND THE COMPANY, INCLUDING:
\n(a) RESTRICTIONS ON USE OF THE RECORDEDDATA;(b) DISCLAIMERS AND WAIVERS OF WARRANTIES AND REPRESENTATIONS\nREGARDING COMPANY'S USE AND RELIANCE UPON THE RECORDED-DATA; AND (c) CUSTOMER'S FULL AND SOLE RESPONSIBILITY\nFOR ANY INFERENCE DRAWN OR DECISION MADE IN CONNECTION WITH THE USE OF THIS RECORDED-DATA.`,\n \"x\": 5,\n \"y\": 5,\n \"width\": 500,\n \"height\": 150,\n \"textstyle\": {\n \"font\": \"11px Arial\",\n \"alignment\": AlignmentStyle.Right,\n \"whitespace\": WhiteSpaceStyle.Normal,\n \"wordbreak\": WordBreakStyle.BreakWord,\n \"overflowwrap\": OverflowWrapStyle.BreakWord\n },\n \"alignment\": AnchorType.RightBottom,\n \"padding\": \"0.1in\",\n \"linestyle\": {\n \"color\": \"gray\",\n \"pixelsnapmode\": true\n },\n \"fillstyle\": \"#FDD83522\"\n })\n ]);\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": group\n });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Shapes/Text/textShapes?section=label&extract=true","width":"100%","height":"263.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Text Shapes","id":"text-shapes","depth":1},{"value":"Simple Text Shape","id":"simple-text-shape","depth":3},{"value":"Text Style Decorations","id":"text-style-decorations","depth":3},{"value":"HTML Text Shape","id":"html-text-shape","depth":3},{"value":"Text Background and/or Border","id":"text-background-andor-border","depth":3},{"value":"Text Width Size","id":"text-width-size","depth":3},{"value":"Text Height Size","id":"text-height-size","depth":3},{"value":"Text Font Size","id":"text-font-size","depth":3},{"value":"Text Font When Possible Size","id":"text-font-when-possible-size","depth":3},{"value":"Text Wrap Mode","id":"text-wrap-mode","depth":3},{"value":"Label","id":"label","depth":3}],"frontmatter":{"title":"Text Shapes","seo":{"title":"Text Shapes"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/carnac/shapes/text-shapes","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}