Texts

Texts are widgets where users can insert and format a text, enabling them to provide context and add annotations easily within slides and dialogs. These widgets can be found in the Widgets panel of the stage.

Widgets in the Text category can also be used in reports. For more information on creating reports in Rulex Studio, click here.

Note

The event triggers available for Texts widgets are:

• onClick

• onMouseEnter

• onMouseLeave

• onFocus

• onType

• onChange

The available text types include:

• Text

• Card Text

After selecting the desired text type, users can drag it onto the stage and type text inside it.

Like all widgets, by right-clicking on the text’s border, users can perform several operations through the Widget context menu. These operations are common across all widgets except for the Open widget layout entry, which is specific to each widget type. By selecting this option, users can customize their text.

In the table below, users can find all the available options of the Layout options window and their corresponding GOLD references. These settings can also be modified using parametric mode.

CARD

Subsection	Option	Description	GOLD Ref
Background	Elevation	It controls the elevation effect of the widget. Increasing the elevation gives the impression of the Texts widget being more lifted and adds depth to it.
Border	Border style	It defines the widget border style. The available values are: Dotted, Dashed, Solid, Double, 3D Ridge, 3D Inset, 3D Outset, None, Hidden.
Additional Style	Cell style	Here, users can insert a CSS string by typing: CSSkeyname:CSSkeyvalue;

TITLE

Subsection	Option	Description	GOLD Ref
Background	Background color	It defines the background color of the header. By clicking it, users can select Standard colors and generated color palettes, otherwise they can use the color picker or choose the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is light blue.
	Header height (px)	It defines the height of the header in pixels.
Border	Border style	It defines the header style. The available values are: Dotted, Dashed, Solid, Double, 3D Ridge, 3D Inset, 3D Outset, None, Hidden.
Text	Text style and alignment	Here, users can define the text style, which can be bold, italic or underlined, as well as the text horizontal alignment, which can be left, center or right.
	Text	Here, it is possible to type the title appearing in the header.
	Font family	It defines the font of the title. Users can select the desired one in the drop-down menu.
	Font size (px)	It defines the size of the title in pixels.
	Font color	It defines the color of the title. By clicking it, users can select Standard colors and generated color palettes, otherwise they can use the color picker or choose the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is dark blue.
Additional style	Cell style	Here, users can insert a CSS string by typing: CSSkeyname:CSSkeyvalue;

TEXT

Subsection	Option	Description	GOLD Ref
Background	Background color	It defines the default text background color. By clicking it, users can select Standard colors and generated color palettes, otherwise they can use the color picker or choose the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is white.
Border	Border style	It defines the text border style. The available values are: Dotted, Dashed, Solid, Double, 3D Ridge, 3D Inset, 3D Outset, None, Hidden.
	Open links on external window	This option is useful when texts are linked to a website. If this option remains unchecked, the website will open on the same window. If this option is checked, the website will open on a new external window.
Text	Text style and alignment	Here, users can define the default text style, which can be bold, italic or underlined, the default text horizontal alignment, which can be left, center or right, as well as the default text vertical alignment, which can be center, top, bottom.
	Font family	It defines the default font of the text title. Users can select the desired one in the drop-down menu.
	Font size (px)	It defines the default size of the text.
	Line spacing	It defines the vertical space between text lines, improving the readability of your content.
	Font color	It defines the default color of the text. By clicking it, users can select Standard colors and generated color palettes, otherwise they can use the color picker or choose the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is black.
Additional style	Cell style	Here, users can insert a CSS string by typing: CSSkeyname:CSSkeyvalue;

---

Text Formatting Menu

In the bottom right corner of every Texts widget, a three dotted icon allows users access to several text formatting options:

• Bold: users can emphasize their text by selecting this button, or they can use the Ctrl + B shortcut.

• Italics: users can format their text in italics by selecting this button, or they can use the Ctrl + I shortcut.

• Underline: users can underline their text by selecting this button, or they can use the Ctrl + U shortcut.

• Strikethrough: users can strike through their text by selecting this button, or they can use the Ctrl + Shift + S shortcut.

• Subscript: this feature allows users to format numbers and letters as subscripts, positioning them slightly below the baseline of the text.

• Superscript: this feature allows users to format numbers and letters as superscripts, positioning them slightly above the baseline of the text.

• Change the font: this option changes the font of the selected text.

• Change the font size: this option changes the font size of the selected text.

• Change the font color: it allows users to select the desired color for their text fonts and choose their desired color from the palette.

• Change the text color: it allows users to color the selected text and choose their desired color from the palette.

• Text horizontal alignment area: here, users can define the text horizontal alignment, which can be left, center, right and justify.

• Bulleted list: it allows users to create bulleted lists.

• Numbered list: it allows users to create numbered lists.

• Insert table: it creates a table within the corresponding Texts widget. Upon selecting this icon, a pop-up appears, where users can define the following options:

  • Rows: this spin-box allows users to select the number of rows for the table.

  • Columns: this spin-box allows users to select the number of columns for the table.

  • Cell padding (px): it defines the space in pixels between the border of a table cell and its content.

  • Border spacing (px): it defines the distance in pixels between the borders of adjacent table cells.

  • With header row: if selected, this checkbox adds a header row to the table.

• Insert formula: this icon is automatically selected, whenever users enter a GOLD function within a Texts widget. In formulae, column names must always be preceded by the $ symbol, as explained in this section. Additionally, in Rulex Studio, the dataset’s name must be specified before the column name when applying a function, such as in this example: len($"TableName!ColumnName"). Enclosing the text in a double `` will automatically convert the text contained in a formula box.

• Insert link: if selected, this icon opens a pop-up window where users can enter a link. Three link types can be defined:

  • for web pages: enter a link in HTTPS format in the provided text field.

  • to link another slide within the same view: for example, to link a slide named Slide_2, enter #Slide2.

  • To link a slide that opens with a filter set on a widget of the Actions category: for example, to filter on the widget named filterbutton1 with the value Label1 on the slide named #Slide_2, enter #Slide_2?widgetfilterbutton1=Label1.

For more details on how to use links effectively in Rulex Studio, click here.

Note

If users define precise formatting options in the Text tab of the Layout options window, and later adjust these settings using the text formatting menu for the same Text widget, the options set in the text formatting menu will override those previously defined in the Layout options window.

Tip

By default, if users drag an integer or continuous attribute onto a Texts widget, the mean will be automatically shown, while if users drop a nominal attribute onto a Texts widget, the mode will be automatically shown.

---

Text Context Menus

Specific text context menus appear when users right-click on text or cells within tables inside a Text widget.

When right-clicking on regular text in these widgets, the available options include:

• Undo: to undo a change in the text, select this option or use the Ctrl + Z shortcut.

• Redo: to restore a previously undone change, select this option or use the Ctrl + Y shortcut.

• Copy: to copy a text, select this option or use the Ctrl + C shortcut.

• Cut: to cut a text, select this option or use the Ctrl + X shortcut.

• Paste: to paste a text, select this option or use Ctrl + V shortcut.

• Select all: to pick all text within the widget, select this option or use the Ctrl + A shortcut.

• Add current date: it adds the current datetime within the selected Text widget. By selecting this option a pop-up window appears, prompting users to choose from a drop-down menu the following datetime formats:

  • Weekday, date, time

  • Weekday and date

  • Full datetime

  • Datetime (dots)

  • Full date

  • Date (slashes)

  • Date (dots)

  • American date format (month-day-year)

  • Time with seconds

  • Time

When right-clicking on cells within tables inside a Text widget, the available options are:

• Add row before: it adds a row before the selected cell.

• Add row after: it adds a row after the selected cell.

• Add column before: it adds a column before the selected cell.

• Add column after: it adds a column after the selected cell.

• Delete row: it deletes the selected row.

• Delete column: it deletes the selected column.

• Delete table: it deletes the entire text table.

• Merge cells: it merges adjacent cells.

• Split cell: it splits two merged cells.

• Make header column: it creates a header that spans vertically across the selected column.

• Make header row: it creates a header that spans horizontally across the selected row.

---

Texts Schema

A text is completely described through a JSON object composed by 2 different areas:

• options, retaining all the graphical and functional options which require a re-evaluation of the graphic layout.

• layout, the rest of the graphical options which do not require a re-evaluation of the graphic.

The whole JSON object is saved as a GOLD dictionary in the layout field of the Graphic class.

The schema of the JSON object is presented in YAML format commented.

layout:
  cardCss: #object containing the information that affects the widget container
    elevation: #set and add shadows below the widget simulating elevation effect
    borderStyle: #set the style of the border
    borderColor: #set the color of the border
    borderWidth: #set the thickness of the border
    addStyle: #allow to add custom css style. The css key must be written in camel case and without wrapping the text between curly braces. Here's an example = borderColor:blue;backgroundColor:red;
  titleCss: #object containing the information that affects the widget header
    backgroundColor: #set the background color
    height: #set the height of the header
    borderStyle: #set the style of the border
    borderColor: #set the color of the border
    borderWidth: #set the thickness of the border
    fontWeight: #set the font thickness(bold/normal)
    fontStyle: #set the style of the font(normal/italic)
    textDecoration: #set the underlining of the font(none/underlined)
    textAlign: #set the horizontal alignment of the text
    text: #set the text of the header
    fontFamily: #set the font family
    fontSize: #set the font size in px
    color: #set the text color
    addStyle: #allow to add custom css style. The css key must be written in camel case and without wrapping the text between curly braces. Here's an example = borderColor:blue;backgroundColor:red;
  textCss: #object containing the information that affects the widget content
    backgroundColor: #set the background color
    borderStyle: #set the style of the border
    borderColor: #set the color of the border
    borderWidth: #set the thickness of the border
    external: #set if the link page will be opened in an external window or in the current one
    hoverColor: #set the color change of the text when the element is hovered
    fontWeight: #set the font thickness(normal/bold)
    fontStyle: #set the style of the font(normal/italic)
    textDecoration: #set the underlining of the font(none/underlined)
    textAlign: #set the horizontal alignment of the text
    vAlignment: #set the vertical alignment of the text
    text: #set the text of the header
    fontFamily: #set the font family
    fontSize: #set the font size in px
    lineHeight: #
    color: #set the text color
    addStyle: #allow to add custom css style. The css key must be written in camel case and without wrapping the text between curly braces. Here's an example = borderColor:blue;backgroundColor:red;
  link: #set the url's link or the slide name as for example #Slide2 or https://www.rulex.ai. This allow by clicking the widget to navigate to the set link
options:
  type: #the widget type