Template:CD

This template allows you to easily use the Cards and Dice font to include simple diagrams of pyramids and other components in pages.

Usage

{{CD
| Text Cards-and-Dice format
| color
| size
| vertical-align
}}

The only required parameter is the text; the other three are optional. If left off, color defaults to "black", size defaults to "2em", and vertical-align defaults to "unset".

The text will be rendered with the Cards-and-Dice font, which uses ligatures starting with : to refer to the different images that are available. For instance :d20-17 will be interpreted as a "twenty-sided die, face 17". See page How to Use Cards and Dice font for more details.

The color is any CSS color, which will be applied to the symbol. For instance, red, green, blue, #FFD22A, etc. The default if unspecified is black.

The size is a CSS font size, such as 3em to make it three times the font height of the surrounding text, or 25px 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

:d4-4	:d6-6	:d6n-6
{{CD|:d4-4|coral|3em}}	{{CD|:d6-6|goldenrod|3em}}	{{CD|:d6n-6|gold|3em}}
:d8-8	:d10-10	:d10p-70
{{CD|:d8-8|teal|3em}}	{{CD|:d10-10|seagreen|3em}}	{{CD|:d10p-70|green|3em}}
:d12-12	:d20-17	:d20-20
{{CD|:d12-12|cornflowerblue|3em}}	{{CD|:d20-17|royalblue|3em}}	{{CD|:d20-20|navy|3em}}

text:d8-3:d8-3text

unset:d6-1unset	sub:d6-2sub	super:d6-3super
{{CD|:d6-1||3em|unset}}	{{CD|:d6-2||3em|sub}}	{{CD|:d6-3||3em|super}}
baseline:d6-4baseline	text-top:d6-5text-top	text-bottom:d6-6text-bottom
{{CD|:d6-4||3em|baseline}}	{{CD|:d6-5||3em|text-top}}	{{CD|:d6-6||3em|text-bottom}}
middle:d6-1middle	pixels:d6-2pixels	percent:d6-3percent
{{CD|:d6-1||3em|middle}}	{{CD|:d6-2||3em|20px}}	{{CD|:d6-3||3em|-100%}}

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.