# SBOL Visual CSS SBOL Visual CSS is a pure-CSS library to easily display schematic DNA sequences in the Visual SBOL standard: <div class="sbol-visual centered"> <div class="sbolv promoter">p1</div> <div class="sbolv cds">lac</div> <div class="sbolv terminator">terminator</div> </div> While very light, SBOL Visual CSS is versatile enough to serve as a generic SBOL visualizer for databases, web articles, etc. It is distributed as <a href="dist/sbol-visual-standalone.css" download target="_blank">a self-contained CSS file</a> (20kb) and is therefore fit for embedding into HTML emails. Its features include inline SBOL (for instance <span class="sbol-visual inline"> <span class="sbolv promoter"></span> <span class="sbolv cds"></span> <span class="sbolv terminator"></span> </span> ) and combinatorial designs: <div class="sbol-visual centered small"> <div class="sbolv insulator"></div> <div class='combinatorial'> <div class="sbol-visual"> <div class="sbolv promoter"></div> <div class="sbolv cds"></div> <div class="sbolv terminator"></div> </div> <div class="sbol-visual"> <div class="sbolv promoter"></div> <div class="sbolv cds"></div> <div class="sbolv terminator"></div> </div> <div class="sbolv user-defined">(bridge)</div> </div> <div class="sbolv promoter"></div> <div class='combinatorial'> <div class="sbolv cds"></div> <div class="sbolv cds"></div> </div> <div class="sbolv terminator"></div> </div> ## Some examples of SBOL Visual CSS in action - [A drag-and-drop SBOLv editor](examples/drag_and_drop_construct_editor.html) - [A text-based editor for combinatorial constructs](examples/text_based_construct_editor.html). - [Advanced tooltips](examples/advanced_tooltips.html) ## Contribute ! SBOL-visual CSS was originally written at the <a href="http://genomefoundry.org/">Edinburgh Genome Foundry</a> by [Zulko](https://github.com/Zulko). The code is released on [Github](https://github.com/Edinburgh-Genome-Foundry/SBOL-Visual-CSS) under the MIT Licence (Copyright Edinburgh Genome Foundry), everyone is welcome to contribute. ## Basic usage Link <a href="dist/sbol-visual-standalone.css" download target="_blank">sbol-visual-standalone.css</a> to your html document: ``` <link rel="stylesheet" href="sbol-visual-standalone.css"></link> ``` Then in the body write a `sbol-visual` div with different `sbolv` elements: ``` <div class="sbol-visual"> <div class="sbolv promoter"> P1 </div> <div class="sbolv ribosome-entry-site"> rbs 1 </div> <div class="sbolv cds"><em>acs</em></div> <div class="sbolv terminator"></div> <div class="sbolv insulator"></div> </div> ``` They will be displayed as follows: <div class="sbol-visual"> <div class="sbolv promoter"> P1 </div> <div class="sbolv ribosome-entry-site"> rbs 1 </div> <div class="sbolv cds"><em>acs</em></div> <div class="sbolv terminator"></div> <div class="sbolv insulator"></div> </div> Note that the `sbolv` divs can contain any kind of html, for instance a link: **Code:** ``` <div class="sbolv cds"> <a href="http://www.uniprot.org/uniprot/P0ACJ8"> Gene <em>crp</em> </a> </div> ``` **Result:** <div class="sbolv cds"> <a href="http://www.uniprot.org/uniprot/P0ACJ8"> Gene <em>crp</em> </a> </div> ## Centering the symbols An easy way to center the symbols is to add `centered` to the `sbol-visual` div. Beware that all lines will be centered, even if they contain only a single symbol (which can happen at the end of a line wrap). **Code:** ``` <div class="sbol-visual centered"> <div class="sbolv promoter"> P1 </div> <div class="sbolv cds">bla</div> <div class="sbolv terminator">t2</div> </div> ``` **Result:** <div class="sbol-visual centered"> <div class="sbolv promoter"> P1 </div> <div class="sbolv cds">bla</div> <div class="sbolv terminator">t2</div> </div> ## Adaptive width and line break Put any html you want into the `sbolv` divs, the SBOL symbols will stretch to make space: **Code:** ``` <div class="sbol-visual centered"> <div class="sbolv promoter"> P1 </div> <div class="sbolv ribosome-entry-site"> rbs 1 </div> <div class="sbolv cds">some longer gene name</div> <div class="sbolv terminator"></div> </div> ``` **Result:** <div class="sbol-visual centered"> <div class="sbolv promoter"> P1 </div> <div class="sbolv ribosome-entry-site"> rbs 1 </div> <div class="sbolv cds">some longer gene name</div> <div class="sbolv terminator"></div> </div> If the caption is longer than `sbolv.max-width` (default is `200px`) the caption will be wrapped: <div class="sbol-visual centered"> <div class="sbolv promoter"> P1 </div> <div class="sbolv ribosome-entry-site"> rbs 1 </div> <div class="sbolv cds">some really very long caption that you could have made shorter</div> <div class="sbolv terminator"></div> </div> And if there the `sbolv` take too much place for one line only they are automatically wrapped to the line (try changing your window's width and see how it responds): <div class="sbol-visual"> <div class="sbolv promoter"> P1 </div> <div class="sbolv ribosome-entry-site"> rbs 1 </div> <div class="sbolv cds"><em>acs</em></div> <div class="sbolv terminator"></div> <div class="sbolv insulator"></div> <div class="sbolv promoter"> P1 </div> <div class="sbolv ribosome-entry-site"> rbs 1 </div> <div class="sbolv cds"><em>acs</em></div> <div class="sbolv terminator"></div> <div class="sbolv insulator"></div> <div class="sbolv promoter"> P1 </div> <div class="sbolv ribosome-entry-site"> rbs 1 </div> <div class="sbolv cds"><em>acs</em></div> <div class="sbolv terminator"></div> <div class="sbolv insulator"></div> </div> ## Changing the symbols' size Since the symbols are vector graphics they will render well at any size. The size of the symbols is driven by the height of the `sbolv` divs. To get smaller symbols you would first add CSS class `small` to `sbol-visual`: ``` .sbol-visual.small .sbolv { height: 80px; /* default is 120px */ min-width: 35px; /* default is 50px */ } ``` Then add `small` to your div's classes: **Code:** ``` <div class="sbol-visual small centered"> <div class="sbolv promoter"> P1 </div> <div class="sbolv cds">bla</div> <div class="sbolv terminator">t2</div> </div> ``` **Result:** <div class="sbol-visual centered small"> <div class="sbolv promoter"> P1 </div> <div class="sbolv cds">bla</div> <div class="sbolv terminator">t2</div> </div> <style> .sbol-visual.small .sbolv { height: 80px; min-width: 35px; } </style> ## Combinatorial designs Combinatorial designs (where several possibilities are given for some regions of the design) can be represented by grouping several symbols inside a div with class `combinatorial`. **Code:** ``` <div class="sbol-visual centered small"> <div class="sbolv promoter">p1</div> <div class='combinatorial'> <div class="sbolv cds">gfp-mut2</div> <div class="sbolv cds">gfp-mut3</div> <div class="sbolv cds">yfp</div> </div> <div class='combinatorial'> <div class="sbolv terminator">term1</div> <div class="sbolv terminator">term2</div> </div> <div class="sbolv insulator">insulator</div> </div> **Result:** ``` <div class="sbol-visual centered small"> <div class="sbolv promoter">p1</div> <div class='combinatorial'> <div class="sbolv cds">gfp-mut2</div> <div class="sbolv cds">gfp-mut3</div> <div class="sbolv cds">yfp</div> </div> <div class='combinatorial'> <div class="sbolv terminator">term1</div> <div class="sbolv terminator">term2</div> </div> <div class="sbolv insulator">insulator</div> </div> You can also insert a `sbol-visual` div inside a `combinatorial` div to make more complex combinations: **Code:** ``` <div class="sbol-visual centered small"> <div class="sbolv insulator"></div> <div class='combinatorial'> <div class="sbol-visual"> <div class="sbolv promoter"></div> <div class="sbolv cds"></div> <div class="sbolv terminator"></div> </div> <div class="sbol-visual"> <div class="sbolv promoter"></div> <div class="sbolv cds"></div> <div class="sbolv terminator"></div> </div> <div class="sbolv user-defined">(bridge)</div> </div> <div class="sbolv promoter"></div> <div class='combinatorial'> <div class="sbolv cds"></div> <div class="sbolv cds"></div> </div> <div class="sbolv terminator"></div> </div> ``` **Result:** <div class="sbol-visual centered small"> <div class="sbolv insulator"></div> <div class='combinatorial'> <div class="sbol-visual"> <div class="sbolv promoter"></div> <div class="sbolv cds"></div> <div class="sbolv terminator"></div> </div> <div class="sbol-visual"> <div class="sbolv promoter"></div> <div class="sbolv cds"></div> <div class="sbolv terminator"></div> </div> <div class="sbolv user-defined">(bridge)</div> </div> <div class="sbolv promoter"></div> <div class='combinatorial'> <div class="sbolv cds"></div> <div class="sbolv cds"></div> </div> <div class="sbolv terminator"></div> </div> And it is possible to nest combinatorial representations, to represent combinatorial libraries obtained from two or more other combinatorial libraries. **Code:** ``` <div class="sbol-visual centered small"> <div class='combinatorial'> <div class="sbol-visual"> <div class='combinatorial'> <div class="sbolv promoter">Pr1</div> <div class="sbolv promoter">Pr2</div> </div> <div class="sbolv cds"><em>acs</em></div> </div> <div class="sbol-visual"> <div class='combinatorial'> <div class="sbolv promoter">PrA</div> <div class="sbolv promoter">PrB</div> </div> <div class="sbolv cds"><em>bla</em></div> </div> </div> <div class="sbolv terminator"></div> </div> ``` **Result:** <div class="sbol-visual centered small"> <div class='combinatorial'> <div class="sbol-visual"> <div class='combinatorial'> <div class="sbolv promoter">Pr1</div> <div class="sbolv promoter">Pr2</div> </div> <div class="sbolv cds"><em>acs</em></div> </div> <div class="sbol-visual"> <div class='combinatorial'> <div class="sbolv promoter">PrA</div> <div class="sbolv promoter">PrB</div> </div> <div class="sbolv cds"><em>bla</em></div> </div> </div> <div class="sbolv terminator"></div> </div> ## Antisense symbols **Code:** ``` <div class="sbol-visual centered small"> <div class="sbolv antisense terminator"></div> <div class="sbolv antisense cds">cds 1</div> <div class="sbolv antisense promoter"></div> <div class="sbolv promoter"></div> <div class="sbolv cds">cds 2</div> </div> ``` **Result:** <div class="sbol-visual centered small"> <div class="sbolv antisense terminator"></div> <div class="sbolv antisense cds">cds 1</div> <div class="sbolv antisense promoter"></div> <div class="sbolv promoter"></div> <div class="sbolv cds">cds 2</div> </div> If you don't fancy the inverted text of the antisense symbol labels, place the label inside an `antisense` div: **Code:** ``` <div class="sbol-visual centered small"> <div class="sbolv antisense terminator"></div> <div class="sbolv antisense cds"> <div class="antisense">cds 1</div> </div> <div class="sbolv antisense promoter"></div> </div> ``` **Result:** <div class="sbol-visual centered small"> <div class="sbolv antisense terminator"></div> <div class="sbolv antisense cds"> <div class="antisense">cds 1</div> </div> <div class="sbolv antisense promoter"></div> </div> Also note that is is possible to invert a whole block at once making the block antisense: **Code:** ``` <div class="sbol-visual centered small antisense"> <div class="sbolv promoter"></div> <div class="sbolv cds"> <div class="antisense">cds</div> </div> <div class="sbolv terminator"></div> </div> ``` **Result:** <div class="sbol-visual centered small antisense"> <div class="sbolv promoter"></div> <div class="sbolv cds"> <div class="antisense">cds</div> </div> <div class="sbolv terminator"></div> </div> ## Inline symbols Inline symbols use a `span` and the `inline` class: ``` To make an expression unit you need a promoter (<span class="sbolv inline promoter"></span>) a CDS (<span class="sbolv inline cds"></span>) and a terminator (<span class="sbolv inline terminator"></span>). The final result looks like this: <span class="sbol-visual inline"> <span class="sbolv promoter"></span> <span class="sbolv cds"></span> <span class="sbolv terminator"></span> </span>. ``` To make an expression unit you need a promoter (<span class="sbolv inline promoter"></span>) a CDS (<span class="sbolv inline cds"></span>) and a terminator (<span class="sbolv inline terminator"></span>). The final result looks like this: <span class="sbol-visual inline"> <span class="sbolv promoter"></span> <span class="sbolv cds"></span> <span class="sbolv terminator"></span> </span>. ## Changing the color of the symbols For the moment there is no easy way to change the color of the symbols - apart from modifying the SVG files. However it is possible to invert all colors of the `sbolv` elements with the `inverted` class. The symbols and caption appear then white. ``` <div style="background:black; padding-top:20px;"> <div class="sbol-visual centered inverted"> <div class="sbolv promoter"> P1 </div> <div class="sbolv cds">bla</div> <div class="sbolv terminator">t2</div> </div> </div> ``` <div style="background:black; padding-top:20px;"> <div class="sbol-visual centered inverted"> <div class="sbolv promoter"> P1 </div> <div class="sbolv cds">bla</div> <div class="sbolv terminator">t2</div> </div> </div> ## Using SBOL Visual CSS in an email To send an email featuring SBOLv symbols, SBOL Visual CSS must be embedded into the HTML of the email (see [this Python script](examples/embed_SBOLv_in_html_email.py)). ## Generating a PNG It is possible to convert SBOLv images to PDF, PNG, etc. using any modern HTML renderer. For instance [this Python script](examples/render_png_with_wkHTMLtoImage.py) uses [wkHTMLtoPDF](http://wkhtmltopdf.org/) to generate PNGs from a list of elements. It implements the practical function `render_sbolv` which is used as follows: ``` render_sbolv( sbolv_elements=[ ("promoter", "P1"), ("cds", "my favourite gene with a super long name"), ("terminator", "Tr. 1"), ("promoter", "P2"), ("cds", "<em>acs</em>"), ("terminator", "Tr. 2") ], outfile="rendered_sbolv.png", css_stylesheets=["../dist/sbol-visual-standalone.css"] ) ``` <img src="examples/rendered_sbolv.png" class="centered-image"/> ## Reference Here are the different `sbolv` classes supported, in alphabetical order: <table> <tr> <th>`sbolv` class</th> <th>Symbol</th> </tr> <tr><td>`blunt-restriction-site`</td><td><div class="sbolv blunt-restriction-site"></div></td></tr> <tr><td>`cds`</td><td><div class="sbolv cds"></div></td></tr> <tr><td>`five-prime-overhang`</td><td><div class="sbolv five-prime-overhang"></div></td></tr> <tr><td>`five-prime-sticky-restriction-site`</td><td><div class="sbolv five-prime-sticky-restriction-site"></div></td></tr> <tr><td>`insulator`</td><td><div class="sbolv insulator"></div></td></tr> <tr><td>`primer-binding-site`</td><td><div class="sbolv primer-binding-site"></div></td></tr> <tr><td>`origin-of-replication`</td><td><div class="sbolv origin-of-replication"></div></td></tr> <tr><td>`operator`</td><td><div class="sbolv operator"></div></td></tr> <tr><td>`promoter`</td><td><div class="sbolv promoter"></div></td></tr> <tr><td>`protease-site`</td><td><div class="sbolv protease-site"></div></td></tr> <tr><td>`protein-stability-element`</td><td><div class="sbolv protein-stability-element"></div></td></tr> <tr><td>`restriction-enzyme-recognition-site`</td><td><div class="sbolv restriction-enzyme-recognition-site"></div></td></tr> <tr><td>`ribonuclease-site`</td><td><div class="sbolv ribonuclease-site"></div></td></tr> <tr><td>`ribosome-entry-site`</td><td><div class="sbolv ribosome-entry-site"></div></td></tr> <tr><td>`rna-stability-element`</td><td><div class="sbolv rna-stability-element"></div></td></tr> <tr><td>`signature`</td><td><div class="sbolv signature"></div></td></tr> <tr><td>`terminator`</td><td><div class="sbolv terminator"></div></td></tr> <tr><td>`three-prime-overhang`</td><td><div class="sbolv three-prime-overhang"></div></td></tr> <tr><td>`three-prime-sticky-restriction-site`</td><td><div class="sbolv three-prime-sticky-restriction-site"></div></td></tr> <tr><td>`user-defined`</td><td><div class="sbolv user-defined"></div></td></tr> </table> <a href="https://github.com/Edinburgh-Genome-Foundry/SBOL-Visual-CSS"> <img style="position: absolute; top: 0; right: 0; border: 0; z-index: 1000; margin: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"> </a>