":green_heart:" is full support, and light performance cost css styles
(Close to LibGDX properties, so don't need to spend too much performance)
":heart:" is full support, and is heavy performance cost css styles
(In order to be compatible with css properties, some heavy-performance-cost hack tricks have been used)
":blue_heart:" is coming soon
(It's in dev)
":broken_heart:" is unsupport css styles / different with real world html+css
(It may be too wasteful performance, or just too difficult to implementation :sob:)
Box
:green_heart: width (px / em)
:green_heart: height (px / em)
:green_heart: padding (padding-left / right / top / bottom)
:green_heart: margin (margin-left(auto) / right(auto) / top / bottom)
Text control
:green_heart: font-size (px)
:green_heart: color (color-name / hex / rgb / rgba)
:green_heart: text-align (left / center / right)
:heart: line-height (px)
Setting the line-height property will cause the text dom to be layout multiple times.
The scene2d.Label of libgdx does not support line-height. For compatibility, it will cost additional performance
So if there is only a single line of text, it is recommended to set padding / height.
:heart: letter-spacing (px)
Setting the letter-spacing property will cause the text dom to be layout multiple times.
The scene2d.Label of libgdx does not support letter-spacing. For compatibility, it will cost additional performance
:green_heart: -gdx-markup (true)
LibGDX text markup color language support.
Once set, it will not be canceled, even if you set it to "false".
:heart: -gdx-wrap (true / false)
The default is FALSE to save performance. When enabled, LibGDX native wrap support will be used, but the element or parent(s) element must be set to a fixed width.
Setting the gdx-wrap property will cause the font size to be layout multiple times.
:broken_heart: When you set an element to "-gdx-wrap: true", it is not allowed to contain any child elements (except plain text), If you want to use colorful text, please set -gdx-markup to true.
Image / Texture
:green_heart:
:green_heart: -gdx-image-scaling
Image is loaded asynchronously by default, which does not block the rendering of html, but when the Image is loaded, it will be re-layout, which will make the whole interface flash and affect performance. If your image is not very large, set and then becomes synchronous load. You can also preset a fixed width and height for the Image.
To set the scaling of , you can use this css property, value is enum name of com.badlogic.gdx.utils.Scaling, like "fit" or "none".
display block / inline-block uses an ugly implementation, sometimes it may not be the same as what the browser shows.
:blue_heart: display: table
Table layout
:green_heart:
with display: table
:green_heart:
with display: table-row
:green_heart:
with display: table-cell
:green_heart: vertical-align
:broken_heart: Table directly contains a Div is illegal, unless the div is set to display: table-cell, otherwise any display is weird.
:broken_heart: For performance,
or display: table, is not support margin or padding properties. As an alternative, you can include a container outside of
and set padding.
:broken_heart: Table is too metaphysical, it is likely to be different from the browser display.
:broken_heart: TBody, THead and TR are fake and will not be read by the rendering engine(Just used to call row()), so don't think of it here.
Each cell will be expand() by default, unless you set a size, if you set the width or height but do not show what you want, you can try to set the size (fixed value, or percentage) for each column of the cell.