Context Navigation

MapCSSImplementation

Timestamp:: 2021-11-07T09:39:25+01:00 (4 years ago)
Author:: leni
Comment:: added target #Linkselector, #PseudoClasses, line break; modified to `,

Legend:

: Unmodified
: Added
: Removed
: Modified

Help/Styles/MapCSSImplementation

-              v196
+              v197
 * [wikitr:/Rules Validator rules], see [wikitr:/Help/Validator/MapCSSTagChecker MapCSS tag checker] for the special part for rules only.
 * [wikitr:/Help/Action/Search Search dialog]
 == General Structure ==
 …
 }}}
 == Selectors ==
+''Selectors'' denote the filter expressions of a MapCSS rule. The rule is only applied to a map object, if its selectors match
+with the object.
+Selectors in MapCSS are different from standard CSS for the web. MapCSS only supports a subset of the standard CSS selectors, but
+extends them with additional selectors required for OSM data.
+''Selectors'' denote the filter expressions of a MapCSS rule. The rule is only applied to a map object, if its selectors match with the object.
+Selectors in MapCSS are different from standard CSS for the web. MapCSS only supports a subset of the standard CSS selectors, but extends them with additional selectors required for OSM data.
 Some basic examples:
 …
 |-------------------------------------------------------------------------------
 {{{#!td align=center  valign=top
 {{{node}}}, {{{way}}}, {{{relation}}}
+`node`, `way`, `relation`
 }}}
 {{{#!td align=left  valign=top
 …
 |-------------------------------------------------------------------------------
 {{{#!td align=center  valign=top
+{{{area}}}
+`area`
 }}}
 {{{#!td align=left  valign=top
 …
 way[natural=beach], relation[type=multipolygon][natural=beach] {...}
 }}}
 Note that {{{area}}} selects unclosed ways as well, so it may be useful to add the {{{:closed}}} pseudo class. The JOSM Validator will give a warning for unclosed ways that have an area style.
+}}}
+|-------------------------------------------------------------------------------
+{{{#!td align=center  valign=top
+{{{meta}}}
+}}}
+{{{#!td align=left  valign=top
 The {{{meta}}} selector starts a special rule that should stand at the beginning of the file. It gives some general information on the style sheet. All software that supports MapCSS should be able to parse this sections without errors, so do not use exotic syntax extensions in this part.
+Note that `area` selects unclosed ways as well, so it may be useful to add the `:closed` pseudo class. The JOSM Validator will give a warning for unclosed ways that have an area style.
+}}}
+|-------------------------------------------------------------------------------
+{{{#!td align=center  valign=top
+`meta`
+}}}
+{{{#!td align=left  valign=top
+The `meta` selector starts a special rule that should stand at the beginning of the file. It gives some general information on the style sheet. All software that supports MapCSS should be able to parse this sections without errors, so do not use exotic syntax extensions in this part.
 {{{
 #!mapcss
 …
 |-------------------------------------------------------------------------------
 {{{#!td align=center  valign=top
+{{{canvas}}}
+`canvas`
 }}}
 {{{#!td align=left  valign=top
 …
 |-
 {{{#!td align=center
 {{{fill-color}}}
+`fill-color`
 }}}
 {{{#!td
 …
 }}}
 {{{#!td align=center
+{{{black}}}
+`black`
 }}}
 |-
 {{{#!td align=center
 {{{default-points}}}
+`default-points`
 }}}
 {{{#!td
 …
 }}}
 {{{#!td align=center
+{{{true}}}
+`true`
 }}}
 |-
 {{{#!td align=center
 {{{default-lines}}}
+`default-lines`
 }}}
 {{{#!td
 …
 }}}
 {{{#!td align=center
+{{{true}}}
+`true`
 }}}
 }}}
 …
 * The functions ''prop()'' and ''is_prop_set()'' are only supported on the right side of the > sign.
 * The functions ''parent_tag'' and ''parent_tags'' (see below) can be used to access tags from the parent(s).
+* For compatibility with the MapCSS 0.2 standard, `relation[type=route][route=foot] way {/*...*/}`, without the greater-than-sign `>` is supported, too. However, no [[#Linkselector]] may be specified in this case.
+* For compatibility with the MapCSS 0.2 standard, `relation[type=route][route=foot] way {/*...*/}`, without the greater-than-sign `>` is supported, too. However, no [[#Linkselector|Link selector]] may be specified in this case.
 === Parent selector ===
 …
 === Condition selector ===
+Selectors can include a set of conditions. If any of these conditions evaluates to false, the selector doesn't match and the style
+rule isn't applied.
+Selectors can include a set of conditions. If any of these conditions evaluates to false, the selector doesn't match and the style rule isn't applied.
 An '''attribute condition''' specifies a condition on a tag of an OSM object.
 …
 |-------------------------------------------------------------------------------
 {{{#!td align=center  valign=top
+{{{^=}}}
+`^=`
 }}}
 {{{#!td align=left  valign=top
 …
 === Territory selector ===
+You can test whether an object is located inside or outside of a specific territory. JOSM has an internal database for this. The [source:/trunk/resources/data/boundaries.osm territories file] can be downloaded and opened in JOSM to investigate it [attachment:boundaries.png (screenshot preview)]. It contains borders of all countries of the world. Due to performance reasons the borders are simplified. They can be refined for special cases on request. The territories are "tagged" with their [https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 ISO_3166-1_alpha-2 codes]. USA, Canada, China, India and Australia have additional boundaries for their subdivisions. See the following examples on how to use the territory selectors. Territory selectors are less useful in mappaint styles and can be very resource heavy there. However they are much more useful for [wikitr:/Help/Validator/MapCSSTagChecker mapcss based validator rules]. To select territories with left-hand-traffic or right-hand-traffic, there is a simpler way, see [#PseudoClasses]. See #10387 for main implementation of this feature.
+You can test whether an object is located inside or outside of a specific territory. JOSM has an internal database for this. The [source:/trunk/resources/data/boundaries.osm territories file] can be downloaded and opened in JOSM to investigate it [attachment:boundaries.png (screenshot preview)]. It contains borders of all countries of the world. Due to performance reasons the borders are simplified. They can be refined for special cases on request. The territories are "tagged" with their [https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 ISO_3166-1_alpha-2 codes]. USA, Canada, China, India and Australia have additional boundaries for their subdivisions. See the following examples on how to use the territory selectors. Territory selectors are less useful in mappaint styles and can be very resource heavy there. However they are much more useful for [wikitr:/Help/Validator/MapCSSTagChecker mapcss based validator rules]. To select territories with left-hand-traffic or right-hand-traffic, there is a simpler way, see [#PseudoClasses Pseudo Classes]. See #10387 for main implementation of this feature.
 {{{
 …
 }}}
+=== Link selector ===
+=== Link selector === #Linkselector
 In a child selector, you can formulate conditions on the link between a parent and a child object.
 …
 }}}
 {{{#!td align=left  valign=top
 Exact match of the role name. The name name {{{role}}} is compulsory in this context.
+Exact match of the role name. The name `role` is compulsory in this context.
 }}}
 {{{#!td align=left  valign=top
 …
 }}}
+The operators {{{!=, ^=, $=, *=, and ~=}}} are supported too. Please refer to [#condition_selector_operators condition selector operators].
+Nodes in ways and members in relations are ordered. You can formulate conditions on the position of a node in a way or a member
+object in a relation. Positive numbers count from first to last element, negative numbers (since r8236) count from last to first element.
+The operators `!=`, `^=`, `$=`, `*=` and `~=` are supported too. Please refer to [#condition_selector_operators condition selector operators].
+Nodes in ways and members in relations are ordered. You can formulate conditions on the position of a node in a way or a member object in a relation. Positive numbers count from first to last element, negative numbers (since r8236) count from last to first element.
 {{{
 …
 }}}
 === Zoom selector ===
+You can decorate a type selector with a '''zoom selector'''. The zoom selector restricts the range of zoom levels
+at which the respective MapCSS rule is applied.
+You can decorate a type selector with a '''zoom selector'''. The zoom selector restricts the range of zoom levels at which the respective MapCSS rule is applied.
 {{{#!th align=center valign=top
 …
 }}}
 |-------------------------------------------------------------------------------
 || {{{way|z12 {...} }}} || At zoom level 12 ||
 || {{{way|z13-15 {...} }}} || From 13 to 15 ||
 || {{{way|z16- {...} }}} || 16 and above ||
 || {{{way|z-12 {...} }}} || 12 and below ||
 || {{{way {...} }}} || any zoom level ||
+|| `way|z12 {...} ` || At zoom level 12 ||
+|| `way|z13-15 {...} ` || From 13 to 15 ||
+|| `way|z16- {...} ` || 16 and above ||
+|| `way|z-12 {...} ` || 12 and below ||
+|| `way {...} ` || any zoom level ||
 The precise definition of scale ranges for each zoom level may change in the future. By rule of thumb you can expect to be approximately at zoom level ''n'' when imagery displays slippymap tiles of level ''n''.
+=== Pseudo Classes ===
+=== Pseudo Classes === #PseudoClasses
 See [/doc/org/openstreetmap/josm/gui/mappaint/mapcss/ConditionFactory.PseudoClasses.html Javadoc] for the up-to-date list of pseudo classes supported by JOSM's MapCSS implementation.
 ||= Class =||= Description =||
 || {{{:closed}}} || true for ways where the first node is the same as the last and for any (completely downloaded) multipolygon relation ||
 || {{{:closed2}}} || same as above, but this one ignores if a multipolygon is downloaded completely (since r9099) ||
 || {{{:completely_downloaded}}} || true for a relation whose members are all downloaded (since r9099) ||
 || {{{:new}}} || all new objects ||
 || {{{:connection}}} || true for nodes that are used by more than one way ||
 || {{{:unconnected}}} || true for nodes that are not used by any way (since r6687) ||
 || {{{:tagged}}} || What JOSM considers tagged, i.e. an object that with a tag key other than the following: {{{source*, source_ref, note, comment, converted_by, created_by, watch*, fixme, FIXME, description, attribution}}} (version r4008; in this list, {{{*}}} is a glob)
 || {{{:righthandtraffic}}} || true if there is right-hand traffic at the current location (since r7193); see [wikitr:/left-right-hand-traffic left-right-hand-traffic] for screenshot of areas ||
 || {{{:clockwise}}} || Whether the way is closed and oriented clockwise, or non-closed and the 1st, 2nd and last node are in clockwise order. ||
 || {{{:anticlockwise}}} || Whether the way is closed and oriented anticlockwise, or non-closed and the 1st, 2nd and last node are in anticlockwise order. ||
 || {{{:unclosed_multipolygon}}} || true for fully loaded unclosed multipolygon relations (since r8252) ||
 || {{{:open_end}}} || to select end nodes of unclosed multipolygon relations with `relation:unclosed_multipolygon >:open_end node` (since r8252) ||
 || {{{:in-downloaded-area}}} || true if an object is within source area and false if in the hatched area (since r8495). ||
 || {{{:selected}}} || true if an object is selected in the editor (since r9341). ||
 || {{{:modified}}} || changed and new objects (since r7193). ||
 You can also negate pseudo classes. E.g. {{{!:new}}} for all old objects.
+|| `:closed` || true for ways where the first node is the same as the last and for any (completely downloaded) multipolygon relation ||
+|| `:closed2` || same as above, but this one ignores if a multipolygon is downloaded completely (since r9099) ||
+|| `:completely_downloaded` || true for a relation whose members are all downloaded (since r9099) ||
+|| `:new` || all new objects ||
+|| `:connection` || true for nodes that are used by more than one way ||
+|| `:unconnected` || true for nodes that are not used by any way (since r6687) ||
+|| `:tagged` || What JOSM considers tagged, i.e. an object that with a tag key other than the following: `source*`, `source_ref`, `note`, `comment`, `converted_by`, `created_by`, `watch*`, `fixme`, `FIXME`, `description`, `attribution` (version r4008; in this list, `*` is a glob)
+|| `:righthandtraffic` || true if there is right-hand traffic at the current location (since r7193); see [wikitr:/left-right-hand-traffic left-right-hand-traffic] for screenshot of areas ||
+|| `:clockwise` || Whether the way is closed and oriented clockwise, or non-closed and the 1st, 2nd and last node are in clockwise order. ||
+|| `:anticlockwise` || Whether the way is closed and oriented anticlockwise, or non-closed and the 1st, 2nd and last node are in anticlockwise order. ||
+|| `:unclosed_multipolygon` || true for fully loaded unclosed multipolygon relations (since r8252) ||
+|| `:open_end` || to select end nodes of unclosed multipolygon relations with `relation:unclosed_multipolygon >:open_end node` (since r8252) ||
+|| `:in-downloaded-area` || true if an object is within source area and false if in the hatched area (since r8495). ||
+|| `:selected` || true if an object is selected in the editor (since r9341). ||
+|| `:modified` || changed and new objects (since r7193). ||
+You can also negate pseudo classes. E.g. `!:new` for all old objects.
 === Layer Identifier ===
 Layers can be used to create more than one style for a single object. Here is an example:
 {{{
 …
+}
 }}}
 This draws all secondary and tertiary roads in yellow and orange respectively. Any road with an access tag other than yes will get an extra line style below ('''{{{object-z-index:-1.0;}}}''') the main line. If that part of the street happens to be a bridge, it will also get a half transparent blue overlay. The relative width value ('''{{{width: +2;}}}''') refers to the width on the default layer (2 or 3 in this case).
+This draws all secondary and tertiary roads in yellow and orange respectively. Any road with an access tag other than yes will get an extra line style below ('''`object-z-index:-1.0;`''') the main line. If that part of the street happens to be a bridge, it will also get a half transparent blue overlay. The relative width value ('''`width: +2;`''') refers to the width on the default layer (2 or 3 in this case).
 The name for the layer can be any identifier.
 If you omit the layer in the selector, this is the same as using {{{::default}}}.
+If you omit the layer in the selector, this is the same as using `::default`.
 One more example:
 …
 [[Image(multiple_icons_and_texts.png,link=)]]
 In addition, you can use the * layer to override and initialize all layers.[[br]]
+In addition, you can use the * layer to override and initialize all layers. \\
 It overrides all existing subparts, so
 …
 way::A { a; b; }
 }}}
 === Grouping ===
 …
 way.path { text:auto; text-color: green; text-position: line; text-offset: 5; }
 }}}
+You can also negate classes. E.g. {{{way!.path}}} for all ways, which are not part of the class ''.path''.
+You can also negate classes. E.g. `way!.path` for all ways, which are not part of the class ''.path''.
 === @supports Conditional Processing  ===
 …
 }}}
 {{{#!td
 Only include {{{@supports}}} section when the current version of JOSM is greater than or equal to the specified number.
+Only include `@supports` section when the current version of JOSM is greater than or equal to the specified number.
 }}}
 |-
 …
 }}}
 {{{#!td
 Only include {{{@supports}}} section when the current version of JOSM is lower than or equal to the specified number.
+Only include `@supports` section when the current version of JOSM is lower than or equal to the specified number.
 }}}
 |-
 …
 }}}
 {{{#!td
 Only include {{{@supports}}} section when the name of the editor / renderer matches the given string. In JOSM, the only accepted value is {{{josm}}}.
+}}}
 Conditions can be combined with {{{and}}}:
+Only include `@supports` section when the name of the editor / renderer matches the given string. In JOSM, the only accepted value is `josm`.
+}}}
+Conditions can be combined with `and`:
 {{{
 …
 }}}
 Other logical operators like {{{or}}} and {{{not}}} can also be used. Parentheses are needed if you want to combine different logical operators:
+Other logical operators like `or` and `not` can also be used. Parentheses are needed if you want to combine different logical operators:
 {{{
 …
 }}}
 == Style settings ==
 [wikitr:/Help/Dialog/MapPaint/StyleSettings Styles settings] are used to provide the user settings to customize a mappaint style. The user can use them in the [wikitr:/Help/Dialog/MapPaint MapPaint dialog]. The following `type` of settings are available:
 * `boolean` (since r7450)
 …
 === Settings of type `boolean` ===
 Create a setting of type `boolean`:
 {{{
 …
 === Settings of type `double` ===
 Create a setting of type `double`:
 {{{
 …
 === Settings of type `string` ===
 Create a setting of type `string`:
 {{{
 …
 === Settings of type `color` ===
+Create a setting of type `color`. The `default` color can be any color as understood under https://josm.openstreetmap.de/wiki/Help/Styles/MapCSSImplementation#Propertyvaluesexplanations:
+Create a setting of type `color`. The `default` color can be any color as understood under [wikitr:/Help/Styles/MapCSSImplementation#Propertyvaluesexplanations Property values explanations]:
 {{{
 #!mapcss
 …
 === Grouping settings ===
 Similar settings can be grouped together by defining ''settings groups'' (since r15289):
 …
 }}}
+Settings groups are displayed as sub-menus from the style settings menu. If at least two settings belong to a group, a special "Toggle all settings" menu item allows to quickly switch on/off all settings from this group at once. Usage example: wiki:/Styles/MapWithAI.
+Settings groups are displayed as sub-menus from the style settings menu. If at least two settings belong to a group, a special "Toggle all settings" menu item allows to quickly switch on/off all settings from this group at once. Usage example: [wiki:/Styles/MapWithAI MapWithAI].
 == Properties ==#Properties
 === General properties ===
 ||=  '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =||
 || {{{z-index}}} || Specify the order the objects are drawn: The objects with higher z-index are drawn on top of objects with lower z-index || ''Number'' (can be negative) ||  0  ||
 || {{{major-z-index}}} || Similar to {{{z-index}}}, but it has higher priority than {{{z-index}}}. So if one object has a higher {{{major-z-index}}} than the other, it is drawn on top. If the {{{major-z-index}}} is the same, {{{z-index}}} decides. || ''Number'' (can be negative) || Depends on style element: area: 1, casing: 2, left-/right-casing: 2.1, line-pattern: 2.9, line: 3, point: 4, default-point: 4.1, line-text: 4.9, point-text: 5 ||
 || {{{object-z-index}}} || Similar to {{{z-index}}}, but has lower priority. Controls the painting order for overlapping objects. E.g. for two crossing ways with text: Use {{{z-index}}} or {{{major-z-index}}} if you first want to draw the two lines and then the two captions. Use {{{object-z-index}}} if one of the ways should be completely on top of the other. || ''Number'' (can be negative) ||  0  ||
 || {{{modifier}}} || Better control, whether a default line / node symbol is generated by JOSM. This happens when there is no proper style ({{{modifier=false}}}) found on any layer. || {{{false}}} or {{{true}}} || {{{false}}} for the default layer and {{{true}}} for any other layer ||
+|| `z-index` || Specify the order the objects are drawn: The objects with higher z-index are drawn on top of objects with lower z-index || ''Number'' (can be negative) ||  0  ||
+|| `major-z-index` || Similar to `z-index`, but it has higher priority than `z-index`. So if one object has a higher `major-z-index` than the other, it is drawn on top. If the `major-z-index` is the same, `z-index` decides. || ''Number'' (can be negative) || Depends on style element: area: 1, casing: 2, left-/right-casing: 2.1, line-pattern: 2.9, line: 3, point: 4, default-point: 4.1, line-text: 4.9, point-text: 5 ||
+|| `object-z-index` || Similar to `z-index`, but has lower priority. Controls the painting order for overlapping objects. E.g. for two crossing ways with text: Use `z-index` or `major-z-index` if you first want to draw the two lines and then the two captions. Use `object-z-index` if one of the ways should be completely on top of the other. || ''Number'' (can be negative) ||  0  ||
+|| `modifier` || Better control, whether a default line / node symbol is generated by JOSM. This happens when there is no proper style (`modifier=false`) found on any layer. || `false` or `true` || `false` for the default layer and `true` for any other layer ||
 Note that due to performance reasons the values for the three z-indexes are limited to 24 bit float values with max. 5 decimal digits. Currently the internal mappaint style uses values with max. 2 digits before and after the decimal separator. To avoid problems use values of z-indexes between -99.999 and +99.999. (See also #14485)
 === Icon and symbol styles ===
 ||=  '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =||
 || {{{icon-image}}} || The icon at node position. See also [wikitr:/Help/Styles/Images Images]. || ''Image'' ||  -  ||
 || {{{icon-opacity}}} || Opacity of the icon image || ''Opacity'' ||  1.0  ||
 || {{{icon-width}}} || Width of the icon. If only one of the properties {{{icon-width}}} and {{{icon-height}}} is given, the image will be scaled proportionally. The icon will keep the original size, if neither {{{icon-width}}} nor {{{icon-height}}} is set. || ''Number'' ||  -  ||
 || {{{icon-height}}} || Height of the icon. (See {{{icon-width}}}) || ''Number'' ||  -  ||
+|| `icon-image` || The icon at node position. See also [wikitr:/Help/Styles/Images Images]. || ''Image'' ||  -  ||
+|| `icon-opacity` || Opacity of the icon image || ''Opacity'' ||  1.0  ||
+|| `icon-width` || Width of the icon. If only one of the properties `icon-width` and `icon-height` is given, the image will be scaled proportionally. The icon will keep the original size, if neither `icon-width` nor `icon-height` is set. || ''Number'' ||  -  ||
+|| `icon-height` || Height of the icon. (See `icon-width`) || ''Number'' ||  -  ||
 || `icon-offset-x` || Shift the icon in horizontal direction (positive values to the right) (since r8085) || ''Number'' ||  0  ||
 || `icon-offset-y` || Shift the icon in vertical direction (positive values downwards) (since r8085) || ''Number'' ||  0  ||
 || `icon-rotation` || Rotate the icon clockwise or anti clockwise (negative value)(since r8260) || `[rad]`, `[rad]rad`, `[deg]°`, `[deg]deg`, `[grad]grad`, `[turn]turn` ([https://developer.mozilla.org/en/docs/Web/CSS/angle definition]) or a cardinal direction (e.g. `northeast` or `sw`); See also the functions `degree_to_radians`, `cardinal_to_radians`. ||  -  ||
+|| `icon-position` || Define the position of the icon for areas. Same as `text-position` (since r11730). || {{{center}}}, {{{inside}}}, {{{line}}} ||  {{{center}}}  ||
+|| {{{symbol-shape}}} || Display a symbol at the position of the node || {{{square}}}, {{{circle}}}, {{{triangle}}}, {{{pentagon}}}, {{{hexagon}}}, {{{heptagon}}}, {{{octagon}}}, {{{nonagon}}}, {{{decagon}}} ||  -  ||
+|| {{{symbol-size}}} || Size of the symbol || ''Number'', can be relative ("+4") ||  10  ||
+|| {{{symbol-stroke-width}}} || outline stroke width || ''Width'' || 1.0 if {{{symbol-stroke-color}}} is set ||
+|| {{{symbol-stroke-color}}} || line color || ''Color'' || {{{#FFC800}}} if {{{symbol-stroke-width}}} is set ||
+|| {{{symbol-stroke-opacity}}} || line opacity || ''Opacity'' ||  1.0  ||
+|| {{{symbol-fill-color}}} || fill color for the shape || ''Color'' || {{{blue}}}, unless either {{{symbol-stroke-width}}} or {{{symbol-stroke-color}}} is set ||
+|| {{{symbol-fill-opacity}}} || fill opacity || ''Opacity'' ||  1.0  ||
+|| {{{text-...}}}, {{{font-...}}} ||||||  general text & font properties  ||
+|| {{{text-anchor-horizontal}}} || horizontal text label placement || {{{left}}}, {{{center}}}, {{{right}}} ||  {{{right}}}  ||
+|| {{{text-anchor-vertical}}} || vertical text label placement || {{{above}}}, {{{top}}}, {{{center}}}, {{{bottom}}}, {{{below}}} ||  {{{bottom}}}  ||
+|| {{{text-rotation}}} || Rotate the text clockwise or anti clockwise (negative value)(since r16253) || `[rad]`, `[rad]rad`, `[deg]°`, `[deg]deg`, `[grad]grad`, `[turn]turn` ([https://developer.mozilla.org/en/docs/Web/CSS/angle definition]) or a cardinal direction (e.g. `northeast` or `sw`); See also the functions `degree_to_radians`, `cardinal_to_radians`. (Note that the direction means where the upper edge of the text faces. That means with the default direction of north the text flows to east (with a left to right language). So if you want to flow it to e.g. south you need to set east.) ||  -  ||
+Do not rely on the default values for {{{symbol-...}}} properties (except for {{{opacity}}}). They are intended for "quick & dirty" style sheets and should be set to an explicit value.
+|| `icon-position` || Define the position of the icon for areas. Same as `text-position` (since r11730). || `center`, `inside`, `line` ||  `center`  ||
+|| `symbol-shape` || Display a symbol at the position of the node || `square`, `circle`, `triangle`, `pentagon`, `hexagon`, `heptagon`, `octagon`, `nonagon`, `decagon` ||  -  ||
+|| `symbol-size` || Size of the symbol || ''Number'', can be relative ("+4") ||  10  ||
+|| `symbol-stroke-width` || outline stroke width || ''Width'' || 1.0 if `symbol-stroke-color` is set ||
+|| `symbol-stroke-color` || line color || ''Color'' || `#FFC800` if `symbol-stroke-width` is set ||
+|| `symbol-stroke-opacity` || line opacity || ''Opacity'' ||  1.0  ||
+|| `symbol-fill-color` || fill color for the shape || ''Color'' || `blue`, unless either `symbol-stroke-width` or `symbol-stroke-color` is set ||
+|| `symbol-fill-opacity` || fill opacity || ''Opacity'' ||  1.0  ||
+|| `text-...`, `font-...` ||||||  general text & font properties  ||
+|| `text-anchor-horizontal` || horizontal text label placement || `left`, `center`, `right` ||  `right`  ||
+|| `text-anchor-vertical` || vertical text label placement || `above`, `top`, `center`, `bottom`, `below` ||  `bottom`  ||
+|| `text-rotation` || Rotate the text clockwise or anti clockwise (negative value) (since r16253) || `[rad]`, `[rad]rad`, `[deg]°`, `[deg]deg`, `[grad]grad`, `[turn]turn` ([https://developer.mozilla.org/en/docs/Web/CSS/angle definition]) or a cardinal direction (e.g. `northeast` or `sw`); See also the functions `degree_to_radians`, `cardinal_to_radians`. (Note that the direction means where the upper edge of the text faces. That means with the default direction of north the text flows to east (with a left to right language). So if you want to flow it to e.g. south you need to set east.) ||  -  ||
+Do not rely on the default values for `symbol-...` properties (except for `opacity`). They are intended for "quick & dirty" style sheets and should be set to an explicit value.
 === Line styles ===
 ||=  '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =||
 || {{{width}}} || Line width || ''Width'' ||  -  ||
 || {{{color}}} || Line color || ''Color'' ||  value of {{{fill-color}}} or (if unset) JOSM's default untagged color ({{{#808080}}}) ||
 || {{{opacity}}} || How transparent the line is. || ''Opacity'' ||  1.0  ||
 || {{{dashes}}} || An array of alternating on/off lengths || list of numbers, e.g. [[br]]> 15, 5 [[br]][[br]]may be written as expression: [[br]] > {{{list(3, 4, 5, 6)}}} [[br]][[br]]or the keyword {{{none}}}[[br]]to turn dashes off ||  -  ||
 || {{{dashes-offset}}} || shift the dash pattern by a certain amount || ''Number'' (>= 0) ||  0  ||
 || {{{dashes-background-color}}} || The color to use in between the dashes (optional) || ''Color'' ||  -  ||
 || {{{dashes-background-opacity}}} || Opacity value for the dashes background || ''Opacity'' ||  value of {{{opacity}}}  ||
 || {{{linecap}}} || Shape at the end of the line (see [https://www.w3.org/TR/SVG/painting.html#StrokeLinecapProperty here]) || {{{none}}}, {{{round}}}, {{{square}}} ||  {{{none}}}  ||
 || {{{linejoin}}} || Shape at the line corners || {{{round}}}, {{{miter}}}, {{{bevel}}} ||  {{{round}}}  ||
 || {{{miterlimit}}}                                   || Applies for {{{linejoin: miter}}}. Sets the maximum overshoot when line segments meet at a very small angle || ''Number'' (>= 1.0) ||  10.0  ||
 || {{{offset}}} || Move line to the left or right (when looking in way direction). This could be used to draw multiple lanes for one way or mark left and right side of a way differently. || ''Number'' (positive value moves line to the left, negative to the right) ||  0  ||
 || {{{text-position}}} || set to {{{line}}}, if text should be drawn along the line || {{{line}}}, {{{center}}} ||  -  ||
 || {{{text-...}}}, {{{font-...}}} ||||||  general text & font properties  ||
+|| `width` || Line width || ''Width'' ||  -  ||
+|| `color` || Line color || ''Color'' ||  value of `fill-color` or (if unset) JOSM's default untagged color (`#808080`) ||
+|| `opacity` || How transparent the line is. || ''Opacity'' ||  1.0  ||
+|| `dashes` || An array of alternating on/off lengths || list of numbers, e.g. \\> 15, 5 \\ \\may be written as expression: \\ > `list(3, 4, 5, 6)` \\ \\or the keyword `none` \\to turn dashes off ||  -  ||
+|| `dashes-offset` || shift the dash pattern by a certain amount || ''Number'' (>= 0) ||  0  ||
+|| `dashes-background-color` || The color to use in between the dashes (optional) || ''Color'' ||  -  ||
+|| `dashes-background-opacity` || Opacity value for the dashes background || ''Opacity'' ||  value of `opacity`  ||
+|| `linecap` || Shape at the end of the line (see [https://www.w3.org/TR/SVG/painting.html#StrokeLinecapProperty here]) || `none`, `round`, `square` ||  `none`  ||
+|| `linejoin` || Shape at the line corners || `round`, `miter`, `bevel` ||  `round`  ||
+|| `miterlimit` || Applies for `linejoin: miter`. Sets the maximum overshoot when line segments meet at a very small angle || ''Number'' (>= 1.0) ||  10.0  ||
+|| `offset` || Move line to the left or right (when looking in way direction). This could be used to draw multiple lanes for one way or mark left and right side of a way differently. || ''Number'' (positive value moves line to the left, negative to the right) ||  0  ||
+|| `text-position` || set to `line`, if text should be drawn along the line || `line`, `center` ||  -  ||
+|| `text-...`, `font-...` ||||||  general text & font properties  ||
 || `repeat-image` || repeated image along a line ''(since r5801)'' || ''Image'' ||  -  ||
 || `repeat-image-width` || Width of the image (optional, see `icon-width`) ''(since r5811)'' || ''Number'' ||  -  ||
 …
 || `repeat-image-opacity` || Opacity of the repeated image ''(since r16700)'' || ''Number'' ||  1.0  ||
 All these properties (except for {{{text-...}}} and {{{font-...}}}) exist also with the {{{casing-}}} prefix. The casing is a second independent line element, that is drawn below the normal line and can be used to draw a thin frame around the line in another color.
+All these properties (except for `text-...` and `font-...`) exist also with the `casing-` prefix. The casing is a second independent line element, that is drawn below the normal line and can be used to draw a thin frame around the line in another color.
 ||=  '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =||
 || {{{casing-width}}}               || Width of the border on both sides of the main line. In JOSM < 5214: Total width of the casing || ''Width'' (revers to {{{width}}} if relative width is specified) ||  -  ||
 || {{{casing-color}}} || Casing color || ''Color'' ||  value of {{{fill-color}}} or (if unset) JOSM's default untagged color ({{{#808080}}}) ||
 || {{{casing-opacity}}} || How transparent the casing is. || ''Opacity'' ||  1.0  ||
 || {{{casing-}}}... || ... || ... ||  ...  ||
 Similar to {{{casing-}}}, there is also the {{{left-casing-}}} and {{{right-casing-}}} prefix. It draws additional lines to the left and to the right of the main line.
+|| `casing-width` || Width of the border on both sides of the main line. In JOSM < 5214: Total width of the casing || ''Width'' (revers to `width` if relative width is specified) ||  -  ||
+|| `casing-color` || Casing color || ''Color'' ||  value of `fill-color` or (if unset) JOSM's default untagged color (`#808080`) ||
+|| `casing-opacity` || How transparent the casing is. || ''Opacity'' ||  1.0  ||
+|| `casing-`... || ... || ... ||  ...  ||
+Similar to `casing-`, there is also the `left-casing-` and `right-casing-` prefix. It draws additional lines to the left and to the right of the main line.
 === Area styles ===
 ||=  '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =||
+|| {{{fill-color}}} || Color in which to fill the area. Until 11700, the alpha component was set to 50 to create a transparency effect. || ''Color'' ||  -  ||
+|| {{{fill-image}}} || Image pattern || ''Image'' ||  -  ||
+|| {{{fill-extent}}} || Set this property, to draw only the outline of the area. The number specifies, how far to fill from the border of the area towards the center. (If unset, the area will be filled completely) ''(since r9008)'' || ''Number'' ||  -  ||
+|| {{{fill-extent-threshold}}} || Set this property, to draw full area when the given percentage of coverage is reached. Can be greater than 100% as the covered area is estimated as **perimeter * extent**. || ''Number'' ||  -  ||
+|| {{{fill-opacity}}} || How transparent the fill is; applies to both color and image || ''Opacity'' || 0.2 ''(since r11700, 1.0 before that)'' (can be changed with the {{{mappaint.fillalpha}}} and {{{mappaint.fill-image-alpha}}} preferences)  ||
+|| {{{text-position}}} || set to {{{center}}}, if text should be drawn in the center of the area. Set to {{{inside}}} to place the text completely inside the area. ''(since r11722)'' || {{{line}}}, {{{center}}}, {{{inside}}} ||  -  ||
+|| {{{text-...}}}, {{{font-...}}} ||||||  general text & font properties  ||
+Required properties to create an Area style: {{{fill-color}}} or {{{fill-image}}}
+|| `fill-color` || Color in which to fill the area. Until 11700, the alpha component was set to 50 to create a transparency effect. || ''Color'' ||  -  ||
+|| `fill-image` || Image pattern || ''Image'' ||  -  ||
+|| `fill-extent` || Set this property, to draw only the outline of the area. The number specifies, how far to fill from the border of the area towards the center. (If unset, the area will be filled completely) ''(since r9008)'' || ''Number'' ||  -  ||
+|| `fill-extent-threshold` || Set this property, to draw full area when the given percentage of coverage is reached. Can be greater than 100% as the covered area is estimated as **perimeter * extent**. || ''Number'' ||  -  ||
+|| `fill-opacity` || How transparent the fill is; applies to both color and image || ''Opacity'' || 0.2 ''(since r11700, 1.0 before that)'' (can be changed with the `mappaint.fillalpha` and `mappaint.fill-image-alpha` preferences)  ||
+|| `text-position` || set to `center`, if text should be drawn in the center of the area. Set to `inside` to place the text completely inside the area. ''(since r11722)'' || `line`, `center`, `inside` ||  -  ||
+|| `text-...`, `font-...` ||||||  general text & font properties  ||
+Required properties to create an Area style: `fill-color` or `fill-image`
 === Text & Font properties ===
 …
 |-------------------------------------------------------------------------------
 {{{#!td align=left  valign=top
+{{{text}}}
+`text`
 }}}
 {{{#!td align=left  valign=top
 …
 }}}
 {{{#!td align=left  valign=top
+{{{auto}}}
    Derive the text automatically. The default name tags are: "{{{name:}}}"+''<LANG>'', "{{{name}}}", "{{{int_name}}}", "{{{ref}}}", "{{{operator}}}", "{{{brand}}}" and "{{{addr:housenumber}}}".
    Configure a list of tag names in the preference "{{{mappaint.nameOrder}}}" in order to change this list. (After changing the list, a restart of JOSM is required.)
+`auto`
+   Derive the text automatically. The default name tags are: "`name:`"+''<LANG>'', "`name`", "`int_name`", "`ref`", "`operator`", "`brand`" and "`addr:housenumber`".
+   Configure a list of tag names in the preference "`mappaint.nameOrder`" in order to change this list. (After changing the list, a restart of JOSM is required.)
 ''String''
 …
 ''Expressions''
   You can enter an expression to compute the text to be displayed. Examples:
   * {{{eval("this is a static text")}}} - renderes a static text
   * {{{eval(concat(tag("first"), "-", tag("second")))}}} - displays the concatenated tags "first" and "second"
+{{{""}}}
+  * `eval("this is a static text")` - renderes a static text
+  * `eval(concat(tag("first"), "-", tag("second")))` - displays the concatenated tags "first" and "second"
+`""`
    To delete a previous set text.
 }}}
 …
 }}}
 |-------------------------------------------------------------------------------
 || {{{text-color}}} || the text color || ''Color'' ||  {{{white}}} for lines and nodes, {{{#c0c0c0}}} for areas (JOSM "{{{text}}}" and "{{{areatext}}}" color preferences) ||
 || {{{text-opacity}}} || how transparent the text is || ''Opacity'' ||  1.0  ||
 || {{{text-offset-x}}} || shift the text horizontally, (not supported for text along line) || ''Number'' ||  0  ||
 || {{{text-offset-y}}} (can also be written as {{{text-offset}}})  || shift the text vertically, positive values shift the text in upwards direction  || ''Number'' ||  0  ||
 || {{{text-halo-radius}}} || size of text background border (to make text visible on background with a similar color) || ''Number'' ||  -  ||
 || {{{text-halo-color}}} || color of the text halo || ''Color'' ||  complement of the text color  ||
 || {{{text-halo-opacity}}} || transparency for the text halo || ''Opacity'' ||  1.0  ||
 || {{{font-family}}} || font family || ''String'' ||  "Droid Sans"[[br]](JOSM preference "mappaint.font")  ||
 || {{{font-size}}} || font size || ''Number'' ||  8[[br]](JOSM preference "mappaint.fontsize")  ||
 || {{{font-weight}}} || bold or not || {{{bold}}}, {{{normal}}} ||  {{{normal}}}  ||
 || {{{font-style}}} || italic or not || {{{italic}}}, {{{normal}}} ||  {{{normal}}}  ||
+|| `text-color` || the text color || ''Color'' ||  `white` for lines and nodes, `#c0c0c0` for areas (JOSM "`text`" and "`areatext`" color preferences) ||
+|| `text-opacity` || how transparent the text is || ''Opacity'' ||  1.0  ||
+|| `text-offset-x` || shift the text horizontally, (not supported for text along line) || ''Number'' ||  0  ||
+|| `text-offset-y` (can also be written as `text-offset`)  || shift the text vertically, positive values shift the text in upwards direction  || ''Number'' ||  0  ||
+|| `text-halo-radius` || size of text background border (to make text visible on background with a similar color) || ''Number'' ||  -  ||
+|| `text-halo-color` || color of the text halo || ''Color'' ||  complement of the text color  ||
+|| `text-halo-opacity` || transparency for the text halo || ''Opacity'' ||  1.0  ||
+|| `font-family` || font family || ''String'' ||  "Droid Sans" \\(JOSM preference "mappaint.font")  ||
+|| `font-size` || font size || ''Number'' ||  8 \\(JOSM preference "mappaint.fontsize")  ||
+|| `font-weight` || bold or not || `bold`, `normal` ||  `normal`  ||
+|| `font-style` || italic or not || `italic`, `normal` ||  `normal`  ||
 === User defined properties ===
 …
 '' '''Width''' ''
  - 14.0 (any positive number)
  - {{{default}}} (use JOSM's default line width, which is 2, but can be configured)
  - {{{thinnest}}} (draws the line as thin as possible)
  - +3 (with plus sign in front) adds the amount to the width on the default layer. This applies only for styles that are not on the default layer, e.g. highlights. Another way to write this would be {{{prop("width","default")+3}}}. For {{{casing-width}}}, this refers to the {{{width}}} value on the same layer.
+ - `default` (use JOSM's default line width, which is 2, but can be configured)
+ - `thinnest` (draws the line as thin as possible)
+ - +3 (with plus sign in front) adds the amount to the width on the default layer. This applies only for styles that are not on the default layer, e.g. highlights. Another way to write this would be `prop("width","default")+3`. For `casing-width`, this refers to the `width` value on the same layer.
 '' '''Image''' ''
 …
 '' '''Color''' ''
  * named color as found in [https://www.w3.org/TR/css3-color/#svg-color this] list
  * html style: '''{{{#RRGGBB}}}''', '''{{{#RGB}}}''', '''{{{#RRGGBBAA}}}'''
  * '''{{{rgb(/*r*/, /*g*/, /*b*/)}}}''' - rgb value with arguments from 0.0 to 1.0
  * '''{{{rgba(/*r*/, /*g*/, /*b*/, /*alpha*/)}}}''' - rgb value with alpha
  * '''{{{hsb_color(/*hue*/, /*saturation*/, /*brightness*/)}}}''' - color from HSB color space
+ * html style: '''`#RRGGBB`''', '''`#RGB`''', '''`#RRGGBBAA`'''
+ * '''`rgb(/*r*/, /*g*/, /*b*/)`''' - rgb value with arguments from 0.0 to 1.0
+ * '''`rgba(/*r*/, /*g*/, /*b*/, /*alpha*/)`''' - rgb value with alpha
+ * '''`hsb_color(/*hue*/, /*saturation*/, /*brightness*/)`''' - color from HSB color space
 '' '''Opacity''' ''
 …
 '' '''String''' ''
  * any character sequence, in quotes, e.g. {{{"images/fill.png"}}}. If the string is an identifier, quotes are optional. (Quote and backslash sign can be escaped.)
+ * any character sequence, in quotes, e.g. `"images/fill.png"`. If the string is an identifier, quotes are optional. (Quote and backslash sign can be escaped.)
 '' '''Number''' ''
 …
  * has a special meaning if you put a "+" sign in front (relative width)
 == Eval expressions ==
 See [/doc/org/openstreetmap/josm/gui/mappaint/mapcss/Functions.html#method_summary Javadoc of Functions] for the up-to-date list of functions supported by JOSM's MapCSS implementation.
 …
   if ('''b''') then '''fst''' else '''snd'''
  list(a, b, ...)::
   create list of values, e.g. for the {{{dashes}}} property
+  create list of values, e.g. for the `dashes` property
  get(lst, n)::
   get the ''n''th element of the list ''lst'' (counting starts at 0) [''since r5699'']
 …
   splits string ''str'' at occurrences of the separator string ''sep'', returns a list [''since r5699'']
  prop(''p_name'')::
   value of the property ''p_name'' of the current layer, e.g. prop({{{"width"}}})
+  value of the property ''p_name'' of the current layer, e.g. prop(`"width"`)
  prop(''p_name'', ''layer_name'')::
   property from the layer ''layer_name''
 …
   [https://en.wikipedia.org/wiki/Percent-encoding percent-decode] a string. [''since r11756'']
  XML_encode(str)::
   escape special characters in xml. E.g. {{{<}}} becomes {{{&lt;}}}, other special characters: {{{>}}}, {{{"}}}, {{{'}}}, {{{&}}}, {{{\n}}}, {{{\t}}} and {{{\r}}} [''since r6809'']
+  escape special characters in xml. E.g. `<` becomes `&lt;`, other special characters: `>`, `"`, `'`, `&`, `\n`, `\t` and `\r` [''since r6809'']
  CRC32_checksum(''str'')::
   calculate the CRC32 checksum of a string (result is an integer from 0 to 2^32^-1) [''since r6908'']
 …
   prints a string representation of `o` to the command line, followed by a new line (for debugging) [''since r7237'']
  JOSM_pref(''key'', ''default'')::
   Get value from the JOSM advanced preferences. This way you can offer certain options to the user and make the style customizable. It works with strings, numbers, colors and boolean values. [[br]][This function exists since version r3856, but with some restrictions. `JOSM_pref` always returns a string, but in version r7237 and earlier, the automatic conversion of string to boolean and color was not working. You can use the following workarounds for boolean values and color in version r7237 and earlier: `cond(JOSM_pref("myprefkey", "true")="true", "X", "O")` and `html2color(JOSM_pref("mycolor", "#FF345611"))`. These explicit conversions should be no longer necessary in version r7238 and later. Automatic conversion to a number works in any version. Furthermore, in version r16590, can be used to set color properties. So `* { set_color: JOSM_pref("pref", #000000); }` will create a color property now.]
+  Get value from the JOSM advanced preferences. This way you can offer certain options to the user and make the style customizable. It works with strings, numbers, colors and boolean values. \\[This function exists since version r3856, but with some restrictions. `JOSM_pref` always returns a string, but in version r7237 and earlier, the automatic conversion of string to boolean and color was not working. You can use the following workarounds for boolean values and color in version r7237 and earlier: `cond(JOSM_pref("myprefkey", "true")="true", "X", "O")` and `html2color(JOSM_pref("mycolor", "#FF345611"))`. These explicit conversions should be no longer necessary in version r7238 and later. Automatic conversion to a number works in any version. Furthermore, in version r16590, can be used to set color properties. So `* { set_color: JOSM_pref("pref", #000000); }` will create a color property now.]
  setting()::
   to use a [wikitr:/Help/Styles/MapCSSImplementation#Stylesettings style setting] [''since r7450'']
 …
   returns true if the object centroid lies at given ''lat''/''lon'' coordinates, e.g. to check for nodes at "null island" `node[at(0.0,0.0)]` [''since r12514'']
  is_similar(''str1'', ''str2'')::
   returns true if the two strings are similar, but not identical, i.e., have a Levenshtein distance of 1 or 2. Example: {{{way[highway][name][is_similar(tag(name), "Main Street")]}}} checks for streets with a possible typo in the name (e.g. Main Streeg). [''since r14371'']
+  returns true if the two strings are similar, but not identical, i.e., have a Levenshtein distance of 1 or 2. Example: `way[highway][name][is_similar(tag(name), "Main Street")]` checks for streets with a possible typo in the name (e.g. Main Streeg). [''since r14371'']
  gpx_distance()::
   returns the lowest distance between the OSM object and a GPX point [''since r14802'']
 …
 === Examples ===
 * circle symbol for house number with size depending of the number of digits
 {{{
 …
 == Compatibility notes ==
 === MapCSS 0.2 ===
 ==== Grammar ====
+ * {{{way[oneway=yes]}}} does not have any magic, you can use {{{way[oneway?]}}} instead
+ * no {{{@import}}}
+ * JOSM does not require {{{eval(...)}}} to be wrapped around expressions, but for compatibility with other MapCSS implementations you should write it out.
+ * `way[oneway=yes]` does not have any magic, you can use `way[oneway?]` instead
+ * no `@import`
+ * JOSM does not require `eval(...)` to be wrapped around expressions, but for compatibility with other MapCSS implementations you should write it out.
 ==== Properties ====
 At the moment, JOSM does ''not'' support the following properties:
  line: ::
   {{{image}}}
+  `image`
  label: ::
   {{{font-variant, text-decoration, text-transform, max-width}}}
+  `font-variant, text-decoration, text-transform, max-width`
  shield: ::
   not supported
 === Halcyon (Potlatch 2) ===
  * Text label is placed in the center of the icon. For compatibility with Halcyon put
 {{{
 …
  at the beginning of your style sheet.
  * standard z-index in Halcyon is 5, but it is 0 in JOSM
  * '''{{{image: circle;}}}''' corresponds to '''{{{symbol-shape: circle;}}}'''
+ * '''`image: circle;`''' corresponds to '''`symbol-shape: circle;`'''
 === Kothic ===
  * Kothic has support for eval, which probably differs from JOSM's eval.
  * Kothic understands units, whereas JOSM always calculates in pixel.
+ * The extrusion features are not available in JOSM
+ * The extrusion features are not available in JOSM.
 === Ceyx ===
+ * seems to have {{{[tunnel=1]}}} instead of {{{[tunnel=yes]}}} (Halcyon) or {{{[tunnel?]}}} (JOSM)
+ * seems to have `[tunnel=1]` instead of `[tunnel=yes]` (Halcyon) or `[tunnel?]` (JOSM)
 == Media queries (deprecated) ==
 …
 }}}
 {{{#!td
 Only include {{{@media}}} section when the current version of JOSM is greater than or equal to the specified number.
+Only include `@media` section when the current version of JOSM is greater than or equal to the specified number.
 }}}
 |-
 …
 }}}
 {{{#!td
 Only include {{{@media}}} section when the current version of JOSM is lower than or equal to the specified number.
+Only include `@media` section when the current version of JOSM is lower than or equal to the specified number.
 }}}
 |-
 …
 }}}
 {{{#!td
 Only include {{{@media}}} section when the name of the editor / renderer matches the given string. In JOSM, the only accepted value is {{{josm}}}.
+}}}
 Conditions can be combined with {{{and}}}:
+Only include `@media` section when the name of the editor / renderer matches the given string. In JOSM, the only accepted value is `josm`.
+}}}
+Conditions can be combined with `and`:
 {{{
 …
 {{{#!comment
 There is also the {{{not}}} keyword (see the linked css doc for details).
+There is also the `not` keyword (see the linked css doc for details).
 This is implemented, but probably not very useful. Feel free to add documentation.
 }}}