[EBNF] How to style differently Terminals and Non-Terminals ?

Question

Hi,

In this example from the documentation How can we specify a style for the "a" terminal : 

@startebnf
<style>
element {
  ebnf {
    LineColor blue
    Fontcolor green
    Backgroundcolor palegreen
    note {
      Backgroundcolor pink
    }
  }
}
</style>
title Title
styled_ebnf = {"a", c , "a" (* Note on a *)}
| ? special ?
| "repetition", 4 * '2';
(* Global End Note *)
@endebnf

Thanks

Answer 1

There is a way to set the style inside the generated SVG.

The output SVG contains rect elements.
Those rect that are terminals have attribute stroke-width=“0.5”, and nonterminals stroke-width=“1.5”, and special sequence also has a distinctive attributes stroke-width=“1” and stroke-dasharray.
Therefore, you can set an internal CSS style inside the SVG as follows:

<style>
    rect[style*="stroke-width:0.5"] {
      fill: Bisque !important;
      stroke: SaddleBrown !important;
      fill-opacity: 1 !important;
    }
    rect[style*="stroke-width:1"] {
      fill: LightCyan !important;
      stroke: SteelBlue !important;
      fill-opacity: 1 !important;
    }
    rect[style*="stroke-width:1.5"] {
      fill: Lavender !important;
      stroke: BlueViolet !important;
      fill-opacity: 1 !important;
    }
</style>

So the result looks like this: