Permalink
Browse files

Move the CSS to an external stylesheet.

`<style>` elements currently "leak" out of their `<svg>` parents and
apply to the whole document. Scoped stylesheets would fix this, but
they’re not there yet.

Having the stylesheet in its own file rather than in the middle of
JavaScript code makes it easier to tweak.

Also, repeating the same stylesheet over and over is silly.
  • Loading branch information...
1 parent de70336 commit 2456565307077d47a1102ea56ccc0cf536bd88ad @SimonSapin SimonSapin committed Nov 10, 2012
Showing with 27 additions and 6 deletions.
  1. +2 −4 README.md
  2. +2 −1 example.html
  3. +23 −0 railroad-diagrams.css
  4. +0 −1 railroad-diagrams.js
View
@@ -16,7 +16,7 @@ There are several railroad-diagram generators out there, but none of them had th
Details
-------
-To use the library, just include the js file, and then call the Diagram() function.
+To use the library, just include the js and css files, and then call the Diagram() function.
Its arguments are the components of the diagram (Diagram is a special form of Sequence).
Components are either leaves or containers.
@@ -46,15 +46,13 @@ Options
-------
There are a few options you can tweak, at the top of the file. Just tweak either until the diagram looks like what you want.
+You can also change the CSS file - feel free to tweak to your heart's content.
* VERTICAL_SEPARATION - sets the minimum amount of vertical separation between two items. Note that the stroke width isn't counted when computing the separation; this shouldn't be relevant unless you have a very small separation or very large stroke width.
* ARC_RADIUS - the radius of the arcs used in Choice and Repeat. This has a relatively large effect on the size of non-trivial diagrams. Both tight and loose values look good, depending on what you're going for.
* DIAGRAM_CLASS - the class set on the root `<svg>` element of each diagram, for use in the CSS stylesheet.
* TRANSLATE_HALF_PIXEL - the default stylesheet uses odd pixel lengths for 'stroke'. Due to rasterization artifacts, they look best when the item has been translated half a pixel in both directions. If you change the styling to use a stroke with even pixel lengths, you'll want to set this variable to `false`.
-You can also tweak the overall CSS for the file. Each diagrams's CSS is inserted as a `<style>` block at the end of `Diagram.toSVG` - feel free to tweak to your heart's content.
-(Note that, due to rasterization artifacts, odd pixel lengths for 'stroke' look best when the item has been translated half a pixel in both directions. If you change the styling to use a stroke with even pixel lengths, you'll want to remove the 'transform' attribute from the `<g>` element used in `Diagram.toSVG`.)
-
Caveats
-------
View
@@ -8,6 +8,7 @@
font-size: 1em;
}
</style>
+<link rel='stylesheet' href='railroad-diagrams.css'>
<script src='railroad-diagrams.js'></script>
<body>
<h1 id='ident'>IDENT</h1>
@@ -131,4 +132,4 @@ <h1 id='url'>URL</h1>
<h1>CDC</h1>
<script>
Diagram(Terminal("-->")).addTo();
-</script>
+</script>
View
@@ -0,0 +1,23 @@
+svg.railroad-diagram {
+ background-color: hsl(30,20%,95%);
+}
+svg.railroad-diagram path {
+ stroke-width: 3;
+ stroke: black;
+ fill: rgba(0,0,0,0);
+}
+svg.railroad-diagram text {
+ font: bold 14px monospace;
+ text-anchor: middle;
+}
+svg.railroad-diagram text.label {
+ text-anchor: start;
+}
+svg.railroad-diagram text.comment {
+ font: italic 12px monospace;
+}
+svg.railroad-diagram rect {
+ stroke-width: 3;
+ stroke: black;
+ fill: hsl(120,100%,90%);
+}
View
@@ -148,7 +148,6 @@ Diagram.prototype.format = function(paddingt, paddingr, paddingb, paddingl) {
}
this.attrs.width = this.width + paddingl + paddingr;
this.attrs.height = this.up + this.down + paddingt + paddingb;
- FakeSVG('style', {}, "svg.diagram{background-color:hsl(30,20%,95%);} svg.diagram path{stroke-width:3;stroke:black;fill:rgba(0,0,0,0);} svg.diagram text{font:bold 14px monospace;text-anchor:middle;} svg.diagram text.label{text-anchor:start;} svg.diagram text.comment{font:italic 12px monospace;} svg.diagram rect{stroke-width:3;stroke:black;fill:hsl(120,100%,90%);}").addTo(this);
g.addTo(this);
return this;
}

0 comments on commit 2456565

Please sign in to comment.