Skip to main content

Scaling and Text

An obvious question about the CDK rendering code is : "Why not scale text with AffineTransform?" So, of course this is possible, and works quite nicely - but there is a cost.

One of the goals of the rendering code is to start from models of any scale, and render them as consistently sized diagrams on screen. By 'scale' here I simply mean the average distance between points. So the CDK layout code might use a distance of (say) 1 between two carbon atoms, but a file with a structure made in some other chemical editor might have an average atom-atom distance of 100. These are unitless values, by the way.

Now, what we could have done was transform the coordinates in the model to a consistent scale, then rendered these transformed coordinates. What we chose to do, however, was to calculate a single transform for the model and draw with this. If you use this transform to scale the graphics object before drawing you get this for a model scale of 10:


and this for a model scale of 100 (in other words a 'bond length' of 100):

the images are at slightly different zooms, but the point is clear I think. The choice is between scaling fonts independently, and altering the model directly.

Comments

Anonymous said…
Why is the font size smaller in the second example? It seems it is not scaled?
gilleain said…
This was the whole point! :)

The font size is smaller because the scale is smaller. The world distance between A-B is more in the second one, so a smaller scale is needed to put it on screen.

Say the A-B distance is 10 or 100, then the scale necessary to draw a line on screen of 300px is either 30 or 3, respectively. The font size is scaled by the same amount.
R Stephan said…
Well, you point to one thing in this post. There are many other factors and fundamental limitations to include:

1. how is the font specified, binary or vector? Binary fonts cannot be scaled without loss of quality
2. does the user have preferences? some like big atom symbols some not. Either way, they should have a choice
3. can the description of the molecule be converted to a vector description? this is a must nowadays, also the conversion must be identical to what's onscreen. It's so annoying to have the SVG output of a nice formula change the font used and fine-positioning lost

what follows is that normal bitmapped fonts cannot be used. also, as you say, no absolute measure of font size will suffice because what should be constant within the molecule is the ratio font size/bond length. there is no way to accomplish this except with a vector font and an independent measure like height of A divided by the distance of C-C in ethane. If this metric is set to a reasonable value, this value can be changed then by the user.

what do you say?

Ralf Stephan
(written with JCP in mind)
gilleain said…
From a user point of view, it's definitely an important goal to be able to specify exactly the font size, and to have that exported properly.

The difficulty - as always - is implementing it! Since I made this post, I've learned a few things about drawing fonts in chemical reactions, and it is possible to have nicely scaled fonts - but I did end up using AffineTransforms in combination with FontMetrics, and various other tricks.

One important point that was brought up by Egon was the need for scaling the font as a proportion (like 50%, 120%, etc) rather than some magic number. I agree that should be part of a high-level API, but in my experience it is usually necessary to say "12pt" or other exact measures.

Basically, I will have to take another look at the font management in the CDK. It looks like you've been doing some great work reviving the project (I'm following on github) so perhaps this is a good time to push through all the CDK-graphics changes.

gilleain

Popular posts from this blog

Adamantane, Diamantane, Twistane

After cubane, the thought occurred to look at other regular hydrocarbons. If only there was some sort of classification of chemicals that I could use look up similar structures. Oh wate, there is . Anyway, adamantane is not as regular as cubane, but it is highly symmetrical, looking like three cyclohexanes fused together. The vertices fall into two different types when colored by signature: The carbons with three carbon neighbours (degree-3, in the simple graph) have signature (a) and the degree-2 carbons have signature (b). Atoms of one type are only connected to atoms of another - the graph is bipartite . Adamantane connects together to form diamondoids (or, rather, this class have adamantane as a repeating subunit). One such is diamantane , which is no longer bipartite when colored by signature: It has three classes of vertex in the simple graph (a and b), as the set with degree-3 has been split in two. The tree for signature (c) is not shown. The graph is still bipartite accordin

1,2-dichlorocyclopropane and a spiran

As I am reading a book called "Symmetry in Chemistry" (H. H. Jaffé and M. Orchin) I thought I would try out a couple of examples that they use. One is 1,2-dichlorocylopropane : which is, apparently, dissymmetric because it has a symmetry element (a C2 axis) but is optically active. Incidentally, wedges can look horrible in small structures - this is why: The box around the hydrogen is shaded in grey, to show the effect of overlap. A possible fix might be to shorten the wedge, but sadly this would require working out the bounds of the text when calculating the wedge, which has to be done at render time. Oh well. Another interesting example is this 'spiran', which I can't find on ChEBI or ChemSpider: Image again courtesy of JChempaint . I guess the problem marker (the red line) on the N suggests that it is not a real compound? In any case, some simple code to determine potential chiral centres (using signatures) finds 2 in the cyclopropane structure, and 4 in the

General Graph Layout : Putting the Parts Together

An essential tool for graph generation is surely the ability to draw graphs. There are, of course, many methods for doing so along with many implementations of them. This post describes one more (or perhaps an existing method - I haven't checked). Firstly, lets divide a graph up into two parts; a) the blocks, also known as ' biconnected components ', and b) trees connecting those blocks. This is illustrated in the following set of examples on 6 vertices: Trees are circled in green, and blocks in red; the vertices in the overlap between two circles are articulation points. Since all trees are planar, a graph need only have planar blocks to be planar overall. The layout then just needs to do a tree layout  on the tree bits and some other layout on the embedding of the blocks. One slight wrinkle is shown by the last example in the image above. There are three parts - two blocks and a tree - just like the one to its left, but sharing a single articulation point. I had