SBOL Visual CSS

SBOL Visual CSS is a pure-CSS library to easily display schematic DNA sequences in the Visual SBOL standard:

lac

terminator

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 self-contained CSS file (20kb) and is therefore fit for embedding into HTML emails.

Its features include inline SBOL (for instance ) and combinatorial designs:

(bridge)

Some examples of SBOL Visual CSS in action

Contribute !

SBOL-visual CSS was originally written at the Edinburgh Genome Foundry by Zulko. The code is released on Github under the MIT Licence (Copyright Edinburgh Genome Foundry), everyone is welcome to contribute.

Basic usage

Link sbol-visual-standalone.css 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:

rbs 1

acs

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:

Gene crp

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:

bla

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:

rbs 1

some longer gene name

If the caption is longer than sbolv.max-width (default is 200px) the caption will be wrapped:

rbs 1

some really very long caption that you could have made shorter

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):

rbs 1

acs

rbs 1

acs

rbs 1

acs

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:

bla

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:**

gfp-mut2

gfp-mut3

yfp

term1

term2

insulator

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:

(bridge)

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:

Pr1

Pr2

acs

PrA

PrB

bla

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:

cds 1

cds 2

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:

cds 1

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:

cds

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 () a CDS () and a terminator ().

The final result looks like this: .

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>

bla

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).

Generating a PNG

It is possible to convert SBOLv images to PDF, PNG, etc. using any modern HTML renderer. For instance this Python script uses wkHTMLtoPDF 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"]
)

Reference

Here are the different sbolv classes supported, in alphabetical order:

`sbolv` class	Symbol
`blunt-restriction-site`
`cds`
`five-prime-overhang`
`five-prime-sticky-restriction-site`
`insulator`
`primer-binding-site`
`origin-of-replication`
`operator`
`promoter`
`protease-site`
`protein-stability-element`
`restriction-enzyme-recognition-site`
`ribonuclease-site`
`ribosome-entry-site`
`rna-stability-element`
`signature`
`terminator`
`three-prime-overhang`
`three-prime-sticky-restriction-site`
`user-defined`