Skip to main content

Rich text HTML specifications

Multiple format values can be set in the rich text field of Next Design, and the formatted data displayed in the UI is stored in HTML format.
However, because HTML specifications are diverse and complex, there are certain limitations to the HTML handled by the rich text field.

To correctly obtain and set HTML format values with rich text-related APIs, use HTML that conforms to the following specifications.

reference

Overall structure of HTML​

Below is the overall structure of rich text HTML. The relationship between elements and attributes that can be handled by Next Design's rich text is shown.

Overall structure diagram

The following explains the details of the attributes of each element.

Rich text HTML​

Rich text HTML corresponds to the <html> tag.

Attribute nameKeyMultiplicityValue rangeNotes
Header-0..1HeaderHeader content is empty.
If you want to specify a style, specify it for each individual HTML element.
Body-1Body-

Body​

Body corresponds to the <body> tag.

Attribute nameKeyMultiplicityValue range
Root element-1..*Paragraph
List
Table

Paragraph​

A paragraph corresponds to the <p> tag.

Attribute nameKeyMultiplicityValue rangeRemarks
Paragraph element-1..*Text container
Image		-
Marginmargin0..1px unit-
Top marginmargin-top0..1px unit-
Left marginmargin-left0..1px unit-
Bottom marginmargin-bottom0..1px unit-
Right marginmargin-right0..1px unit-
Line heightline-height0..1Unitless number-
Horizontal alignmenttext-align0..1left
center
right
justify		-
Indentationtext-indent0..1px unit-

Text Containers​

Text containers correspond to the <span> tag.

Attribute nameKeyMultiplicityValue rangeRemarks
Text container element-0..*Text decoration
Line break
Link		-
Text-0..1String-
Fontfont-family0..1Single font family-
Font Sizefont-size0..1px unit-
Text decoration (Strikethrough)text-decoration0..1line-through-
Background colorbackground-color0..1RGB hexadecimal color
Color keyword1		-
Character colorcolor0..1RGB hexadecimal color
Color keyword1		-

Text decoration​

Text decoration corresponds to one of the following tags:

  • Superscript: <sup>
  • Subscript: <sub>
  • Underline: <u>
  • Italics: <i>
  • Bold: <b>
Attribute nameKeyMultiplicityRange
Text-1String

Image​

Image corresponds to the <img> tag.

Attribute nameKeyMultiplicityRangeNotes
Sourcesrc1URL
Local absolute path
base64		-
Widthwidth0..1pxImage's specific width.
Heightheight0..1pxImage's specific height.

base64​

base64 specifies the source in the format data:image/{image format};base64,{Base64 string}.

Attribute nameKeyMultiplicityRange
Image Format-1png
jpeg
bmp

List​

A list corresponds to one of the following tags.

  • Unordered list: <ul>
  • Ordered list: <ol>
Attribute nameKeyMultiplicityRange
List itemli1..*List item

List item​

List items correspond to the <li> tag.

Attribute nameKeyMultiplicityRange
List-0..*List
Text container-1..*Text container
Line heightline-height0..1Unitless number
Markerlist-style-type0..1disc
circle
square
decimal
lower-latin
lower-roman

Table​

Tables correspond to the <table> and <tbody> tags.

Attribute nameKeyMultiplicityRangeNotes
Table row-1..*Table row-
Top borderborder-top0..1Width: in px
Shape: none, dotted, dashed, solid, double
Color: RGB hexadecimal notation, color keyword1		The three values can be specified in any order, but all values must be set.
Left borderborder-left0..1Width: in px
Shape: none, dotted, dashed, solid, double
Color: RGB hexadecimal notation, color keyword1		The three values can be specified in any order, but all values must be set.
Bottom borderborder-bottom0..1Width: in px
Shape: none, dotted, dashed, solid, double
Color: RGB hex, color keyword1		The three values can be in any order, but all must be set.
Right borderborder-right0..1Width: in px
Shape: none, dotted, dashed, solid, double
Color: RGB hex, color keyword1		The three values can be in any order, but all must be set.
Widthwidth0..1in pxIf a width is set for the table cell, it will be ignored and this setting will be applied.

Table row​

Table rows correspond to the <tr> tag.

Attribute nameKeyMultiplicityRange
Table cell-1..*Table cell
Heightheight0..1px unit

Table cell​

Table cells correspond to the <td> tag.

Attribute nameKeyMultiplicityRangeNotes
Block element-0..*Paragraph
List		-
Column spancolspan0..1IntegerNumber of cells to span horizontally.
Row spanrowspan0..1IntegerNumber of cells to span vertically.
Top borderborder-top0..1Width: in px
Shape: none, dotted, dashed, solid, double
Color: RGB hexadecimal notation, color keyword1		The three values can be specified in any order, but all of them must be set.
Left borderborder-left0..1Width: in px
Shape: none, dotted, dashed, solid, double
Color: RGB hexadecimal notation, color keyword1		The three values can be specified in any order, but all of them must be set.
Bottom borderborder-bottom0..1Width: in px
Shape: none, dotted, dashed, solid, double
Color: RGB hexadecimal notation, color keyword1		The three values can be specified in any order, but all of them must be set.
Right borderborder-right0..1Width: px
Shape: none, dotted, dashed, solid, double
Color: RGB hex, color keyword 1		The three values can be specified in any order, but all values must be set.
Paddingpadding0..1px-
Background colorbackground-color0..1RGB hex color
Color keyword 1		-
Vertical alignmentvertical-align0..1top
middle
bottom		-
Widthwidth0..1pxIf the table width is set, the value set therein will be applied and this setting will be ignored.

Links correspond to the <a> tag.

Attribute nameKeyMultiplicityRange
Text-1String
URLhref1String

Footnotes​

  1. You can specify the color you want to set with a keyword such as "red". Supports up to CSS Colors Level 3. ↩ ↩2 ↩3 ↩4 ↩5 ↩6 ↩7 ↩8 ↩9 ↩10 ↩11

Last updated on