ChemWriter

Drawing Style

The appearance of structures displayed with Editor or Image can be controlled through a drawing style. A drawing style is a JSON object whose properties describe the appearance of a chemical structure drawing.

A drawing style is deployed by adding a <script> tag containing a data-chemwriter-style attribute to your web page. Within the tag, a valid JSON object defines the drawing properties to override.

The following definition sets drawing settings to their default values.

<script type="application/json" data-chemwriter-style>
  {
    "border":             0.15,
    "line-width":         0.1,
    "line-offset":        0.2,
    "line-end-padding":   0.08,
    "stereo-width":       0.25,
    "node-cap-height":    0.42,
    "methyl-visible":     false,
    "line-color":         "#000000",
    "unknown-node-color": "#555555",
    "node-colors": {
      "N":  "#0000ff",
      "O":  "#ff0000",
      "F":  "#ff00ff",
      "P":  "#ff9900",
      "S":  "#ff9900",
      "Cl": "#00ff00",
      "Br": "#cc3333",
      "I":  "#940094"
    }
  }
</script>

Numerical values are represented as a ratio with the average bond length. For example, if the average bond length is 2.0 and the line-width is 0.1 (the default value), the line width will appear to be one fifth of the average bond length.

Attribute Description Allowed Values
border spacing around structure number
line-width the width of lines number
line-offset the distance between the lines in double and triple bonds number
line-end-padding the distance between the end of a line and an atom label number
stereo-width the maximum width of a wedge or hash bond number
node-cap-height the height of an label number number
methyl-visible if true, terminal carbons will be displayed using the label "CHn", where n is an integer boolean
line-color the color of all lines hex RGB color
unknown-node-color the color of atoms with unassigned colors hex RGB color
node-colors the color scheme for atom labels object