Centering
Add centered to the main container when you want wrapped lines to stay centered. Beware that all lines will be centered, even if they contain only a single symbol (e.g. at the end of a line wrap).
<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
Symbols expand to fit their captions. Long text wraps automatically, and full constructs wrap onto several lines when needed.
<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>Sizing
The symbol size is driven by the height of each sbolv block. A common pattern is to add a custom modifier class to the container.
.sbol-visual.small .sbolv {
height: 80px;
min-width: 35px;
}Inline symbols
Use inline layouts inside prose with span nodes. You can apply inline either to each symbol, or once on a full sbol-visual container.
An expression unit (<span class="sbol-visual inline">
<span class="sbolv promoter"></span>
<span class="sbolv cds"></span>
<span class="sbolv terminator"></span>
</span>) includes
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>).
An expression unit ( ) includes a promoter () , a CDS () and a terminator ().
Inverted theme
For dark backgrounds, add the inverted class to a container or an individual symbol.
<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>