The protein alphabet is a series of protein structure views that look like letters compiled by Mark Howarth. This can be found here.
This css/js library makes use of it to make dropcaps. Here is a demo.
Option A: CDN
Add the line:
This will fetch it magically from the internet...
Option B: serverside
Alphabet_ray folder and
protein_dropcaps.js in your website directory and add
protein_dropcaps.js script is written lazily so uses a relative path that assumes
Alphabet_ray is in the root directory. Therefore if you add the pngs to somewhere else change the path accordingly within the js file.
Option C: full manual
If you are on Google's blogger, you cannot have
<p> elements and JS script cannot be loaded from outside, or writing a HTML email, you most likely want to make a dropcap manually... in which case add an element like this (with the two As replaced with your letter:
<span style="float: left; font-size: .1px; background: url('https://cdn.rawgit.com/matteoferla/protein_alphabet_dropcaps/master/Alphabet_ray/A.png') no-repeat; background-size: 40px;padding: 40px 0 0 40px; margin-right: 9px;">A</span>
where to expect dropcaps to automatically appear
In the code, the script will automatically make a dropcap at the first letter of a paragraph element (
<p>), either the first in a page or of a paragraph after a level one header (
NB. I have not coded it to check whether there is extra markup inside the html of the p-element.
p:first-child:first-letter CSS pseudoelement is really cool, but when it comes to graphical dropcaps it does not discern between the letters.
Therefore, here a JS script finds the first letter and alters it (e.g.
<span class=drop-X>X) and loads only the needed figure.
The JS can be circumvented by doing it manually and adding a span with the class drop-A or whatever letter and using the whole of the
dropcaps.css style sheet or only the required parts.
Soon SVG fonts, aka. color fonts, will hit the web fully. This is great and it means that the p:first-child:first-letter pseudoelement could work with a custom SVG font of protein alphabet. But the pretty major catch is that a PyMol view cannot be exported as SVG and illustrator does not do a clean job of vectorising the images.
The figures were generated with a series of commands make with the
make_png_script.py python3 script.
I think a bunch of protein complexes throbbers (spinning things, like circle of balls or marble, that appear when you wait) would be fun... Similarly to this: github.com/matteoferla/Spinning-Python.