Skip to main content

Rich text HTML specification

Rich text fields in Next Design can have multiple formatting values, and the formatted data for display in the UI is stored in HTML format.
However, HTML specifications are diverse and complex, so there are certain restrictions on the HTML that can be handled in rich text fields.

In order to correctly get and set HTML format values with rich text related APIs, please use HTML that conforms to the following specifications.

See

Overall structure of HTML

Below is the overall structure of RichText HTML. Shows the relationship between elements and attributes that can be handled in Next Design's rich text.

Overall structure diagram

Below is a detailed explanation of the attributes that each element has.

Rich Text HTML

Rich text HTML corresponds to <html> tags.

Attribute nameKeyMultiplicityRangeRemarks
header-0..1headerThe content of the header is empty.
If you want to specify styles, do so for individual HTML elements.
Body-1Body-

Body

The body corresponds to the <body> tag.

attribute namekeymultiplicityrange
root element-1..*paragraph
list
table

Paragraph

Paragraphs correspond to <p> tags.

Attribute nameKeyMultiplicityRangeRemarks
Paragraph element-1..*Text container
Image
-
marginmargin0..1px unitsAll four must be specified.
margin-topmargin-top0..1px units-
left marginmargin-left0..1px units-
margin-bottom0..1px units-
right marginmargin-right0..1px units-
line-heightline-height0..1unitless number-
horizontal alignmenttext-align0..1left
center
right
justify
-
Indent widthtext-indent0..1px unit-

text container

Text containers correspond to <span> tags.

Attribute nameKeyMultiplicityRangeRemarks
text container element-0..*text decoration
line break
link
-
Text-0..1String-
Fontfont-family0..1Single font familyOnly English names of installed fonts are valid.
Font Sizefont-size0..1px units-
Text decoration (strikethrough)text-decoration0..1line-through-
background-colorbackground-color0..1RGB hexadecimal color
color keyword 1
-
Text colorcolor0..1RGB hexadecimal color
Color keyword 1
-

text decoration

A text decoration corresponds to one of the following tags:

  • Superscript: <sup>
  • Subscript: <sub>
  • Underline: <u>
  • Italic: <i>
  • Bold: <b>
attribute namekeymultiplicityrange
Text-1string

Image

Images correspond to <img> tags.

Attribute nameKeyMultiplicityRangeRemarks
sourcesrc1URL
local absolute path
base64
-
Widthwidth0..1px UnitsImage specific width.
Heightheight0..1px UnitsImage 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

The list corresponds to one of the following tags.

  • Unordered list: <ul>
  • Ordered list: <ol>
attribute namekeymultiplicityrange
list itemli1..*list item
markerlist-style-type0..1disc
circle
square
decimal
lower-latin
lower-roman

List items

List items correspond to <li> tags.

attribute namekeymultiplicityrange
List-0..*List
text container-1..*text container
line-heightline-height0..1unitless number

Table

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

Attribute nameKeyMultiplicityRangeRemarks
table row-1..*table row-
top borderborder-top0..1width: px units
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
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
bottom borderborder-bottom0..1width: in 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.
right borderborder-right0..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
Widthwidth0..1px unitsIf the width is set for the table cell, the setting value is applied with priority.

table row

Table rows correspond to <tr> tags.

attribute namekeymultiplicityrange
table-cell-1..*table-cell
Heightheight0..1px units

table cells

Table cells correspond to <td> tags.

Attribute nameKeyMultiplicityRangeRemarks
block element-0..*paragraph
list
-
column rangecolspan0..1integerThe number to merge cells horizontally.
row spanrowspan0..1integerThe number to merge cells vertically.
top borderborder-top0..1width: px units
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
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
bottom borderborder-bottom0..1width: in 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.
right borderborder-right0..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
paddingpadding0..1px unitsAll four must be specified.
background-colorbackground-color0..1RGB hexadecimal color
color keyword 1
-
vertical-align0..1top
middle
bottom
-
Widthwidth0..1px unitsIf you set the width for multiple cells in the same column, the setting value for the cell closest to the top row is applied.

Links correspond to <a> tags.

attribute namekeymultiplicityrange
Text-1string
URLhref1string

Footnotes

  1. You can specify the color you want to set with a keyword such as "red". Up to CSS Colors Level 3 is supported. 2 3 4 5 6 7 8 9