Supported CSS Styles: Difference between revisions
Jump to navigation
Jump to search
(Refer readers to updated HTML/CSS options. Also change from 'Macro' to 'Cookbook' category.) |
Bubblobill (talk | contribs) m (Added Java CSS source link) |
||
(10 intermediate revisions by 5 users not shown) | |||
Line 1: | Line 1: | ||
[[Category:Cookbook]] | [[Category:Cookbook]] | ||
{{note|'''Attention!''' MapTool 1.6+ contains | {{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] | |||
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] | |||
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 documentation: [https://docs.oracle.com/javase/ | |||
=Font Properties= | =Font Properties= | ||
Line 21: | Line 20: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
font: bold italic 12pt Arial, Helvetica, sans-serif; | font: bold italic 12pt Arial, Helvetica, sans-serif; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 39: | Line 38: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
font-family: Arial, Helvetica, sans-serif; | font-family: Arial, Helvetica, sans-serif; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 57: | Line 56: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
font-size: 12pt; | font-size: 12pt; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 75: | Line 74: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
font-style: italic; | font-style: italic; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 93: | Line 92: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
font-weight: bold; | font-weight: bold; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 112: | Line 111: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
color: #FF0000; | color: #FF0000; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 130: | Line 129: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
background: #0000FF url(asset://de05e42d2eb43fe53a542db116da8083) no-repeat right top; | background: #0000FF url(asset://de05e42d2eb43fe53a542db116da8083) no-repeat right top; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 148: | Line 147: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
background-color: #0000FF; | background-color: #0000FF; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 166: | Line 165: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
background-image: url(asset://de05e42d2eb43fe53a542db116da8083); | background-image: url(asset://de05e42d2eb43fe53a542db116da8083); | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 184: | Line 183: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 202: | Line 201: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
background-position: bottom right; | background-position: bottom right; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 221: | Line 220: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
text-align: right; | text-align: right; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 239: | Line 238: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
text-decoration: line-through; | text-decoration: line-through; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 257: | Line 256: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
vertical-align: super; | vertical-align: super; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 276: | Line 275: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
border-style: inset; | border-style: inset; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 294: | Line 293: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
margin: 10px; | margin: 10px; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 312: | Line 311: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
margin-top: 10px; | margin-top: 10px; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 330: | Line 329: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
margin-right: 10px; | margin-right: 10px; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 348: | Line 347: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
margin-bottom: 10px; | margin-bottom: 10px; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 366: | Line 365: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
margin-left: 10px; | margin-left: 10px; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 384: | Line 383: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
padding: 10px; | padding: 10px; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 402: | Line 401: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
padding-top: 10px; | padding-top: 10px; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 420: | Line 419: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
padding-right: 10px; | padding-right: 10px; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 438: | Line 437: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
padding-bottom: 10px; | padding-bottom: 10px; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 456: | Line 455: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
padding-left: 10px; | padding-left: 10px; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 475: | Line 474: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
list-style-type: square; | list-style-type: square; | ||
</ | </syntaxhighlight> | ||
|} | |} | ||
Line 493: | Line 492: | ||
|- | |- | ||
|'''Example:'''|| | |'''Example:'''|| | ||
< | <syntaxhighlight lang="css"> | ||
list-style-position: inside; | list-style-position: inside; | ||
</ | </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;
|