<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="/stylesheets/rss.css"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/">
  <channel>
    <title>Depth-First: Tag stylesheets</title>
    <link>http://depth-first.com/articles/tag/stylesheets</link>
    <language>en-us</language>
    <ttl>40</ttl>
    <description>Walking the Web of Chemical Informatics</description>
    <item>
      <title>Making Your 2D Structures Look Good: Firefly, Styles and Stylesheets</title>
      <description>&lt;p&gt;Chemists can be &lt;a href="http://depth-first.com/articles/2007/07/11/waldorf-salad"&gt;very discerning&lt;/a&gt; when it comes to chemical structure aesthetics. This is not surprising, given the &lt;a href="http://depth-first.com/articles/2007/03/30/the-aesthetics-of-chemical-structure-diagrams"&gt;central role&lt;/a&gt; played by 2D chemical structures in the day-to-day work of many chemists. For example, consider the &lt;a href="http://en.wikipedia.org/wiki/Wikipedia_talk:WikiProject_Chemistry/Structure_drawing_workgroup/Archive_Apr_2007"&gt;Wikipedia Chemistry/Structure drawing workgroup's ongoing discussion&lt;/a&gt; about achieving a consistent look for chemical structures on the online encyclopedia.&lt;/p&gt;

&lt;p&gt;Several articles have discussed &lt;a href="http://depth-first.com/articles/tag/firefly"&gt;Firefly&lt;/a&gt;, a 2D chemical structure editor specifically designed for the Web. With major work on the rendering engine and structure manipulation interface complete, recent efforts have turned toward exposing drawing settings through a graphical user interface. Here I'll provide some screenshots of an interface prototype along with sample structures. I'll also briefly discuss the larger question of making 2D structure drawing styles portable.&lt;/p&gt;

&lt;p&gt;Drawing styles are edited through a tabbed dialog containing a live preview window that uses the current structure or a default structure if none is available. The dialog is resizable, enabling users to immediately see the effects of changes on structures of varying sizes. Although this dialog could be bundled and deployed with the editor, its large footprint makes it more appropriate for use as an optional feature or as a standalone configuration tool in a Web application.&lt;/p&gt;

&lt;p&gt;&lt;center&gt;&lt;img src="http://depth-first.com/demo/20070713/dialog.png"&gt;&lt;/img&gt;&lt;/center&gt;&lt;/p&gt;

&lt;p&gt;Changes can be rolled back entirely ("Reset"), canceled ("Cancel"), or accepted ("OK").&lt;/p&gt;

&lt;p&gt;Let's say we'd like to apply a black background with white bonds, as used in some Power Point presentations:&lt;/p&gt;

&lt;p&gt;&lt;center&gt;&lt;img src="http://depth-first.com/demo/20070713/default.png"&gt;&lt;/img&gt;&amp;nbsp;&amp;nbsp;&lt;img src="http://depth-first.com/demo/20070713/black_background.png"&gt;&lt;/img&gt;&lt;/center&gt;&lt;/p&gt;

&lt;p&gt;After applying this change, we decide that we'd rather not use atom coloring:&lt;/p&gt;

&lt;p&gt;&lt;center&gt;&lt;img src="http://depth-first.com/demo/20070713/black_background.png"&gt;&lt;/img&gt;&amp;nbsp;&amp;nbsp;&lt;img src="http://depth-first.com/demo/20070713/no_colors.png"&gt;&lt;/img&gt;&lt;/center&gt;&lt;/p&gt;

&lt;p&gt;After looking at this structure for a few seconds, we decide that narrower stereo bonds are needed:&lt;/p&gt;

&lt;p&gt;&lt;center&gt;&lt;img src="http://depth-first.com/demo/20070713/no_colors.png"&gt;&lt;/img&gt;&amp;nbsp;&amp;nbsp;&lt;img src="http://depth-first.com/demo/20070713/thin_stereo.png"&gt;&lt;/img&gt;&lt;/center&gt;&lt;/p&gt;

&lt;p&gt;After some experimentation, we find a more appropriate non-stereo bond width and double bond offset:&lt;/p&gt;

&lt;p&gt;&lt;center&gt;&lt;img src="http://depth-first.com/demo/20070713/thin_stereo.png"&gt;&lt;/img&gt;&amp;nbsp;&amp;nbsp;&lt;img src="http://depth-first.com/demo/20070713/thin_lines.png"&gt;&lt;/img&gt;&lt;/center&gt;&lt;/p&gt;

&lt;p&gt;What about a Serif font? No, I don't think so:&lt;/p&gt;

&lt;p&gt;&lt;center&gt;&lt;img src="http://depth-first.com/demo/20070713/thin_lines.png"&gt;&lt;/img&gt;&amp;nbsp;&amp;nbsp;&lt;img src="http://depth-first.com/demo/20070713/serif_font.png"&gt;&lt;/img&gt;&lt;/center&gt;&lt;/p&gt;

&lt;p&gt;But we could certainly reduce the size of the atom labels:&lt;/p&gt;

&lt;p&gt;&lt;center&gt;&lt;img src="http://depth-first.com/demo/20070713/thin_lines.png"&gt;&lt;/img&gt;&amp;nbsp;&amp;nbsp;&lt;img src="http://depth-first.com/demo/20070713/small_labels.png"&gt;&lt;/img&gt;&lt;/center&gt;&lt;/p&gt;

&lt;p&gt;On second thought, the original atom sizes were fine, although changing font may require us to reconsider the atom label heights:&lt;/p&gt;

&lt;p&gt;&lt;center&gt;&lt;img src="http://depth-first.com/demo/20070713/default.png"&gt;&lt;/img&gt;&amp;nbsp;&amp;nbsp;&lt;img src="http://depth-first.com/demo/20070713/thin_lines.png"&gt;&lt;/img&gt;&lt;/center&gt;&lt;/p&gt;

&lt;p&gt;As you can see, the possibilities for customization are nearly endless. In practice, however, most chemists will adopt only two structure drawing styles that they re-use as needed: one for reports and manuscripts; and one for presentations. It will be interesting to see whether a third style makes it's way into the standard repertoire: Web.&lt;/p&gt;

&lt;p&gt;Each chemist will want a way to save their styles, possibly share them, and easily apply them. Although a few systems for doing so are feasible, the most practical approach would be a &lt;a href="http://en.wikipedia.org/wiki/Stylesheet_language"&gt;stylesheet&lt;/a&gt;. Applying a stylesheet to any structure diagram would change its appearance, offering a simple mechanism to achieve a consistent look across documents.&lt;/p&gt;

&lt;p&gt;Developing a universal (cross-editor) stylesheet system would be no easy task, given the wildly divergent capabilities of 2D structure rendering software. Despite the technical difficulty, the payoff for users is obvious.&lt;/p&gt;</description>
      <pubDate>Fri, 13 Jul 2007 11:19:00 +0000</pubDate>
      <guid isPermaLink="false">urn:uuid:7146dc3e-d044-4776-ac04-c5f87c8eeed5</guid>
      <author>Rich Apodaca</author>
      <link>http://depth-first.com/articles/2007/07/13/making-your-2d-structures-look-good-firefly-styles-and-stylesheets</link>
      <category>Graphics</category>
      <category>firefly</category>
      <category>editor</category>
      <category>2d</category>
      <category>screenshots</category>
      <category>stylesheets</category>
    </item>
  </channel>
</rss>
