Supported CSS Styles: Difference between revisions

From RPTools Wiki
Jump to navigation Jump to search
VisualWikitext
(New page: MapTool supports a subset of the CSS level 1 specification. These styles can be used in-line, and also as external styles within dialogs and frames. This is not meant to be an exhaustive r...)
 
m (Added Java CSS source link)
 
(18 intermediate revisions by 6 users not shown)
Line 1: Line 1:
MapTool supports a subset of the CSS level 1 specification. These styles can be used in-line, and also as external styles within dialogs and frames. This is not meant to be an exhaustive reference, nor an introduction to CSS, this page is only a collection of which properties are supported and to what extent.
[[Category:Cookbook]]
{{note|'''Attention!''' MapTool 1.6+ contains {{roll|frame5}} and {{roll|dialog5}} roll options, which support modern HTML 5, CSS, and JavaScript.  A list of the [https://wheelercode.wordpress.com/javafx-css-properties-selectors-list/ CSS classes, pseudo-classes, and properties] may be helpful, although that list is for JavaFX 8 and MapTool currently uses JavaFX 20, so there may be additional entries not shown there.  A more [https://openjfx.io/javadoc/16/javafx.graphics/javafx/scene/doc-files/cssref.html#typefont technically advanced list] for Java 16 may be useful, as it shows the syntax for supported properties and what values are allowed.  It references Java code in some places, but the examples themselves are standalone.  This latter link is useful to discern how to load custom fonts, how to calculate color values, and other more esoteric features.}}
{{note|'''Attention!''' MapTool 1.7+ additionally contains an {{roll|overlay}} roll option which allows HTML 5, CSS, and JavaScript user interfaces directly in the map view, and adds access to several [[Whitelisted CDNs]] for easy inclusion of Bootstrap CSS, Google Fonts, and JS libraries such as jQuery.}}
MapTool supports a subset of the CSS level 1 specification in the chat panel ([https://docs.oracle.com/javase/8/docs/api/javax/swing/text/html/CSS.html see list in Java]), and in the panels created by {{roll|frame}} and {{roll|dialog}}. These styles can be used in-line, and also as external styles within dialogs and frames. This is not meant to be an exhaustive reference, nor an introduction to CSS. This page is only a collection of which properties are supported and to what extent. If you are looking for an introduction to CSS, visit [http://www.w3schools.com/css/css_intro.asp W3Schools CSS Tutorial]


==Font Properties==
Also, note that some CSS attributes are modeled but not rendered, meaning that they can be used and will be recognized, they just won't have any effect on the rendered result.  The list is available straight from the Java 10 documentation:  [https://docs.oracle.com/javase/10/docs/api/javax/swing/text/html/CSS.html CSS Styles]
===font===
 
=Font Properties=
==font==
{|
{|
|'''Value:'''||font-style, font-weight, font-size, font-family
|'''Value:'''||font-style, font-weight, font-size, font-family
Line 15: Line 20:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
font: bold italic 12pt Arial, Helvetica, sans-serif;
font: bold italic 12pt Arial, Helvetica, sans-serif;
</source>
</syntaxhighlight>
|}
|}
   
   
----
==font-family==
===font-family===
{|
{|
|'''Value:'''||''family-name'', ''generic-name''
|'''Value:'''||''family-name'', ''generic-name''
Line 34: Line 38:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
font-family: Arial, Helvetica, sans-serif;
font-family: Arial, Helvetica, sans-serif;
</source>
</syntaxhighlight>
|}
|}
   
   
----
==font-size==
===font-size===
{|
{|
|'''Value:'''||''absolute-size'', ''relative-size'', ''length'', ''percentage''
|'''Value:'''||''absolute-size'', ''relative-size'', ''length'', ''percentage''
Line 53: Line 56:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
font-size: 12pt;
font-size: 12pt;
</source>
</syntaxhighlight>
|}
|}
   
   
----
==font-style==
 
===font-style===
{|
{|
|'''Value:'''||normal, italic, oblique
|'''Value:'''||normal, italic, oblique
Line 73: Line 74:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
font-style: italic;
font-style: italic;
</source>
</syntaxhighlight>
|}
|}
   
   
----
==font-weight==
===font-weight===
{|
{|
|'''Value:'''||normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
|'''Value:'''||normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
Line 92: Line 92:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
font-weight: bold;
font-weight: bold;
</source>
</syntaxhighlight>
|}
|}
   
   
 
=Color and Background Properties=
==Color and Background Properties==
==color==
===color===
{|
{|
|'''Value:'''||''color name'', ''color code''
|'''Value:'''||''color name'', ''color code''
Line 112: Line 111:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
color: #FF0000;
color: #FF0000;
</source>
</syntaxhighlight>
|}
|}
   
   
----
==background==
===background===
{|
{|
|'''Value:'''||background-color, background-image, background-repeat, background-position
|'''Value:'''||background-color, background-image, background-repeat, background-position
Line 131: Line 129:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
background: #0000FF url(image.jpg) no-repeat right top;
background: #0000FF url(asset://de05e42d2eb43fe53a542db116da8083) no-repeat right top;
</source>
</syntaxhighlight>
|}
|}
   
   
----
==background-color==
===background-color===
{|
{|
|'''Value:'''||''color name'', ''color code''
|'''Value:'''||''color name'', ''color code''
Line 150: Line 147:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
background-color: #0000FF;
background-color: #0000FF;
</source>
</syntaxhighlight>
|}
|}
   
   
----
==background-image==
===background-image===
{|
{|
|'''Value:'''||none, ''url''
|'''Value:'''||none, ''url''
Line 169: Line 165:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
background-image: url(image.jpg);
background-image: url(asset://de05e42d2eb43fe53a542db116da8083);
</source>
</syntaxhighlight>
|}
|}
   
   
----
==background-repeat==
===background-repeat===
{|
{|
|'''Value:'''||repeat, repeat-x, repeat-y, no-repeat
|'''Value:'''||repeat, repeat-x, repeat-y, no-repeat
Line 188: Line 183:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
background-repeat: no-repeat;
background-repeat: no-repeat;
</source>
</syntaxhighlight>
|}
|}
   
   
----
==background-position==
===background-position===
{|
{|
|'''Value:'''||top, center, bottom, left, center, right
|'''Value:'''||top, center, bottom, left, center, right
Line 207: Line 201:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
background-position: bottom right;
background-position: bottom right;
</source>
</syntaxhighlight>
|}
|}
   
   
 
=Text Properties=
==Text Properties==
==text-align==
===text-align===
{|
{|
|'''Value:'''||left, right, center
|'''Value:'''||left, right, center
Line 227: Line 220:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
text-align: right;
text-align: right;
</source>
</syntaxhighlight>
|}
|}
   
   
----
==text-decoration==
===text-decoration===
{|
{|
|'''Value:'''||none, underline, line-through
|'''Value:'''||none, underline, line-through
Line 246: Line 238:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
text-decoration: line-through;
text-decoration: line-through;
</source>
</syntaxhighlight>
|}
|}
   
   
----
==vertical-align==
===vertical-align===
{|
{|
|'''Value:'''||baseline, sub, super
|'''Value:'''||baseline, sub, super
Line 265: Line 256:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
vertical-align: super;
vertical-align: super;
</source>
</syntaxhighlight>
|}
|}
   
   
 
=Box Properties=
==Box Properties==
==border-style==
===border-style===
{|
{|
|'''Value:'''||none, inset, outset
|'''Value:'''||none, inset, outset
Line 285: Line 275:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
border-style: inset;
border-style: inset;
</source>
</syntaxhighlight>
|}
|}
   
   
----
==margin==
===margin===
{|
{|
|'''Value:'''||''length'', auto
|'''Value:'''||''length'', auto
Line 304: Line 293:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
margin: 10px;
margin: 10px;
</source>
</syntaxhighlight>
|}
|}
   
   
----
==margin-top==
===margin-top===
{|
{|
|'''Value:'''||''length'', auto
|'''Value:'''||''length'', auto
Line 323: Line 311:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
margin-top: 10px;
margin-top: 10px;
</source>
</syntaxhighlight>
|}
|}
   
   
----
==margin-right==
===margin-right===
{|
{|
|'''Value:'''||''length'', auto
|'''Value:'''||''length'', auto
Line 342: Line 329:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
margin-right: 10px;
margin-right: 10px;
</source>
</syntaxhighlight>
|}
|}
   
   
----
==margin-bottom==
===margin-bottom===
{|
{|
|'''Value:'''||''length'', auto
|'''Value:'''||''length'', auto
Line 361: Line 347:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
margin-bottom: 10px;
margin-bottom: 10px;
</source>
</syntaxhighlight>
|}
|}
   
   
----
==margin-left==
===margin-left===
{|
{|
|'''Value:'''||''length'', auto
|'''Value:'''||''length'', auto
Line 380: Line 365:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
margin-left: 10px;
margin-left: 10px;
</source>
</syntaxhighlight>
|}
|}
   
   
----
==padding==
===padding===
{|
{|
|'''Value:'''||''length''
|'''Value:'''||''length''
Line 399: Line 383:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
padding: 10px;
padding: 10px;
</source>
</syntaxhighlight>
|}
|}
   
   
----
==padding-top==
===padding-top===
{|
{|
|'''Value:'''||''length''
|'''Value:'''||''length''
Line 418: Line 401:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
padding-top: 10px;
padding-top: 10px;
</source>
</syntaxhighlight>
|}
|}
   
   
----
==padding-right==
===padding-right===
{|
{|
|'''Value:'''||''length''
|'''Value:'''||''length''
Line 437: Line 419:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
padding-right: 10px;
padding-right: 10px;
</source>
</syntaxhighlight>
|}
|}
   
   
----
==padding-bottom==
===padding-bottom===
{|
{|
|'''Value:'''||''length''
|'''Value:'''||''length''
Line 456: Line 437:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
padding-bottom: 10px;
padding-bottom: 10px;
</source>
</syntaxhighlight>
|}
|}
   
   
----
==padding-left==
===padding-left===
{|
{|
|'''Value:'''||''length''
|'''Value:'''||''length''
Line 475: Line 455:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
padding-left: 10px;
padding-left: 10px;
</source>
</syntaxhighlight>
|}
|}
   
   
 
=Classification Properties=
==Classification Properties==
==list-style-type==
===list-style-type===
{|
{|
|'''Value:'''||none, disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha
|'''Value:'''||none, disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha
Line 495: Line 474:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
list-style-type: square;
list-style-type: square;
</source>
</syntaxhighlight>
|}
|}
   
   
----
==list-style-position==
===list-style-position===
{|
{|
|'''Value:'''||inside, outside
|'''Value:'''||inside, outside
Line 514: Line 492:
|-
|-
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<syntaxhighlight lang="css">
list-style-position: inside;
list-style-position: inside;
</source>
</syntaxhighlight>
|}
|}

Latest revision as of 06:50, 30 December 2023


Attention! MapTool 1.6+ contains [frame5():] and [dialog5():] roll options, which support modern HTML 5, CSS, and JavaScript. A list of the CSS classes, pseudo-classes, and properties may be helpful, although that list is for JavaFX 8 and MapTool currently uses JavaFX 20, so there may be additional entries not shown there. A more technically advanced list for Java 16 may be useful, as it shows the syntax for supported properties and what values are allowed. It references Java code in some places, but the examples themselves are standalone. This latter link is useful to discern how to load custom fonts, how to calculate color values, and other more esoteric features.


Attention! MapTool 1.7+ additionally contains an [overlay():] roll option which allows HTML 5, CSS, and JavaScript user interfaces directly in the map view, and adds access to several Whitelisted CDNs for easy inclusion of Bootstrap CSS, Google Fonts, and JS libraries such as jQuery.

MapTool supports a subset of the CSS level 1 specification in the chat panel (see list in Java), and in the panels created by [frame():] and [dialog():]. These styles can be used in-line, and also as external styles within dialogs and frames. This is not meant to be an exhaustive reference, nor an introduction to CSS. This page is only a collection of which properties are supported and to what extent. If you are looking for an introduction to CSS, visit W3Schools CSS Tutorial

Also, note that some CSS attributes are modeled but not rendered, meaning that they can be used and will be recognized, they just won't have any effect on the rendered result. The list is available straight from the Java 10 documentation: CSS Styles

Font Properties

font

Value: font-style, font-weight, font-size, font-family
Initial: none
Applies To: all elements
Inherited: yes
Relative Size: only font-size
Example: 
font: bold italic 12pt Arial, Helvetica, sans-serif;

font-family

Value: family-name, generic-name
Initial: system default
Applies To: all elements
Inherited: yes
Relative Size: N/A
Example: 
font-family: Arial, Helvetica, sans-serif;

font-size

Value: absolute-size, relative-size, length, percentage
Initial: medium
Applies To: all elements
Inherited: yes
Relative Size: relative to parent element's font-size
Example: 
font-size: 12pt;

font-style

Value: normal, italic, oblique
Initial: normal
Applies To: all elements
Inherited: yes
Relative Size: N/A
Example: 
font-style: italic;

font-weight

Value: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
Initial: normal
Applies To: all elements
Inherited: yes
Relative Size: N/A
Example: 
font-weight: bold;

Color and Background Properties

color

Value: color name, color code
Initial: element specific
Applies To: all elements
Inherited: yes
Relative Size: N/A
Example: 
color: #FF0000;

background

Value: background-color, background-image, background-repeat, background-position
Initial: none
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
background: #0000FF url(asset://de05e42d2eb43fe53a542db116da8083) no-repeat right top;

background-color

Value: color name, color code
Initial: transparent
Applies To: all elements
Inherited: no
Relative Size: N/A
Example: 
background-color: #0000FF;

background-image

Value: none, url
Initial: none
Applies To: all elements
Inherited: no
Relative Size: N/A
Example: 
background-image: url(asset://de05e42d2eb43fe53a542db116da8083);

background-repeat

Value: repeat, repeat-x, repeat-y, no-repeat
Initial: repeat
Applies To: all elements
Inherited: no
Relative Size: N/A
Example: 
background-repeat: no-repeat;

background-position

Value: top, center, bottom, left, center, right
Initial: top left
Applies To: block-level and replaced elements
Inherited: no
Relative Size: no
Example: 
background-position: bottom right;

Text Properties

text-align

Value: left, right, center
Initial: element specific
Applies To: block-level elements
Inherited: yes
Relative Size: N/A
Example: 
text-align: right;

text-decoration

Value: none, underline, line-through
Initial: none
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
text-decoration: line-through;

vertical-align

Value: baseline, sub, super
Initial: baseline
Applies To: inline elements
Inherited: no
Relative Size: no
Example: 
vertical-align: super;

Box Properties

border-style

Value: none, inset, outset
Initial: none
Applies To: all elements
Inherited: no
Relative Size: N/A
Example: 
border-style: inset;

margin

Value: length, auto
Initial: none
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
margin: 10px;

margin-top

Value: length, auto
Initial: 0
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
margin-top: 10px;

margin-right

Value: length, auto
Initial: 0
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
margin-right: 10px;

margin-bottom

Value: length, auto
Initial: 0
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
margin-bottom: 10px;

margin-left

Value: length, auto
Initial: 0
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
margin-left: 10px;

padding

Value: length
Initial: 0
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
padding: 10px;

padding-top

Value: length
Initial: 0
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
padding-top: 10px;

padding-right

Value: length
Initial: 0
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
padding-right: 10px;

padding-bottom

Value: length
Initial: 0
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
padding-bottom: 10px;

padding-left

Value: length
Initial: 0
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
padding-left: 10px;

Classification Properties

list-style-type

Value: none, disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha
Initial: disc
Applies To: list-item elements
Inherited: yes
Relative Size: N/A
Example: 
list-style-type: square;

list-style-position

Value: inside, outside
Initial: outside
Applies To: list-item elements
Inherited: yes
Relative Size: N/A
Example: 
list-style-position: inside;
Retrieved from "https://wiki.rptools.info/index.php?title=Supported_CSS_Styles&oldid=17549"