Railroad CSS

This is still a work in progress.

Tags

<rr-rr>Every railroad diagram must be inside this tag, and it must immediatly contain an <rr-a> <rr-o> tag. This tag shouldn't be nested.
<rr-a>A "serial" / "and" railroad part. The containing parts are one after another.
<rr-o>A "parallel" / "or" railroad part. The containing parts are stacked, the line goes to and from all of them.
<rr-t>Meant for Terminals (sequences of characters). Shouldn't contain other railroad parts.
<rr-c>Meant for character lists. Shouldn't contain other railroad parts.
<a>Meant for referencing other rules. They're essentially just links, so the href="#rule" attribute can be used as normal.

Attribute & classes

data-minA number. Minimum amount of repetitions, can be 0. It won't actually repeat anything. It'll draw an optional line if 0, and a loop line if > 1. The number isn't indicated yet.
data-maxA number or "inf". Maximum amount of repetitions, shouldn't be 0. It won't actually repeat anything. It'll draw a loop line if > 1. The number isn't indicated yet.
class="opt"Just shows the optional line.

Example: Number

Hover an item using the mouse to highlight a part of the railroad.

<rr-rr>
  <rr-a>
    <rr-t data-min="0">"-"</rr-t>
    <rr-o>
      <rr-a>
        <rr-c>1-9</rr-c>
        <rr-c data-min="0" data-max="inf">0-9</rr-c>
      </rr-a>
      <rr-t>"0"</rr-t>
    </rr-o>
    <rr-a data-min="0">
      <rr-t>"."</rr-t>
      <rr-c data-max="inf">0-9</rr-c>
    </rr-a>
    <rr-a data-min="0">
      <rr-c>Ee</rr-c>
      <rr-c data-min="0">+-</rr-c>
      <rr-c data-max="inf">0-9</rr-c>
    </rr-a>
  </rr-a>
</rr-rr>

"-" 1-9 0-9 "0" "." 0-9 Ee +- 0-9

Table with Diagrams

There are also a few tags for putting the syntax disgrams in a table & to make sure the names on the left side align nicely with the diagrams on the right. Those tags are <rr-root> for the table, <rr-r> for the table row, and <rr-n> for the diagram names.
Number Integer Fraction Exponent Integer "-" 1-9 0-9 "0" Fraction "." 0-9 Exponent Ee +- 0-9 
<rr-root>

  <rr-r id="rr-number">
    <rr-n>Number</rr-n>
    <rr-rr>
      <rr-a>
        <a href="#rr-integer">Integer</a>
        <a href="#rr-fraction" data-min="0">Fraction</a>
        <a href="#rr-exponent" data-min="0">Exponent</a>
      </rr-a>
    </rr-rr>
  </rr-r>

  <rr-r id="rr-integer">
    <rr-n>Integer</rr-n>
    <rr-rr>
      <rr-a>
        <rr-t data-min="0">"-"</rr-t>
        <rr-o>
          <rr-a>
            <rr-c>1-9</rr-c>
            <rr-c data-min="0" data-max="inf">0-9</rr-c>
          </rr-a>
          <rr-t>"0"</rr-t>
        </rr-o>
      </rr-a>
    </rr-rr>
  </rr-r>

  <rr-r id="rr-fraction">
    <rr-n>Fraction</rr-n>
    <rr-rr>
      <rr-a>
        <rr-t>"."</rr-t>
        <rr-c data-max="inf">0-9</rr-c>
      </rr-a>
    </rr-rr>
  </rr-r>

  <rr-r id="rr-exponent">
    <rr-n>Exponent</rr-n>
    <rr-rr>
      <rr-a>
        <rr-c>Ee</rr-c>
        <rr-c data-min="0">+-</rr-c>
        <rr-c data-max="inf">0-9</rr-c>
      </rr-a>
    </rr-rr>
  </rr-r>

</rr-root>

Customization

Dark Mode

Per default, the diagram has a dark mode used depending on a media query which checks for "prefers-color-scheme:dark". The dark mode can be disabled by setting the "rr-no-dark" class on the <html> tag.

Size

All lines and paddings are specified in "em". Changing the font size will scale the whole diagram.

Custom CSS Variables

--rr-color-terminalColor for <rr-t> elements.
--rr-color-rule-refColor for <a> elements.
--rr-color-byterangeColor for <rr-c> elements.
--rr-colorThe color of the railroad line
--rr-bgcolorThe background color
--rr-line-sizeThe size / thickness of the railroad line
--rr-radiusThe radius where the railroad line bends
--rr-line-heightThis sets the line-height property. It's used whenever the height of some text containign elements has to be calculated.
--rr-spacingDefault for all margins
--rr-spacing-yDefault for vertical margins
--rr-t-border-widthAll boxes with a border have this width
--rr-t-padding-verticalThe vertical padding of all the boxes
--rr-t-padding-horizontalThe horizontal padding of all the boxes
--rr-lr-loop-inner-marginIf there is a loop line, this adds extra horizontal space on the inside.
--rr-lr-loop-outer-marginIf there is a loop line, this adds extra horizontal space on the outside.
--rr-lr-alt-marginExtra spacing for every text box.
--rr-opt-line-spacing-yIf there is an optional line, this is the distance to that line.
--rr-loop-line-spacing-yIf there is a loop line, this is the distance to that line.
--rr-line-top-displacementWhere the line meets the box, the default is in the middle.