453
edits
Template:CD: Difference between revisions
no edit summary
(Adding vertical-align 4th parameter) |
No edit summary |
||
Line 9:
| color
| size
| vertical-align
}}
</nowiki></pre>
The only required parameter is the text; the other
The text will be rendered with the Cards-and-Dice font, which uses ligatures starting with <code>:</code> to refer to the different images that are available. For instance <code>:d20-
The color is any CSS color, which will be applied to the
The size is a CSS font size, such as <code>3em</code> to make it three times the font height of the surrounding text, or <code>25px</code> to make it exactly 25 CSS pixels high. The default is 2em, which makes it twice the height of surrounding text, which is about right to be visible without affecting line spacing within text. In diagrams you may want to increase this for extra visibility.
The vertical-align value is used to bump the symbol higher or lower relative to the surrounding text. Any valid CSS value can be used here. See https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align and bellow for examples.
=== Examples ===
Line 49 ⟶ 52:
text{{CD|:d8-3}}{{CD|:d8-3|red|2em|text-bottom}}text
{|class="wikitable" style="text-align:center;"
|style=" padding: 15px;"|unset{{CD|:d6-1||3em|unset}}unset
|sub{{CD|:d6-2||3em|sub}}sub
|super{{CD|:d6-3||3em|super}}super
|-
|<nowiki>{{CD|:d6-1||3em|unset}}</nowiki>
|<nowiki>{{CD|:d6-2||3em|sub}}</nowiki>
|<nowiki>{{CD|:d6-3||3em|super}}</nowiki>
|-
|style=" padding: 15px;"|baseline{{CD|:d6-4||3em|baseline}}baseline
|text-top{{CD|:d6-5||3em|text-top}}text-top
|text-bottom{{CD|:d6-6||3em|text-bottom}}text-bottom
|-
|<nowiki>{{CD|:d6-4||3em|baseline}}</nowiki>
|<nowiki>{{CD|:d6-5||3em|text-top}}</nowiki>
|<nowiki>{{CD|:d6-6||3em|text-bottom}}</nowiki>
|-
|style=" padding: 15px;"|middle{{CD|:d6-1||3em|middle}}middle
|pixels{{CD|:d6-2||3em|20px}}pixels
|percent{{CD|:d6-3||3em|-100%}}percent
|-
|<nowiki>{{CD|:d6-1||3em|middle}}</nowiki>
|<nowiki>{{CD|:d6-2||3em|20px}}</nowiki>
|<nowiki>{{CD|:d6-3||3em|-100%}}</nowiki>
|}
The vertical-align property is specified as one of the values listed below.
Values for inline elements
Parent-relative values
These values vertically align the element relative to its parent element:
baseline
Aligns the baseline of the element with the baseline of its parent. The baseline of some replaced elements, like <textarea>, is not specified by the HTML specification, meaning that their behavior with this keyword may vary between browsers.
sub
Aligns the baseline of the element with the subscript-baseline of its parent.
super
Aligns the baseline of the element with the superscript-baseline of its parent.
text-top
Aligns the top of the element with the top of the parent element's font.
text-bottom
Aligns the bottom of the element with the bottom of the parent element's font.
middle
Aligns the middle of the element with the baseline plus half the x-height of the parent.
<length>
Aligns the baseline of the element to the given length above the baseline of its parent. A negative value is allowed.
<percentage>
Aligns the baseline of the element to the given percentage above the baseline of its parent, with the value being a percentage of the line-height property. A negative value is allowed.
</noinclude>
| |||