Vertical alignment Glyph in PNG (in a HTML page)

[linediconsine]

Hi! I would like to vertical-align SBOL glyph in my HTML but I end up seeing some misalignments (see the line from each elements is broken (screeshot) )

Here I draw how I would like the connection line to be:

Is there a best practice to do this?

Thanks for any help!

[jakebeal]

The horizontal lines on the glyphs specifications are the suggested placements for the nucleic acid backbone in order to vertically align the glyphs. Please also note that the bounding boxes should not normally be shown with the glyphs.

[linediconsine]

Hi Jake.

Let me share some background:

I was hoping to archive these without image pre-processing, but directly in the HTML from SBOL API

Using something like:

<div class="sbloImage">
      <img src="https://vows.sbolstandard.org/glyph/SO:0000031/png" class="SO_0000031">
      <img  src="https://vows.sbolstandard.org/glyph/SO:0001953/png" class="SO_0001953">
      <img src="https://vows.sbolstandard.org/glyph/SO:0001975/png" class="SO_0001975">
    </div>

[edit: Here I created a small demo(https://jsfiddle.net/marcooooo/w0ona2u5/24/ ]

In the web browser, I cant remove bounding boxes, but I can prepare the right alignment ( adding a margin per each the nucleic acid backbone element image )

Thanks for any thought or suggestion on this

Marco

[jakebeal]

I'm afraid that your demo link is sending me to a signup page.

If you don't want to do any image pre-processing, perhaps instead you could use the font? https://github.com/SynBioDex/SBOL-visual/tree/master/font

It's a little bit out of date and doesn't have all of the most recent symbols, but it will allow you to place symbols on a backbone without worrying about alignment.

[linediconsine]

Sorry for the link, let me try with JSfiddle https://jsfiddle.net/marcooooo/w0ona2u5/24/

About the font solution, I like this idea a lot. My only missing point is how to map SO to the font character.

Just as example I should know that SO:0000031 is the char '%' ( this is not correct but please bear with me to understand my problem), Is is there a map or reference that I miss?

Thanks

[jakebeal]

The font uses values in one of the "user defined" unicode ranges, rather than overwriting standard keyboard characters. These are ordered to match the glyphs where possible, but the mapping is not one-to-one, since the font has variants (e.g., 5' overhang and 3' overhang) that are not separated in the glyphs. All of these distinctions are made in the ontology, but the font is less well maintained than the rest of SBOL Visual, and hasn't been incorporated into the ontology; I've just opened up an issue for that update (#98), but, well, it's not there yet.

For now, then, to make that mapping, you need to write down the mapping between terms and glyphs yourself.

That said, when you do so, if you're able to do it with the ontology, it would be great if you contribute it back as a pull request to fix #98!

[linediconsine]

Hi Jake, for now, I created this repl.it that should show code --> image and an example on how to integrate fonts in a webpage I hope it helps

https://repl.it/@linediconsine/SbolFonts

Please confirm you can access this time to this repl

[jakebeal]

I can access and see a catalog of symbols; is that what's intended?

[linediconsine]

Hi Jake.

Yes, for fonts I created an HTML page that loads the font (on this GitHub) and shows the Unicode value for each symbol.

Thanks

[linediconsine]

Hopefully, I would try to help on #98 but I think we can close down this issue.

This was a precious feedback!

Thanks