Change Drawing Style
The appearance of chemical structures is controlled by a stylesheet. A stylesheet is a potentially-nested set of key-value pairs defining various drawing properties.
Currently, inline stylesheets are supported. These can be deployed by adding a <script> tag with a type attribute of "application/json" and a key-only data-chemwriter-style attribute.
The example stylesheet below preserves ChemWriter's default settings with two exceptions: methyl groups are given the label "CH3"; and nitrogen atom labels are colored green.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Inline Stylesheet | ChemWriter</title>
<link rel="stylesheet" href="https://chemwriter.com/sdk/chemwriter.css">
<script src="https://chemwriter.com/sdk/chemwriter.js" data-chemwriter-license="https://chemwriter.com/licenses/396f597e46fbdbd39e34108b010c6efcb2ef2ed2.txt"></script>
<style>
.image { max-width: 350px; height: 200px; }
</style>
</head>
<body>
<div class="image">
<div data-chemwriter-ui="image"
data-chemwriter-src="https://chemwriter.com/data/structure-2.mol">
</div>
</div>
<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": true,
"line-color": "#000000",
"unknown-node-color": "#555555",
"node-colors": {
"N": "#35ad22",
"O": "#ff0000",
"F": "#ff00ff",
"P": "#ff9900",
"S": "#ff9900",
"Cl": "#00ff00",
"Br": "#cc3333",
"I": "#940094"
}
}
</script>
</body>
</html>