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",
"bond-density": null,
"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 median bond length. For example, if the median 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 |
bond-density |
the maximum number of bonds permitted along the smallest Image dimension | number or null |