Working with Rich Text Formatting

This section describes how to use the text format.
You can use the text formatting feature in the input field of some applications if the system administrator allows you to use it. For example, you can use it for body texts and comment fields in Bulletin Board and Messages.

Steps:
  1. In the input field where you can use the text format, select the item to use text format. Image of switching to Text format

  2. Edit comments and body text using the following text formatting features.

    To check how the changed content is displayed, click the Preview icon.

    Screenshot: The Preview icon is highlighted

Applying Decoration to Text

Change the color and size of the text.

Screenshot: The icons to decorate texts are highlighted on the Rich text toolbar

Description of the items
Number Description
1 Font name:
Change the font type.
2 Font size:
Change the size of the text.
3
  • Bold:
    Make text bold.
  • Italic:
    Make text italic.
  • Underline:
    Add an underline to the character.
  • Strikethrough:
    Add a strikethrough to the character.
4
  • Text color:
    Change the text color.
    Click Custom color icon to select a color in the color picker.
    Screenshot: The image with the custom color icon highlighted and the image of the color picker
  • Background color:
    Change the background color of the text.
    Click Custom color icon to select a color in the color picker.
5 Clear formatting:
Clear the formatting that you have set.
The default format is applied when you clear formatting.

Undo or Redo the Action

You can undo the action just performed or redo the undone action.

Screenshot: The Undo and Redo icons are highlighted on the Rich text toolbar

Description of the items
Number Description
1 Undo:
Cancel the action just performed.
2 Redo:
Perform the canceled action again.

Changing the Layout of Texts

Change the layout of texts (Bullet lists and quotes, for example).

Screenshot: The icons to change the text layout are highlighted on the Rich text toolbar

Description of the items
Number Description
1
  • Bullet list:
    Make texts into a bullet list. Symbols are added at the beginning of each line.
  • Numbered list:
    Make the texts into a numbered list. Sequential numbers are added at the beginning of each line.
2
  • Align left:
    Align the text left.
  • Align center:
    Align the text center.
  • Align right:
    Align the text right.
3
  • Decrease indent:
    Decrease the indent of the text.
  • Increase indent:
    Increase the indent of the text.
4 Blockquote:
Specify rows as quotes. Image of the quoted text

Inserting Links

Create linked texts and images.

Steps:
  1. Click the insert/edit link icon.

    Screenshot: Insert/edit link icon is highlighted

  2. On the "Insert/Edit Link" screen, configure the following items.

    Screenshot: The "Insert/Edit Link" screen

    • Target link URL:
      You can specify any URL that starts with one of the following:
      ed2k:, ftp:, gopher:, http:, https:, irc:, mailto:, news:, nntp:, telnet:, webcal:, xmpp:, callto:
    • Text to display:
      Enter the text to display as a link. If you have already selected a text, it becomes the text to display.
    • Additional information:
      If the selected text is insufficient for describing the link target, enter an additional description.
      The added description will appear when hovering the cursor over the link.
    • Open link in:
      Select how to display the linked page.
      • Current window:
        The linked page will be displayed in the same tab.
      • New window:
        The linked page will be displayed in a separate tab.

  3. Click Save.

Inserting Tables

Create tables. Configure the table details as necessary.

Steps:
  1. Click the Table icon, and hover the cursor over the "Table" shown on the menu.

    Screenshot: The "Table" on the menu is highlighted

  2. Create a table using the menu to configure table cells.

    Move the cursor to select the number of columns and rows you want to create and click them.
    You can drag to change the table size, column width, and row height of the created table.
    Screenshot: Selecting the number of columns and rows on the menu to set table cells

  3. If necessary, configure table details using the menus that appear when clicking the created table.

    • If you left-click the table:
      You will see menus to insert/delete columns and rows, and merge/split cells. Screenshot: Showing the dialog that appears when you left-click

    • If you right-click the table:
      The following menus are displayed.

      • Table
      • Delete table
      • Cell properties:
        For cells, you can configure the background color and border, and specify the width and height in numbers. For details, refer to Cell Properties.
      • Row properties:
        For rows, you can configure the background color and border, and specify the height in numbers. For details, refer to Row Properties.

      Screenshot: Showing the menu that appears when you right-click

    • If you click the Table icon on the toolbar:
      The following menus are displayed.

      • Table
      • Cell
      • Row
      • Column
      • Table properties:
        For tables, you can configure the background color and border, and specify the width and height in numbers. For details, refer to Table Properties.
      • Delete table

      Screenshot: Showing a menu that appears when you click the Table icon on the toolbar

Table Properties

This section describes the fields you can configure in "Table Properties".
Use "General" tab to change the width and height of the table. You can configure the table border color and background color in the "Advanced" tab.

General Settings

The following options are available:

Screenshot: The "General" tab of the "Table Properties" screen

  • Width:
    Change the table width.
    When you input the value only in numbers, the pixel (px) is used as a unit of measurement for configuration.
    You can configure the width in a ratio relative to the screen width by adding a percent sign (%) after the numeric value.
  • Height:
    Specify the table height using the numeric value.
  • Cell spacing:
    This feature is currently unavailable.
  • Cell padding:
    Specify the cell padding using the numeric value.
  • Border width:
    Specify the outer border width of the table using the numeric value.
  • Alignment:
    Select the horizontal position of the table (left, center, or right) within the body text or in the comment field.
  • Caption:
    Configure the caption.
    Select the "Show caption" checkbox and click Save. Hover the cursor over the "Caption" displayed on the top of the table and change it to any text you like. Screenshot: An example with a caption displayed
Advanced

The following options are available:

Screenshot: The "Advanced" tab of the "Table Properties" screen

  • Border style:
    Select the type of outer border of the table.
  • Border color:
    Select the color of border of the table.
    You can either enter a color code or select a color from the menu that is displayed when you click color swatch icon. Click the Custom color icon on the menu to display a color picker. Screenshot: The image with the custom color icon highlighted and the image of the color picker
  • Background color:
    Configure the background color of the table.
    You can either enter a color code or select a background color for a table from the menu that is displayed when you click color swatch icon. Click the Custom color icon on the menu to display a color picker.

Row Properties

This section describes the fields you can configure in "Row Properties".
Use "General" tab to change the height and alignment of the row. Use "Advanced" tab to configure the border style and background color for the row.

General Settings

The following options are available:

Screenshot: The "General" tab of "Row Properties"

  • Row type:
    Change the row type to a header or a footer.
  • Alignment:
    Configure the alignment of a text in the row.
  • Height:
    Configure the height of the row.
    Entering only the numeric value will specify the size in pixels (px).
    If you have configured the table height in Table Properties, you can configure the row height in a ratio relative to the table height by adding a percent sign (%) after the numeric value.
Advanced

The following options are available:

Screenshot: The "Advanced" tab of "Row Properties"

  • Border style:
    Select the type of outer border of the row.
  • Border color:
    Select the color of border of the row.
    You can either enter a color code or select a color from the menu that is displayed when you click color swatch icon. Click the Custom color icon on the menu to display a color picker.
  • Background color:
    Configure the background color of the row.
    You can either enter a color code or select a color from the menu that is displayed when you click color swatch icon. Click the Custom color icon on the menu to display a color picker.

Cell Properties

This section describes the fields you can configure in "Cell Properties".
Use "General" tab to change the width and height of the cell. Use "Advanced" tab to configure the border style and background color for the cell.

General Settings

The following options are available:

Screenshot: The "General" tab of "Cell Properties"

  • Width:
    Configure the width of the selected column. Select the entire column (not the cell) before making any configuration.
    You can configure the column width in a ratio relative to the entire table by adding a percent sign (%) after the numeric value.
    Entering only the numeric value will specify the size in pixels (px). If you configure the width in pixels, make sure that the table width in Table Properties matches the total width of the columns.
  • Height:
    Configure the height of the selected row. Select the entire row (not the cell) before making any configuration.
    Entering only the numeric value will specify the size in pixels (px).
    If you have configured the table height in Table Properties, you can configure the row height in a ratio relative to the table height by adding a percent sign (%) after the numeric value.
  • Cell type:
    Configure whether you want to make the selected cell a header cell.
  • Header cell scope:
    Configure this field if you have selected "Header cell" in the "Cell type" field. You can specify whether the header cell is for a row or a column.
    The "Row group" and the "Column group" options do not work at the moment.
  • Horizontal alignment:
    Configure the horizontal position of a text in the cell (left, center, or right).
  • Vertical alignment:
    Configure the vertical position of a text in the cell (top, middle, or bottom).
Advanced

The following options are available:

Screenshot: The "Advanced" tab of "Row Properties"

  • Border width:
    Specify the border width of the cell using the numeric value.
  • Border style:
    Select the style of border of the cell.
  • Border color:
    Select the color of border of the cell.
    You can either enter a color code or select a color from the menu that is displayed when you click color swatch icon. Click the Custom color icon on the menu to display a color picker.
  • Background color:
    Configure the background color of the cell.
    You can either enter a color code or select a color from the menu that is displayed when you click color swatch icon. Click the Custom color icon on the menu to display a color picker.

Inserting Images

You can insert images into the following input fields:

  • Body text and comments of topics
  • HTML portlets you configure in the system administration screen
Steps:
  1. Click the insert/edit image icon.

    Screenshot: Insert/edit image icon is highlighted

  2. On the "General" tab of the "Insert/Edit Image" screen, configure the following items.

    Screenshot: The "Insert/Edit Image" dialog

    • Source:
      Click the "Source" icon to select the image you want to insert. Files with ".gif", ".jpeg", ".png", and ".bmp" extensions can be inserted.
      There is an upper limit for the size of a file you can insert. The upper limit varies depending on the setting configured by the system administrator. For details on the settings, refer to Setting File Size Limitations in Administrator Help.
    • Alternative text:
      Enter a description of the image. If the image does not appear for some reason, this content will be displayed instead.
    • Width:
      Change the width of the image.
      Entering only the numeric value will specify the size in pixels (px).
      You can specify the width in a ratio relative to the screen width by adding a percent sign (%) after the numeric value.
      The width changes with keeping the height/width proportion of the image. If you do not want to keep the height/width proportion, click the Constrain proportions icon to unlock the key.
    • Height:
      Specify the image height using the numeric value.
      The height changes with keeping the height/width proportion of the image. If you do not want to keep the height/width proportion, click the Constrain proportions icon to unlock the key.

  3. Configure items in the "Advanced" tab as necessary.

    Screenshot: The "Advanced" settings in the "Insert/Edit Image" dialog

    • Vertical space:
      Specify the top and bottom spaces of the image using the numeric value.
    • Horizontal space:
      Specify the right and left spaces of the image using the numeric value.
    • Border width:
      If you select a border style, specify the border width using the numeric value.
    • Border style:
      Select the style of border.

  4. Click Save.