├── README.md
├── ch01-text-theory-files
    ├── Batillaria_multiformis_01_for_sale-enhance.JPG
    ├── Batillaria_multiformis_01_for_sale.JPG
    ├── CourierA.PNG
    ├── CourierA
    │   ├── BMP-13px.PNG
    │   ├── BMP-17px.PNG
    │   ├── CourierA.xcf
    │   ├── TTF-fitted-13px.PNG
    │   ├── TTF-fitted-17px.PNG
    │   ├── TTF-fitted-28px-anti-aliased.PNG
    │   └── TTF.PNG
    ├── File-Batillaria multiformis 01 for sale.JPG - Wikimedia Commons.url
    ├── Jazz & Coffee Masako #7 - Flickr - Photo Sharing!.url
    ├── Sign - Flickr - Photo Sharing!.url
    ├── char-vs-glyph.PNG
    ├── char-vs-glyph.hires.PNG
    ├── char-vs-glyph.svg
    ├── font-families.PNG
    ├── font-families.hires.PNG
    ├── font-families.svg
    ├── index.html
    ├── japanese-snails.JPG
    ├── script-vs-lang.PNG
    ├── script-vs-lang.hires.PNG
    └── script-vs-lang.svg
├── ch02-text-basics-files
    ├── flower-heading.PNG
    ├── flower-heading.svg
    ├── flower-labels-accessible.PNG
    ├── flower-labels-accessible.svg
    ├── flower-labels.svg
    ├── flower.PNG
    ├── flower.svg
    ├── font-size.PNG
    ├── font-size.html
    ├── index.html
    ├── text-css-longhand.svg
    ├── text-css.svg
    ├── text-filter.PNG
    ├── text-filter.svg
    ├── text-labels.PNG
    ├── text-labels.svg
    ├── text-simple.PNG
    ├── text-simple.svg
    ├── text-size.PNG
    ├── text-size.svg
    ├── text-styled.PNG
    ├── text-styled.svg
    └── text-transform.svg
├── ch03-fill-stroke-files
    ├── currentColor-icon-oops.PNG
    ├── currentColor-icon-oops.html
    ├── currentColor-icon.PNG
    ├── currentColor-icon.html
    ├── gradient-headings-tspan.PNG
    ├── gradient-headings-tspan.html
    ├── gradient-headings.PNG
    ├── gradient-headings.html
    ├── gradient-text.PNG
    ├── gradient-text.svg
    ├── index.html
    ├── stroked-headings.PNG
    ├── stroked-headings.html
    ├── tspan-formatting.PNG
    └── tspan-formatting.svg
├── ch04-position-tspan-files
    ├── index.html
    ├── little-crocodile.PNG
    ├── little-crocodile.svg
    ├── mouses-tale-re-position.svg
    ├── mouses-tale.PNG
    ├── mouses-tale.svg
    ├── tspan-position-absolute.PNG
    ├── tspan-position-absolute.svg
    ├── tspan-position-percentage-bottom.svg
    ├── tspan-position-percentage-compare.PNG
    ├── tspan-position-percentage-compare.html
    ├── tspan-position-percentage-offset.svg
    └── tspan-position-relative.svg
├── ch05-position-char-files
    ├── bam-boom.FF.PNG
    ├── bam-boom.IE.PNG
    ├── bam-boom.gradients.PNG
    ├── bam-boom.gradients.xcf
    ├── bam-boom.svg
    ├── character-position-relative.svg
    ├── character-position.PNG
    ├── character-position.svg
    ├── character-rotation.PNG
    ├── character-rotation.svg
    ├── character-tspan-position.PNG
    ├── character-tspan-position.svg
    └── index.html
├── ch06-text-anchor-files
    ├── index.html
    ├── text-anchor.PNG
    ├── text-anchor.svg
    ├── text-chunk-anchor-IE-test.svg
    ├── text-chunk-anchor-dx.svg
    ├── text-chunk-anchor-fix-whitespace.PNG
    ├── text-chunk-anchor-fix-whitespace.svg
    ├── text-chunk-anchor.PNG
    ├── text-chunk-anchor.svg
    └── whitespace-test.svg
├── ch07-rtl-vertical-files
    ├── index.html
    ├── text-direction-2column.html
    ├── text-direction.PNG
    ├── text-direction.html
    ├── vertical-modes-fallback.Chrome.PNG
    ├── vertical-modes-fallback.PNG
    ├── vertical-modes-fallback.svg
    ├── vertical-modes-future.svg
    ├── vertical-modes.PNG
    └── vertical-modes.svg
├── ch08-baselines-files
    ├── baseline-shift-fallback.PNG
    ├── baseline-shift-fallback.svg
    ├── baseline-shift.PNG
    ├── baseline-shift.svg
    ├── baselines.PNG
    ├── baselines.svg
    └── index.html
├── ch09-textPath-files
    ├── circle-text-absolute.PNG
    ├── circle-text-absolute.svg
    ├── circle-textPath-arabic-centered.PNG
    ├── circle-textPath-arabic-centered.svg
    ├── circle-textPath-arabic-centered.zoom.PNG
    ├── circle-textPath-arabic-flat.PNG
    ├── circle-textPath-arabic-flat.svg
    ├── circle-textPath-arabic-styled.svg
    ├── circle-textPath-arabic.svg
    ├── circle-textPath-centered-xy.svg
    ├── circle-textPath-centered.PNG
    ├── circle-textPath-centered.svg
    ├── circle-textPath-dy.PNG
    ├── circle-textPath-dy.svg
    ├── circle-textPath-hebrew-centered.svg
    ├── circle-textPath-hebrew-end.svg
    ├── circle-textPath-hebrew.PNG
    ├── circle-textPath-hebrew.svg
    ├── circle-textPath-multiline.PNG
    ├── circle-textPath-multiline.svg
    ├── circle-textPath-rotated.svg
    ├── circle-textPath-styled.PNG
    ├── circle-textPath-styled.svg
    ├── circle-textPath-xy.svg
    ├── circle-textPath.PNG
    ├── circle-textPath.svg
    ├── index.html
    ├── textPath-startOffset.svg
    └── walrus-carpenter.svg
├── ch10-fonts-files
    ├── bam-boom-comparison.Arial.PNG
    ├── bam-boom-comparison.Cooper.PNG
    ├── bam-boom-comparison.GillSans.PNG
    ├── bam-boom-comparison.Goudy.PNG
    ├── bam-boom-comparison.Impact.PNG
    ├── bam-boom-comparison.PNG
    ├── bam-boom-comparison.Showcard.PNG
    ├── bam-boom-comparison.hi-res.PNG
    ├── bam-boom-comparison.xcf
    ├── bam-boom-postscript-names.svg
    ├── generic-fonts-cursive.PNG
    ├── generic-fonts-cursive.svg
    ├── generic-fonts-fantasy.PNG
    ├── generic-fonts-fantasy.svg
    ├── generic-fonts-monospace.PNG
    ├── generic-fonts-monospace.svg
    ├── generic-fonts-sans-serif.PNG
    ├── generic-fonts-sans-serif.svg
    ├── generic-fonts-serif.PNG
    ├── generic-fonts-serif.svg
    ├── index.html
    ├── penpal-fonts.PNG
    └── penpal-fonts.svg
├── ch11-size-adjust-files
    ├── index.html
    ├── lengthAdjust.PNG
    ├── lengthAdjust.html
    ├── penpal-font-adjust-comparison.PNG
    ├── penpal-font-adjust-comparison.xcf
    ├── penpal-font-adjust-fallback-no-adjust.PNG
    ├── penpal-font-adjust-fallback.PNG
    ├── penpal-font-adjust-no-adjust.PNG
    ├── penpal-font-adjust.PNG
    ├── penpal-font-adjust.svg
    ├── penpal-fonts-fallback-comparison.PNG
    ├── penpal-fonts-fallback-comparison.xcf
    └── penpal-fonts-fallback.PNG
├── ch12-foreignObject-files
    ├── foreignObject-labels-hover-effects.PNG
    ├── foreignObject-labels-hover-effects.svg
    ├── foreignObject-labels.PNG
    ├── foreignObject-labels.svg
    └── index.html
├── index.css
└── index.html


/README.md:
--------------------------------------------------------------------------------
 1 | SVG Text Layout
 2 | ==========
 3 | 
 4 | <img style="float:left; display: block;" src="http://akamaicovers.oreilly.com/images/0636920043072/cat.gif" />
 5 | This is the example code that accompanies _SVG Text Layout_ by Amelia Bellamy-Royds and Kurt Cagle. 
 6 | 
 7 | To view the files on the web, start with [the table of contents on GitHub Pages](http://oreillymedia.github.io/SVG_Text_Layout/).
 8 | 
 9 | To download example code, click the **Download Zip** button in the sidebar.
10 | 
11 | For more about the book, or to buy a copy, visit [the catalog page on oreilly.com](http://shop.oreilly.com/product/0636920043072.do).
12 | 
13 | See an error, here or in the book? [Report it on our errata page](http://oreilly.com/catalog/errata.csp?isbn=0636920043072).  For errors with the examples, you can also create an issue on the repository, or fork and send us a pull request.
14 | 


--------------------------------------------------------------------------------
/ch01-text-theory-files/Batillaria_multiformis_01_for_sale-enhance.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch01-text-theory-files/Batillaria_multiformis_01_for_sale-enhance.JPG


--------------------------------------------------------------------------------
/ch01-text-theory-files/Batillaria_multiformis_01_for_sale.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch01-text-theory-files/Batillaria_multiformis_01_for_sale.JPG


--------------------------------------------------------------------------------
/ch01-text-theory-files/CourierA.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch01-text-theory-files/CourierA.PNG


--------------------------------------------------------------------------------
/ch01-text-theory-files/CourierA/BMP-13px.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch01-text-theory-files/CourierA/BMP-13px.PNG


--------------------------------------------------------------------------------
/ch01-text-theory-files/CourierA/BMP-17px.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch01-text-theory-files/CourierA/BMP-17px.PNG


--------------------------------------------------------------------------------
/ch01-text-theory-files/CourierA/CourierA.xcf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch01-text-theory-files/CourierA/CourierA.xcf


--------------------------------------------------------------------------------
/ch01-text-theory-files/CourierA/TTF-fitted-13px.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch01-text-theory-files/CourierA/TTF-fitted-13px.PNG


--------------------------------------------------------------------------------
/ch01-text-theory-files/CourierA/TTF-fitted-17px.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch01-text-theory-files/CourierA/TTF-fitted-17px.PNG


--------------------------------------------------------------------------------
/ch01-text-theory-files/CourierA/TTF-fitted-28px-anti-aliased.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch01-text-theory-files/CourierA/TTF-fitted-28px-anti-aliased.PNG


--------------------------------------------------------------------------------
/ch01-text-theory-files/CourierA/TTF.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch01-text-theory-files/CourierA/TTF.PNG


--------------------------------------------------------------------------------
/ch01-text-theory-files/File-Batillaria multiformis 01 for sale.JPG - Wikimedia Commons.url:
--------------------------------------------------------------------------------
1 | [InternetShortcut]
2 | URL=https://commons.wikimedia.org/wiki/File:Batillaria_multiformis_01_for_sale.JPG
3 | 


--------------------------------------------------------------------------------
/ch01-text-theory-files/Jazz & Coffee Masako #7 - Flickr - Photo Sharing!.url:
--------------------------------------------------------------------------------
1 | [InternetShortcut]
2 | URL=https://www.flickr.com/photos/guwashi999/3950127409/
3 | 


--------------------------------------------------------------------------------
/ch01-text-theory-files/Sign - Flickr - Photo Sharing!.url:
--------------------------------------------------------------------------------
1 | [InternetShortcut]
2 | URL=https://www.flickr.com/photos/61904084@N00/2586190801
3 | 


--------------------------------------------------------------------------------
/ch01-text-theory-files/char-vs-glyph.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch01-text-theory-files/char-vs-glyph.PNG


--------------------------------------------------------------------------------
/ch01-text-theory-files/char-vs-glyph.hires.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch01-text-theory-files/char-vs-glyph.hires.PNG


--------------------------------------------------------------------------------
/ch01-text-theory-files/char-vs-glyph.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      width="400" height="160" viewBox="0 0 400 160"
 4 |      xml:lang="en">
 5 |     <title>Characters versus Glyphs</title>
 6 |     <style type="text/css">
 7 |         svg {
 8 |             font-size: 34px;
 9 |             font-family: Georgia, Times, serif;
10 |             background: lightYellow;
11 |             border: thin solid gold;
12 |             margin: 10px;
13 |         }
14 |         text {
15 |             filter: url(#shine);
16 |             font-weight: bold;
17 |             stroke-width: 0.5px;
18 |         }
19 |         text:nth-of-type(1){
20 |             stroke: mediumBlue;
21 |             fill:   royalblue;
22 |         }
23 |         text:nth-of-type(2){
24 |             stroke: darkRed;
25 |             fill:   crimson;
26 |         }
27 |         text:nth-of-type(3){
28 |             stroke: darkGreen;
29 |             fill:   green;
30 |         }
31 |         text:nth-of-type(4){
32 |             stroke: purple;
33 |             fill: darkorchid;
34 |         }
35 |     </style>
36 |     <defs>
37 |         <filter id="shine">
38 |             <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
39 |             <feColorMatrix values="1.5  0   0  0.5 0
40 |                                     0  1.5  0  0.5 0
41 |                                     0   0  1.5 0.5 0
42 |                                     0   0   0   1  -0.5" />
43 |             <feOffset dx="-2.5" dy="-1.5" />
44 |             <feComponentTransfer result="highlight">
45 |                 <feFuncA type="linear" amplitude="2" />
46 |             </feComponentTransfer>
47 |             <feComposite in="blur" in2="highlight" operator="arithmetic" 
48 |                        k1="0" k2="1" k3="1" k4="0" result="lit"/>
49 |             <feComposite in2="SourceAlpha" operator="in"/>
50 |             <feComposite in2="SourceGraphic" operator="over" result="clipped"/>
51 |         </filter>
52 |     </defs>
53 |      
54 |     <text x="10" y="30" font-family="Times New Roman"
55 |           >Characters are not Glyphs</text>
56 |     <text x="10" y="70" font-family="Morado Felt"
57 |           >Characters are not Glyphs</text>
58 |     <text x="10" y="110" font-family="Palace Script MT"
59 |           >Characters are not Glyphs</text>
60 |     <text x="10" y="150" font-family="Old English Text MT"
61 |           >Characters are not Glyphs</text>
62 | </svg>


--------------------------------------------------------------------------------
/ch01-text-theory-files/font-families.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch01-text-theory-files/font-families.PNG


--------------------------------------------------------------------------------
/ch01-text-theory-files/font-families.hires.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch01-text-theory-files/font-families.hires.PNG


--------------------------------------------------------------------------------
/ch01-text-theory-files/font-families.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      width="400" height="450" viewBox="0 0 400 450">
 4 |     <title xml:lang="en">Font Faces and Families</title>
 5 |     <style type="text/css">
 6 |         svg {
 7 |             font-size: 56px;
 8 |             background: #123;
 9 |             border: thin solid hsla(0,0%,100%,0.3);
10 |             margin: 11px;
11 |         }
12 |         text {
13 |             filter: url(#shine);
14 |             stroke-width: 0.5px;
15 |         }
16 |         
17 |         .face:nth-of-type(2n){
18 |             font-weight: bold;
19 |         }
20 |         .face:nth-of-type(n+3){
21 |             font-style: italic;
22 |         }
23 |         
24 |         .family:nth-of-type(1){
25 |             fill: mediumBlue;
26 |             stroke: mediumBlue;
27 |             fill:   royalblue;
28 |             font-family: Angsana New, AngsanaNew, "Windows 95 - Angsana New",
29 |                          AngsanaUPC, Angsana, 
30 |                          cursive;
31 |         }
32 |         .family:nth-of-type(2){
33 |             fill: darkRed;
34 |             stroke: darkRed;
35 |             fill:   crimson;
36 |             font-family: JasmineUPC, "FontMonger:JasmineUPC", 
37 |                          serif;
38 |         }
39 |         .family:nth-of-type(3){
40 |             stroke: darkGreen;
41 |             fill:   green;
42 |             font-family: IrisUPC, "FontMonger:IrisUPC", 
43 |                          sans-serif;
44 |         }
45 |         .family:nth-of-type(4){
46 |             fill: purple;
47 |             stroke: purple;
48 |             fill: darkorchid;
49 |             font-family: LilyUPC, "FontMonger:LilyUPC", 
50 |                          fantasy;
51 |         }
52 |     </style>
53 |     <defs>
54 |         <filter id="shine">
55 |             <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
56 |             <feColorMatrix values="1.5  0   0  0.5 0
57 |                                     0  1.5  0  0.5 0
58 |                                     0   0  1.5 0.5 0
59 |                                     0   0   0   1  -0.5" />
60 |             <feOffset dx="-2.5" dy="-1.5" />
61 |             <feComponentTransfer result="highlight">
62 |                 <feFuncA type="linear" amplitude="2" />
63 |             </feComponentTransfer>
64 |             <feComposite in="blur" in2="highlight" operator="arithmetic" 
65 |                        k1="0" k2="1" k3="1" k4="0" result="lit"/>
66 |             <feComposite in2="SourceAlpha" operator="in"/>
67 |             <feComposite in2="SourceGraphic" operator="over" result="clipped"/>
68 |         </filter>
69 |         <text id="t" x="0.5ex">พิมพ์ไทย</text>
70 |         <g id="s">
71 |             <use class="face" xlink:href="#t" y="0.9em" />
72 |             <use class="face" xlink:href="#t" y="1.8em" />
73 |             <use class="face" xlink:href="#t" x="50%" y="0.9em" />
74 |             <use class="face" xlink:href="#t" x="50%" y="1.8em" />
75 |         </g>
76 |     </defs>
77 |     <use class="family" xlink:href="#s" />
78 |     <use class="family" xlink:href="#s" y="2em" />
79 |     <use class="family" xlink:href="#s" y="4em" />
80 |     <use class="family" xlink:href="#s" y="6em" />
81 | </svg>


--------------------------------------------------------------------------------
/ch01-text-theory-files/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>ch01 Understanding Text Layout — Supplementary Material: SVG Text Layout</title>
 5 |     <link rel="stylesheet" href="../index.css" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   </head>
 8 |   <body>
 9 | <header>
10 |   <h1><a href="../"><cite>SVG Text Layout</cite></a></h1>
11 |   <p>Example code for the O&rsquo;Reilly Media book</p>
12 |   <p>by Amelia Bellamy-Royds &amp; Kurt Cagle</p>
13 | </header>
14 | <main>
15 |   <h1>Understanding Text Layout</h1>
16 |   <p>Chapter 1, Understanding Text Layout reviews the basics of laying out text in word processors and websites, and introduces much of the technical terminology used to describe text.</p>
17 |   <p>
18 |   The links below will open the live example files or high-res PNG or JPEG screenshots in a new browser tab.  Alternatively, <a href="https://github.com/oreillymedia/SVG_Text_Layout">you can download the entire collection as a zip archive or fork it as a GitHub repository</a>.  Be sure to read the <a href="http://shop.oreilly.com/category/customer-service/faq-examples.do">O&rsquo;Reilly Media policy on the use of example code</a>.
19 |   </p>
20 | <ul>
21 |   <li>Figure 1-1 (languages vs. scripts): 
22 |     <ul>
23 |       <li><a target="_blank" href="script-vs-lang.svg">SVG file</a></li>
24 |       <li><a target="_blank" href="script-vs-lang.PNG">screenshot</a></li>
25 |   </ul></li>
26 |   <li>Figure 1-3 (characters vs. glyphs):  
27 |     <ul>
28 |       <li><a target="_blank" href="char-vs-glyph.svg">SVG file</a> (not all fonts may be available on your system)</li>
29 |       <li><a target="_blank" href="char-vs-glyph.PNG">screenshot</a></li>
30 |   </ul></li>
31 |   <li>Figure 1-4 (font families, in Thai text):  
32 |     <ul>
33 |       <li><a target="_blank" href="font-families.svg">SVG file</a> (not all fonts may be available on your system)</li>
34 |       <li><a target="_blank" href="font-families.PNG">screenshot</a></li>
35 |   </ul></li>
36 |   <li>Figure 1-5 (vector vs. bitmapped fonts, with hinting and aliasing):  
37 |     <ul>
38 |       <li><a target="_blank" href="CourierA.PNG">screenshot  collage</a></li>
39 |     </ul></li>
40 | </ul>
41 |   <p>Return to the <a href="../">main table of contents</a>.</p>
42 | </main>
43 | <footer>
44 |   <p>Don&rsquo;t have a copy of <cite>SVG Text Layout</cite> already? 
45 |   </p>
46 |   <p>
47 |     Order a print book or <abbr title="Digital Rights Management">DRM</abbr>-free e-book <a href="http://shop.oreilly.com/product/0636920043072.do">from O&rsquo;Reilly Media</a>, or access it through your Safari Books Online subscription.</p>
48 | </footer>
49 |   </body>
50 | </html>


--------------------------------------------------------------------------------
/ch01-text-theory-files/japanese-snails.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch01-text-theory-files/japanese-snails.JPG


--------------------------------------------------------------------------------
/ch01-text-theory-files/script-vs-lang.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch01-text-theory-files/script-vs-lang.PNG


--------------------------------------------------------------------------------
/ch01-text-theory-files/script-vs-lang.hires.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch01-text-theory-files/script-vs-lang.hires.PNG


--------------------------------------------------------------------------------
/ch01-text-theory-files/script-vs-lang.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      width="400" height="275" viewBox="0 0 400 275">
 4 |     <title xml:lang="en">Scripts versus Languages</title>
 5 |     <style type="text/css">
 6 |         svg {
 7 |             font-size: 28px;
 8 |             font-family: Georgia, Times, serif;
 9 |             background: #181122;
10 |             border: thin solid hsla(0,0%,100%,0.3);
11 |             margin: 11px;
12 |         }
13 |         text {
14 |             filter: url(#shine);
15 |             font-weight: bold;
16 |             stroke-width: 1px;
17 |         }
18 |         text:nth-of-type(1){
19 |             stroke: mediumBlue;
20 |             fill:   royalblue;
21 |         }
22 |         text:nth-of-type(2){
23 |             stroke: darkRed;
24 |             fill:   crimson;
25 |         }
26 |         text:nth-of-type(3){
27 |             stroke: darkGreen;
28 |             fill:   green;
29 |         }
30 |         text:nth-of-type(4){
31 |             stroke: purple;
32 |             fill: darkorchid;
33 |         }
34 |     </style>
35 |     <defs>
36 |         <filter id="shine">
37 |             <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
38 |             <feColorMatrix values="1.5  0   0  0.5 0
39 |                                     0  1.5  0  0.5 0
40 |                                     0   0  1.5 0.5 0
41 |                                     0   0   0   1  -0.5" />
42 |             <feOffset dx="-2.5" dy="-1.5" />
43 |             <feComponentTransfer result="highlight">
44 |                 <feFuncA type="linear" amplitude="2" />
45 |             </feComponentTransfer>
46 |             <feComposite in="blur" in2="highlight" operator="arithmetic" 
47 |                        k1="0" k2="1" k3="1" k4="0" result="lit"/>
48 |             <feComposite in2="SourceAlpha" operator="in"/>
49 |             <feComposite in2="SourceGraphic" operator="over" result="clipped"/>
50 |         </filter>
51 |     </defs>
52 |      
53 |     <text x="10" y="1em" xml:lang="la"
54 |           >Idem alphabetum, 
55 |         <tspan x="30" dy="1em">sed alia lingua</tspan></text>
56 |     <text x="10" y="3.5em" xml:lang="en"
57 |           >The same alphabet, 
58 |         <tspan x="30" dy="1em">but a different language</tspan></text>
59 |     <text x="10" y="6em" xml:lang="ga-IE"
60 |           >An aibítir céanna, 
61 |         <tspan x="30" dy="1em">ach le éagsúla teanga</tspan></text>
62 |     <text x="10" y="8.5em" xml:lang="vi"
63 |           ><tspan  font-size="80%">Bảng chữ cái giống nhau, 
64 |         <tspan x="30" dy="1em">nhưng một ngôn ngữ khác nhau</tspan></tspan></text>
65 | </svg>


--------------------------------------------------------------------------------
/ch02-text-basics-files/flower-heading.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch02-text-basics-files/flower-heading.PNG


--------------------------------------------------------------------------------
/ch02-text-basics-files/flower-heading.svg:
--------------------------------------------------------------------------------
  1 | <svg xmlns="http://www.w3.org/2000/svg"
  2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
  3 |      width="400" height="500" viewBox="0 0 400 500"
  4 |      xml:lang="en" aria-labelledby="title">
  5 |     <title>Wood Lily</title>
  6 |     <style type="text/css">
  7 |         .backdrop { 
  8 |             fill: powderBlue; 
  9 |         }
 10 |         .flower {
 11 |             fill: orange;
 12 |             stroke: darkOrange;
 13 |         }
 14 |         .flower-spot { 
 15 |             fill: saddleBrown; 
 16 |         }
 17 |         .filament {
 18 |             stroke: #C30;
 19 |             stroke-width: 2px;
 20 |             stroke-linecap: round;
 21 |         }
 22 |         .anther {
 23 |             fill: darkGoldenrod;
 24 |             stroke: goldenrod;
 25 |         }
 26 |         .stigma {
 27 |             fill: orangeRed;
 28 |             stroke: red;
 29 |         }
 30 |         .ovary, .leaf, .stem {
 31 |             fill: yellowGreen;
 32 |             stroke: darkGreen;
 33 |         }
 34 |         .stem {
 35 |             stroke-width: 4px;
 36 |         }
 37 |         .flower-spot, 
 38 |         .stigma, 
 39 |         .ovary {
 40 |             stroke-width: 0.5px;        
 41 |         }
 42 |         .filament, 
 43 |         .stem, 
 44 |         .stripe {
 45 |             fill: none;
 46 |         }
 47 |         text {
 48 |             font-family: Georgia, serif;
 49 |             font-size: 24px;
 50 |         }
 51 |         [role="heading"] {
 52 |             fill: darkSlateGray;
 53 |         }
 54 |         [role="heading"][aria-level="1"] {
 55 |             font-size: 48px;
 56 |         }
 57 |         :lang(la){
 58 |             font-style: italic;
 59 |         }
 60 |     </style>
 61 |     <defs>
 62 |         <g id="petal" class="flower" transform="translate(5,0)">
 63 |             <path d="M0,-3 C30,-5 40,-42 100,-5 
 64 |                            C106,-1 106,1 100,5 
 65 |                            C40,42 30,5 0,3Z" />
 66 |             <g class="flower-spot">
 67 |                 <ellipse rx="5" ry="2.5" cx="30" cy="-4" />
 68 |                 <ellipse rx="5" ry="2"   cx="45" cy="-8" />
 69 |                 <ellipse rx="6" ry="3"   cx="40" cy="6" />
 70 |                 <ellipse rx="4" ry="2.5" cx="20" cy="3" />
 71 |                 <ellipse rx="3" ry="2"   cx="55" cy="2" />
 72 |             </g>                         
 73 |         </g>
 74 |         <use id="petal2" xlink:href="#petal" 
 75 |              transform="scale(1,-1)"/>
 76 |         <g id="leaf" class="leaf">
 77 |             <path d="M1,-2 Q20,-10 60,0 Q20,10 1,2Z" />
 78 |             <path class="stripe" 
 79 |                   d="M1,-1 Q30,-10 58,0
 80 |                      M1,0  Q25,-5  56,0
 81 |                      M3,0  Q40,1   57,0
 82 |                      M2,0  Q23,6   57,0
 83 |                      M1,1  Q29,10  59,0" />
 84 |         </g>
 85 |         <use id="leaf2" xlink:href="#leaf" 
 86 |              transform="scale(1,-1)"/>
 87 |         <g id="stamen">
 88 |             <path class="filament"
 89 |                   d="M0,0 Q0,-40 20,-60" />
 90 |             <ellipse class="anther" rx="6" ry="1.5"
 91 |                      transform="translate(20,-60) rotate(55)" />
 92 |         </g>
 93 |     </defs>
 94 |     <rect class="backdrop" width="100%" height="100%" />
 95 |     <g>
 96 |         <g transform="translate(97,430)">
 97 |             <use xlink:href="#leaf2" transform="rotate(210)"/>
 98 |         </g>
 99 |         <g transform="translate(89,350)">
100 |             <use xlink:href="#leaf"  transform="rotate(-30)"/>
101 |             <use xlink:href="#leaf2" transform="rotate(210)"/>
102 |         </g>
103 |         <g transform="translate(90,270) scale(1,0.9) rotate(5)">
104 |             <use xlink:href="#leaf"  transform="rotate(-60)"/>
105 |             <use xlink:href="#leaf"  transform="rotate(185)"/>
106 |             <use xlink:href="#leaf2" transform="rotate(230)"/>
107 |         </g>
108 |         <g transform="translate(103,180)">
109 |             <use xlink:href="#leaf"  transform="rotate(220)"/>
110 |         </g>
111 |         <path class="stem"
112 |               d="M100,450 Q70,250 120,120" />
113 |         <g transform="translate(97,430)">
114 |             <use xlink:href="#leaf"  transform="rotate(-5)"/>
115 |         </g>
116 |         <g transform="translate(89,350)">
117 |             <use xlink:href="#leaf"  transform="rotate(30)"/>
118 |         </g>
119 |         <g transform="translate(90,270) scale(1,0.9) rotate(5)">
120 |             <use xlink:href="#leaf2" transform="rotate(-10)"/>
121 |             <use xlink:href="#leaf2" transform="rotate(50)"/>
122 |             <use xlink:href="#leaf"  transform="rotate(125)"/>
123 |         </g>
124 |         <g transform="translate(103,180)">
125 |             <use xlink:href="#leaf2" transform="rotate(-10)"/>
126 |             <use xlink:href="#leaf"  transform="rotate(150)"/>
127 |         </g>
128 |     </g>
129 |     
130 |     <g transform="translate(120,120)">
131 |         <circle class="flower" r="6" />
132 |         <use xlink:href="#petal"  transform="rotate( 20)"/>
133 |         <use xlink:href="#petal2" transform="rotate( 80)"/>
134 |         <use xlink:href="#petal2" transform="rotate(140)"/>
135 |         <use xlink:href="#petal"  transform="rotate(200)"/>
136 |         <use xlink:href="#petal2" transform="rotate(260)"/>
137 |         <use xlink:href="#petal"  transform="rotate(320)"/>
138 |         
139 |         <use xlink:href="#stamen" 
140 |              transform="scale(-0.8,1) translate(2,-3) rotate(-30)" />
141 |         <use xlink:href="#stamen" 
142 |              transform="scale(-1,1.1) translate(2,-2.5) rotate(10)" />
143 |         <use xlink:href="#stamen" 
144 |              transform="scale(-1,1.1) skewX(10) translate(3,0) rotate(30)" />
145 |         <g transform="rotate(15)">
146 |             <path class="stigma"
147 |                   d="M-1.5,-10 Q-2,-40 10,-50 
148 |                      A2,2.5 8 1,1 13,-54
149 |                      A1.5,2.5 45 1,1 14,-49
150 |                      Q2,-42 1.5,-10Z" />
151 |             <path class="ovary"
152 |                   d="M-3,0 C-3,-15 -1,-15 0,-12 
153 |                            C1,-15 3,-15 2.5,0
154 |                            Q0,3 -3,0Z" />
155 |         </g>
156 |         <use xlink:href="#stamen" 
157 |              transform="translate(3,0) rotate(35)" />
158 |         <use xlink:href="#stamen" 
159 |              transform="skewY(5) translate(1,2) rotate(55)" />
160 |         <use xlink:href="#stamen" 
161 |              transform="skewY(-10) translate(1,2) rotate(120)" />
162 |     </g>
163 |     
164 |     <g>
165 |         <g id="title">
166 |             <text role="heading" aria-level="1"
167 |                   x="170" y="450">Wood Lily</text>
168 |             <text xml:lang="la" role="heading" aria-level="2"
169 |                   x="190" y="480">Lilium montanum</text>
170 |         </g>
171 |     </g>
172 | </svg>
173 | 
174 | 


--------------------------------------------------------------------------------
/ch02-text-basics-files/flower-labels-accessible.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch02-text-basics-files/flower-labels-accessible.PNG


--------------------------------------------------------------------------------
/ch02-text-basics-files/flower.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch02-text-basics-files/flower.PNG


--------------------------------------------------------------------------------
/ch02-text-basics-files/flower.svg:
--------------------------------------------------------------------------------
  1 | <svg xmlns="http://www.w3.org/2000/svg"
  2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
  3 |      width="400" height="500" viewBox="0 0 400 500"
  4 |      xml:lang="en">
  5 |     <title>Wood Lily</title>
  6 |     <style type="text/css">
  7 |         .backdrop { 
  8 |             fill: powderBlue; 
  9 |         }
 10 |         .flower {
 11 |             fill: orange;
 12 |             stroke: darkOrange;
 13 |         }
 14 |         .flower-spot { 
 15 |             fill: saddleBrown; 
 16 |         }
 17 |         .filament {
 18 |             stroke: #C30;
 19 |             stroke-width: 2px;
 20 |             stroke-linecap: round;
 21 |         }
 22 |         .anther {
 23 |             fill: darkGoldenrod;
 24 |             stroke: goldenrod;
 25 |         }
 26 |         .stigma {
 27 |             fill: orangeRed;
 28 |             stroke: red;
 29 |         }
 30 |         .ovary, .leaf, .stem {
 31 |             fill: yellowGreen;
 32 |             stroke: darkGreen;
 33 |         }
 34 |         .stem {
 35 |             stroke-width: 4px;
 36 |         }
 37 |         .flower-spot, 
 38 |         .stigma, 
 39 |         .ovary {
 40 |             stroke-width: 0.5px;        
 41 |         }
 42 |         .filament, 
 43 |         .stem, 
 44 |         .stripe {
 45 |             fill: none;
 46 |         }
 47 |     </style>
 48 |     <defs>
 49 |         <g id="petal" class="flower" transform="translate(5,0)">
 50 |             <path d="M0,-3 C30,-5 40,-42 100,-5 
 51 |                            C106,-1 106,1 100,5 
 52 |                            C40,42 30,5 0,3Z" />
 53 |             <g class="flower-spot">
 54 |                 <ellipse rx="5" ry="2.5" cx="30" cy="-4" />
 55 |                 <ellipse rx="5" ry="2"   cx="45" cy="-8" />
 56 |                 <ellipse rx="6" ry="3"   cx="40" cy="6" />
 57 |                 <ellipse rx="4" ry="2.5" cx="20" cy="3" />
 58 |                 <ellipse rx="3" ry="2"   cx="55" cy="2" />
 59 |             </g>                         
 60 |         </g>
 61 |         <use id="petal2" xlink:href="#petal" 
 62 |              transform="scale(1,-1)"/>
 63 |         <g id="leaf" class="leaf">
 64 |             <path d="M1,-2 Q20,-10 60,0 Q20,10 1,2Z" />
 65 |             <path class="stripe" 
 66 |                   d="M1,-1 Q30,-10 58,0
 67 |                      M1,0  Q25,-5  56,0
 68 |                      M3,0  Q40,1   57,0
 69 |                      M2,0  Q23,6   57,0
 70 |                      M1,1  Q29,10  59,0" />
 71 |         </g>
 72 |         <use id="leaf2" xlink:href="#leaf" 
 73 |              transform="scale(1,-1)"/>
 74 |         <g id="stamen">
 75 |             <path class="filament"
 76 |                   d="M0,0 Q0,-40 20,-60" />
 77 |             <ellipse class="anther" rx="6" ry="1.5"
 78 |                      transform="translate(20,-60) rotate(55)" />
 79 |         </g>
 80 |     </defs>
 81 |     <rect class="backdrop" width="100%" height="100%" />
 82 |     <g>
 83 |         <g transform="translate(97,430)">
 84 |             <use xlink:href="#leaf2" transform="rotate(210)"/>
 85 |         </g>
 86 |         <g transform="translate(89,350)">
 87 |             <use xlink:href="#leaf"  transform="rotate(-30)"/>
 88 |             <use xlink:href="#leaf2" transform="rotate(210)"/>
 89 |         </g>
 90 |         <g transform="translate(90,270) scale(1,0.9) rotate(5)">
 91 |             <use xlink:href="#leaf"  transform="rotate(-60)"/>
 92 |             <use xlink:href="#leaf"  transform="rotate(185)"/>
 93 |             <use xlink:href="#leaf2" transform="rotate(230)"/>
 94 |         </g>
 95 |         <g transform="translate(103,180)">
 96 |             <use xlink:href="#leaf"  transform="rotate(220)"/>
 97 |         </g>
 98 |         <path class="stem"
 99 |               d="M100,450 Q70,250 120,120" />
100 |         <g transform="translate(97,430)">
101 |             <use xlink:href="#leaf"  transform="rotate(-5)"/>
102 |         </g>
103 |         <g transform="translate(89,350)">
104 |             <use xlink:href="#leaf"  transform="rotate(30)"/>
105 |         </g>
106 |         <g transform="translate(90,270) scale(1,0.9) rotate(5)">
107 |             <use xlink:href="#leaf2" transform="rotate(-10)"/>
108 |             <use xlink:href="#leaf2" transform="rotate(50)"/>
109 |             <use xlink:href="#leaf"  transform="rotate(125)"/>
110 |         </g>
111 |         <g transform="translate(103,180)">
112 |             <use xlink:href="#leaf2" transform="rotate(-10)"/>
113 |             <use xlink:href="#leaf"  transform="rotate(150)"/>
114 |         </g>
115 |     </g>
116 |     
117 |     <g transform="translate(120,120)">
118 |         <circle class="flower" r="6" />
119 |         <use xlink:href="#petal"  transform="rotate( 20)"/>
120 |         <use xlink:href="#petal2" transform="rotate( 80)"/>
121 |         <use xlink:href="#petal2" transform="rotate(140)"/>
122 |         <use xlink:href="#petal"  transform="rotate(200)"/>
123 |         <use xlink:href="#petal2" transform="rotate(260)"/>
124 |         <use xlink:href="#petal"  transform="rotate(320)"/>
125 |         
126 |         <use xlink:href="#stamen" 
127 |              transform="scale(-0.8,1) translate(2,-3) rotate(-30)" />
128 |         <use xlink:href="#stamen" 
129 |              transform="scale(-1,1.1) translate(2,-2.5) rotate(10)" />
130 |         <use xlink:href="#stamen" 
131 |              transform="scale(-1,1.1) skewX(10) translate(3,0) rotate(30)" />
132 |         <g transform="rotate(15)">
133 |             <path class="stigma"
134 |                   d="M-1.5,-10 Q-2,-40 10,-50 
135 |                      A2,2.5 8 1,1 13,-54
136 |                      A1.5,2.5 45 1,1 14,-49
137 |                      Q2,-42 1.5,-10Z" />
138 |             <path class="ovary"
139 |                   d="M-3,0 C-3,-15 -1,-15 0,-12 
140 |                            C1,-15 3,-15 2.5,0
141 |                            Q0,3 -3,0Z" />
142 |         </g>
143 |         <use xlink:href="#stamen" 
144 |              transform="translate(3,0) rotate(35)" />
145 |         <use xlink:href="#stamen" 
146 |              transform="skewY(5) translate(1,2) rotate(55)" />
147 |         <use xlink:href="#stamen" 
148 |              transform="skewY(-10) translate(1,2) rotate(120)" />
149 |     </g>
150 |     
151 |     <g>
152 |         <!-- Text elements will go here -->
153 |     </g>
154 | </svg>
155 | 


--------------------------------------------------------------------------------
/ch02-text-basics-files/font-size.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch02-text-basics-files/font-size.PNG


--------------------------------------------------------------------------------
/ch02-text-basics-files/font-size.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>font-size and SVG Coordinate Systems</title>
 6 |     <style>
 7 |         body {
 8 |             background-color: lightYellow;
 9 |             font: 6pt sans-serif;                     <!--1-->
10 |         }
11 |         svg {
12 |             display: block;
13 |             border: solid royalBlue;
14 |             background-color: lightCyan;
15 |             margin: 2em auto;
16 |             width: 95%;
17 |             max-width: 90vh;
18 |             height: auto;
19 |             min-height: 10em;
20 |             max-height: 90vh;                         <!--2-->
21 |         }
22 |     </style>
23 | </head>
24 | <body>
25 |     <p>This is 6pt HTML text.  
26 |        It is very tiny and difficult to read.</p>
27 |     <svg viewBox="0 0 100 100">                       <!--3-->
28 |         <text x="5" y="1em">This is 6pt SVG text.</text>
29 |         <text transform="translate(10,90) rotate(-30) scale(2,3)"
30 |               >This is also 6pt text.</text>          <!--4-->
31 |     </svg>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/ch02-text-basics-files/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>ch02 SVG Text Basics — Supplementary Material: SVG Text Layout</title>
 5 |     <link rel="stylesheet" href="../index.css" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   </head>
 8 |   <body>
 9 | <header>
10 |   <h1><a href="../"><cite>SVG Text Layout</cite></a></h1>
11 |   <p>Example code for the O&rsquo;Reilly Media book</p>
12 |   <p>by Amelia Bellamy-Royds &amp; Kurt Cagle</p>
13 | </header>
14 | <main>
15 |   <h1>SVG Text Basics</h1>
16 |   <p>Chapter 2 introduces the SVG <code>&lt;text&gt;</code> element and the basic attributes for positioning simple text labels within a graphic, including the particular issues of sizing text within a scalable coordinate system.</p>
17 |   <p>
18 |   The links below will open the live example files or high-res PNG or JPEG screenshots in a new browser tab.  Alternatively, <a href="https://github.com/oreillymedia/SVG_Text_Layout">you can download the entire collection as a zip archive or fork it as a GitHub repository</a>.  Be sure to read the <a href="http://shop.oreilly.com/category/customer-service/faq-examples.do">O&rsquo;Reilly Media policy on the use of example code</a>.
19 |   </p>
20 | <ul>
21 |   <li>Example 2-1 &amp; Figure 2-1 (basic SVG text): 
22 |     <ul>
23 |       <li><a target="_blank" href="text-simple.svg">SVG file, using positioning attributes</a></li>
24 |       <li><a target="_blank" href="text-transform.svg">SVG file, using transformations</a></li>
25 |       <li><a target="_blank" href="text-simple.PNG">screenshot</a></li>
26 |   </ul></li>
27 |   <li>Example 2-2 &amp; Figure 2-2 (changing text size): 
28 |     <ul>
29 |       <li><a target="_blank" href="text-size.svg">SVG file</a></li>
30 |       <li><a target="_blank" href="text-size.PNG">screenshot</a></li>
31 |   </ul></li>
32 |   <li>Example 2-3 &amp; Figure 2-3 (coordinate systems and text size in inline SVG): 
33 |     <ul>
34 |       <li><a target="_blank" href="font-size.html">HTML file</a></li>
35 |       <li><a target="_blank" href="font-size.PNG">screenshot</a></li>
36 |   </ul></li>
37 |   <li>Figure 2-4 (styled SVG text): 
38 |     <ul>
39 |       <li><a target="_blank" href="text-styled.svg">SVG file, using presentation attributes</a></li>
40 |       <li><a target="_blank" href="text-css-longhand.svg">SVG file, using CSS rules</a></li>
41 |       <li><a target="_blank" href="text-css.svg">SVG file, using CSS rules and the <code>font</code> shorthand property</a></li>
42 |       <li><a target="_blank" href="text-styled.PNG">screenshot</a></li>
43 |   </ul></li>
44 |   <li>Example 2-4 &amp; Figure 2-5 (filter effects on SVG text): 
45 |     <ul>
46 |       <li><a target="_blank" href="text-filter.svg">SVG file</a></li>
47 |       <li><a target="_blank" href="text-filter.PNG">screenshot</a></li>
48 |   </ul></li>
49 |   <li>Figure 2-6 (wood lily graphic, without labels): 
50 |     <ul>
51 |       <li><a target="_blank" href="flower.svg">SVG file</a></li>
52 |       <li><a target="_blank" href="flower.PNG">screenshot</a></li>
53 |   </ul></li>
54 |   <li>Figure 2-7 (wood lily graphic, with title): 
55 |     <ul>
56 |       <li><a target="_blank" href="flower-heading.svg">SVG file</a></li>
57 |       <li><a target="_blank" href="flower-heading.PNG">screenshot</a></li>
58 |   </ul></li>
59 |   <li>Example 2-5 &amp; Figure 2-8 (wood lily graphic, with interactive labels): 
60 |     <ul>
61 |       <li><a target="_blank" href="flower-labels-accessible.svg">SVG file</a></li>
62 |       <li><a target="_blank" href="flower-labels-accessible.PNG">screenshot</a></li>
63 |   </ul></li>
64 | </ul>
65 |   <p>Return to the <a href="../">main table of contents</a>.</p>
66 | </main>
67 | <footer>
68 |   <p>Don&rsquo;t have a copy of <cite>SVG Text Layout</cite> already? 
69 |   </p>
70 |   <p>
71 |     Order a print book or <abbr title="Digital Rights Management">DRM</abbr>-free e-book <a href="http://shop.oreilly.com/product/0636920043072.do">from O&rsquo;Reilly Media</a>, or access it through your Safari Books Online subscription.</p>
72 | </footer>
73 |   </body>
74 | </html>


--------------------------------------------------------------------------------
/ch02-text-basics-files/text-css-longhand.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"
 2 |      xml:lang="en"
 3 |      width="4in" height="0.8in" viewBox="0 0 400 80" >
 4 |     <title>SVG Text using CSS</title>
 5 |     <style type="text/css">
 6 |         text {
 7 |             font-family: Verdana, Geneva, sans-serif;
 8 |             font-size: 64px;
 9 |             font-weight: bold;
10 |             text-decoration: underline;          
11 |             fill: darkBlue;    
12 |         }
13 |     </style>
14 |     <rect width="100%" height="100%" fill="lightYellow" />
15 |     <text x="10" y="80%">SVG Text</text>
16 | </svg>


--------------------------------------------------------------------------------
/ch02-text-basics-files/text-css.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"
 2 |      xml:lang="en"
 3 |      width="4in" height="0.8in" viewBox="0 0 400 80" >
 4 |     <title>SVG Text using CSS</title>
 5 |     <style type="text/css">
 6 |         text {
 7 |             font: bold 64px Verdana, Geneva, sans-serif;        
 8 |             text-decoration: underline;          
 9 |             fill: darkBlue;    
10 |         }
11 |     </style>
12 |     <rect width="100%" height="100%" fill="lightYellow" />
13 |     <text x="10" y="80%">SVG Text</text>
14 | </svg>


--------------------------------------------------------------------------------
/ch02-text-basics-files/text-filter.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch02-text-basics-files/text-filter.PNG


--------------------------------------------------------------------------------
/ch02-text-basics-files/text-filter.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"
 2 |      xml:lang="en"
 3 |      width="4in" height="0.8in" viewBox="0 0 400 80" >
 4 |     <title>Filter Effects on SVG Text</title>
 5 |     <style type="text/css">
 6 |         text {
 7 |             font: bold 64px Verdana, Geneva, sans-serif;        
 8 |             text-decoration: underline;          
 9 |             fill: darkBlue;    
10 |             stroke: indigo;
11 |             filter: url(#shine);                                <!--1-->
12 |         }
13 |     </style>    
14 |     <defs>
15 |         <filter id="shine">
16 |             <feGaussianBlur in="SourceGraphic" stdDeviation="2" 
17 |                             result="blur"/>                     <!--2-->
18 |             <feColorMatrix values="1.5  0   0  0.5 0
19 |                                     0  1.5  0  0.5 0
20 |                                     0   0  1.5 0.5 0
21 |                                     0   0   0   1  -0.5" />     <!--3-->
22 |             <feOffset dx="-2.5" dy="-1.5" />                    <!--4-->
23 |             <feComponentTransfer result="highlight">
24 |                 <feFuncA type="linear" amplitude="2" />         <!--5-->
25 |             </feComponentTransfer>
26 |             <feComposite in="blur" in2="highlight" 
27 |                          operator="arithmetic" 
28 |                          k1="0" k2="1" k3="1" k4="0" />
29 |             <feComposite in2="SourceGraphic" operator="atop" /> <!--6-->
30 |         </filter>
31 |     </defs>
32 |     <rect width="100%" height="100%" fill="lightYellow" />
33 |     <text x="10" y="80%">SVG Text</text> 
34 | </svg>


--------------------------------------------------------------------------------
/ch02-text-basics-files/text-labels.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch02-text-basics-files/text-labels.PNG


--------------------------------------------------------------------------------
/ch02-text-basics-files/text-labels.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"
 2 |      xml:lang="en"
 3 |      width="4.3in" height="2.8in" viewBox="0 0 400 260" >
 4 |     <title>SVG Shapes, Labelled</title>
 5 |     <style type="text/css">
 6 |         .shape {
 7 |             fill: deepSkyBlue;
 8 |             stroke: blueViolet;
 9 |             stroke-width: 3px;        
10 |         }
11 |         .backdrop {
12 |             fill: lightYellow;
13 |         }
14 |         text {
15 |             font-size: 16px;
16 |             font-family: serif;
17 |         }
18 |         text[role="heading"] { 
19 |             font: bold 36pt sans-serif;        
20 |             text-decoration: underline;          
21 |             fill: darkBlue;        
22 |         }
23 |     </style>
24 |     <rect width="100%" height="100%" class="backdrop" />
25 |     <g>
26 |         <line x1="10" y1="10" x2="90" y2="40" class="shape" />
27 |         <text x="120" y="30" >Line</text>
28 |     </g>
29 |     <g transform="translate(200,0)">
30 |         <rect x="10" y="10" width="80" height="30" rx="5" 
31 |               class="shape" />
32 |         <text x="120" y="30" >Rectangle</text>
33 |     </g>
34 |     <g transform="translate(0,50)">
35 |         <circle cx="50" cy="25" r="20" class="shape" />
36 |         <text x="120" y="30" >Circle</text>
37 |     </g>
38 |     <g transform="translate(200,50)">
39 |         <ellipse cx="50" cy="25" rx="40" ry="20" class="shape" />
40 |         <text x="120" y="30" >Ellipse</text>
41 |     </g>
42 |     <g transform="translate(0,100)">
43 |         <polygon points="10,10 50,40 90,10 50,25" class="shape" />
44 |         <text x="120" y="30" >Polygon</text>
45 |     </g>
46 |     <g transform="translate(200,100)">
47 |         <polyline points="10,10 50,40 90,10 50,25" 
48 |                   class="shape" style="fill: none" />
49 |         <text x="120" y="30" >Polyline</text>
50 |     </g>
51 |     <g transform="translate(100,150)">
52 |         <path d="M10,10 C15,50 85,50 90,10 L50,25 Z" class="shape" />
53 |         <text x="120" y="30" >Path</text>
54 |     </g>
55 |     <text x="10" role="heading"
56 |           transform="translate(0,240)">SVG Shapes</text>
57 | </svg>


--------------------------------------------------------------------------------
/ch02-text-basics-files/text-simple.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch02-text-basics-files/text-simple.PNG


--------------------------------------------------------------------------------
/ch02-text-basics-files/text-simple.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg"
2 |      xml:lang="en"
3 |      width="4in" height="0.8in" viewBox="0 0 400 80" >
4 |     <title>Basic SVG Text</title>
5 |     <rect width="100%" height="100%" fill="lightYellow" />
6 |     <text x="10px" y="80%">SVG Text</text>
7 | </svg>


--------------------------------------------------------------------------------
/ch02-text-basics-files/text-size.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch02-text-basics-files/text-size.PNG


--------------------------------------------------------------------------------
/ch02-text-basics-files/text-size.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"
 2 |      xml:lang="en"
 3 |      width="24em" height="4.8em" viewBox="0 0 400 80" >
 4 |     <title>Font-size and SVG Text</title>
 5 |     <style type="text/css">
 6 |         svg { font-size: 12pt; }
 7 |     </style>
 8 |     <rect width="100%" height="100%" fill="lightYellow" />
 9 |     <text x="10px" y="80%" font-size="64px">SVG Text</text>
10 | </svg>


--------------------------------------------------------------------------------
/ch02-text-basics-files/text-styled.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch02-text-basics-files/text-styled.PNG


--------------------------------------------------------------------------------
/ch02-text-basics-files/text-styled.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"
 2 |      xml:lang="en"
 3 |      width="4in" height="0.8in" viewBox="0 0 400 80" >
 4 |     <title>Styled SVG Text</title>
 5 |     <rect width="100%" height="100%" fill="lightYellow" />
 6 |     <text x="10" y="80%"
 7 |           font-family="Verdana, Geneva, sans-serif"
 8 |           font-size="64px"
 9 |           font-weight="bold"
10 |           text-decoration="underline"
11 |           fill="darkBlue" 
12 |           >SVG Text</text>
13 | </svg>


--------------------------------------------------------------------------------
/ch02-text-basics-files/text-transform.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg"
2 |      xml:lang="en"
3 |      width="4in" height="0.8in" viewBox="0 0 400 80" >
4 |     <title>Basic SVG Text with Transforms</title>
5 |     <rect width="100%" height="100%" fill="lightYellow" />
6 |     <text transform="translate(10,64)">SVG Text</text>
7 | </svg>


--------------------------------------------------------------------------------
/ch03-fill-stroke-files/currentColor-icon-oops.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch03-fill-stroke-files/currentColor-icon-oops.PNG


--------------------------------------------------------------------------------
/ch03-fill-stroke-files/currentColor-icon-oops.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>Color-Matching Icons</title>
 6 |     <style>
 7 |         body {
 8 |             background-color: #DEF;
 9 |             font-family: sans-serif;
10 |             font-size: x-large;
11 |         }
12 |         svg.icon {
13 |             /*display: inline-block;*/
14 |             height: 1em;
15 |             width: 1em;
16 |             /*vertical-align: text-bottom;*/
17 |         }
18 |         svg.defs {
19 |             /*display: block;
20 |             position: absolute;
21 |             left: -10;*/
22 |             height: 0; width: 0;
23 |         }
24 |     </style>
25 | </head>
26 | <body>
27 |     <svg class="defs" aria-hidden="true">
28 |         <symbol id="external-link" viewBox="-10 -10 20 20">
29 |             <circle r="9.5" fill="currentColor" fill-opacity="0.3" />
30 |             <g fill="currentColor" font-size="6">
31 |                 <text x="-8" y="-2" >W</text>
32 |                 <text x="-3" y="3" >W</text>
33 |                 <text x="2" y="8" >W</text>
34 |             </g>
35 |         </symbol>
36 |         <symbol id="pdf" viewBox="0 0 20 20">
37 |             <rect id="r" x="0.5" y="0.5" width="14" height="15"
38 |                   fill="white" stroke="currentColor" />
39 |             <use xlink:href="#r" x="1.5" y="2" />
40 |             <use xlink:href="#r" x="3" y="4" />
41 |             <text x="5" y="13" fill="currentColor"
42 |                   font-size="6">PDF</text>
43 |         </symbol>
44 |     </svg>
45 |     <p>An external link with an informative icon, to the
46 |     <a href="http://www.w3.org/TR/SVG11/Overview.html">SVG 1.1
47 |         <svg class="icon">
48 |             <use xlink:href="#external-link">
49 |                 <title>(external link)</title>
50 |             </use>
51 |         </svg>
52 |     </a> specifications on the Web.</p>
53 |     <p>Or you can download the 
54 |         <a href="http://www.w3.org/TR/SVG11/REC-SVG11-20110816.pdf">complete
55 |         specifications as a single file 
56 |         <svg class="icon">
57 |             <use xlink:href="#pdf">
58 |                 <title>(PDF file)</title>
59 |             </use>
60 |         </svg></a>.</p>
61 | </body>
62 | </html>


--------------------------------------------------------------------------------
/ch03-fill-stroke-files/currentColor-icon.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch03-fill-stroke-files/currentColor-icon.PNG


--------------------------------------------------------------------------------
/ch03-fill-stroke-files/currentColor-icon.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>Color-Matching Icons</title>
 6 |     <style>
 7 |         body {
 8 |             background-color: #DEF;
 9 |             font-family: sans-serif;
10 |             font-size: x-large;
11 |         }
12 |         svg.icon {
13 |             display: inline-block;
14 |             height: 1em;
15 |             width: 1em;
16 |             vertical-align: text-bottom;         <!--1-->
17 |         }
18 |         svg.defs {
19 |             display: block;
20 |             position: absolute;
21 |             left: -10;
22 |             height: 0; width: 0;                 <!--2-->
23 |         }
24 |     </style>
25 | </head>
26 | <body>
27 |     <svg class="defs" aria-hidden="true"
28 |          focusable="false" width="0" height="0">
29 |         <symbol id="external-link" viewBox="-10 -10 20 20">    <!--3-->
30 |             <circle r="9.5" 
31 |                     fill="currentColor" fill-opacity="0.3" />
32 |             <g fill="currentColor" font-size="6">
33 |                 <text x="-8" y="-2" >W</text>
34 |                 <text x="-3" y="3" >W</text>
35 |                 <text x="2" y="8" >W</text>
36 |             </g>
37 |         </symbol>
38 |         <symbol id="pdf" viewBox="0 0 20 20">                   <!--4-->
39 |             <rect id="r" x="0.5" y="0.5" width="14" height="15"
40 |                   fill="white" stroke="currentColor" />
41 |             <use xlink:href="#r" x="1.5" y="2" />
42 |             <use xlink:href="#r" x="3" y="4" />
43 |             <text x="5" y="13" fill="currentColor"
44 |                   font-size="6">PDF</text>
45 |         </symbol>
46 |     </svg>
47 |     <p>An external link with an informative icon, to the
48 |     <a href="http://www.w3.org/TR/SVG11/Overview.html">SVG 1.1
49 |         <svg class="icon">                                      <!--5-->
50 |             <use xlink:href="#external-link">
51 |                 <title>External link</title>
52 |             </use>
53 |         </svg></a> 
54 |         specifications on the Web.</p>
55 |     <p>Or you can download the 
56 |         <a href="http://www.w3.org/TR/SVG11/REC-SVG11-20110816.pdf"
57 |            >complete specifications as a single file 
58 |         <svg class="icon">
59 |             <use xlink:href="#pdf">
60 |                 <title>PDF file</title>
61 |             </use>
62 |         </svg></a>.</p>
63 | </body>
64 | </html>


--------------------------------------------------------------------------------
/ch03-fill-stroke-files/gradient-headings-tspan.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch03-fill-stroke-files/gradient-headings-tspan.PNG


--------------------------------------------------------------------------------
/ch03-fill-stroke-files/gradient-headings-tspan.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>SVG Gradient Text Headings</title>
 6 |     <style>
 7 |         body {
 8 |             background-color: #DEF;
 9 |             font-family: serif;
10 |         }
11 |         h1 svg, h2 svg {
12 |             width: 80%;
13 |             height: 1em;  
14 |             display: inline-block;
15 |             vertical-align: baseline;
16 |             overflow: visible;
17 |             padding-bottom: 0.4em;
18 |             margin-bottom: -0.4em;
19 |         }
20 |         h1, h2 {
21 |             font-family: sans-serif;
22 |             color: coral;
23 |             fill: url(#coral-gradient) currentColor;
24 |         }
25 |         h1 {
26 |             stroke: url(#red-gradient) darkRed;
27 |         }
28 |         h1 .digit {
29 |             fill: url(#red-gradient) darkRed;
30 |         }
31 |         svg.defs {
32 |             display: block;
33 |             position: absolute;
34 |             left: -10;
35 |             height: 0; width: 0; 
36 |         }
37 |     </style>
38 | </head>
39 | <body>
40 |     <svg class="defs" aria-hidden="true">
41 |         <linearGradient id="coral-gradient" y2="100%" x2="50%" >
42 |             <stop offset="0.3" stop-color="tomato" />
43 |             <stop offset="0.4" stop-color="lightCoral" />
44 |             <stop offset="0.7" stop-color="tomato" />
45 |             <stop offset="0.9" stop-color="crimson" />
46 |         </linearGradient>
47 |         <linearGradient id="red-gradient" 
48 |                         xlink:href="#coral-gradient">
49 |             <stop offset="0.3" stop-color="darkRed" />
50 |             <stop offset="0.4" stop-color="red" />
51 |             <stop offset="0.7" stop-color="darkRed" />
52 |             <stop offset="0.9" stop-color="#400" />
53 |         </linearGradient>
54 |     </svg>
55 |     <h1><svg role="presentation">   
56 |         <text y="1em">Level <tspan class="digit">1</tspan> Heading</text> 
57 |     </svg></h1>
58 | <!--
59 |     <p>An introductory paragraph full of lots of interesting text,
60 |     which goes on for a few lines to take up space.  Plenty of 
61 |     space.  Very interesting text.  So interesting, you can&rsquo;t 
62 |     wait to see:
63 |     </p>
64 |     <h2><svg role="presentation">
65 |         <text y="1em">A subheading</text></svg></h2>
66 |     <p>Such excitement!  Subheadings after headings.  This must be
67 |     a really interesting web page to require such exciting headings.
68 |     We really ought to have another one, to finish things off.
69 |     </p>
70 |     <h2><svg role="presentation">
71 |         <text y="1em">Another sub</text></svg></h2>
72 |     <p>There.  Now this feels like a proper mock-up.  You can really
73 |     get the feeling of a full page outline, can&rsquo;t you?
74 |     </p>
75 | -->
76 | </body>
77 | </html>


--------------------------------------------------------------------------------
/ch03-fill-stroke-files/gradient-headings.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch03-fill-stroke-files/gradient-headings.PNG


--------------------------------------------------------------------------------
/ch03-fill-stroke-files/gradient-headings.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>SVG Gradient Text Headings</title>
 6 |     <style>
 7 |         body {
 8 |             background-color: #DEF;
 9 |             font-family: serif;
10 |         }
11 |         h1 svg, h2 svg {
12 |             width: 80%;
13 |             height: 1em;  
14 |             display: inline-block;
15 |             vertical-align: baseline;
16 |             overflow: visible;
17 |             padding-bottom: 0.4em;
18 |             margin-bottom: -0.4em;
19 |         }
20 |         h1, h2 {
21 |             font-family: sans-serif;
22 |             color: coral;
23 |             fill: url(#coral-gradient) currentColor;
24 |         }
25 |         h1 {
26 |             stroke: url(#red-gradient) darkRed;
27 |         }
28 |         svg.defs {
29 |             display: block;
30 |             position: absolute;
31 |             left: -10;
32 |             height: 0; width: 0; 
33 |         }
34 |     </style>
35 | </head>
36 | <body>
37 |     <svg class="defs" aria-hidden="true"
38 |          focusable="false" width="0" height="0">
39 |         <linearGradient id="coral-gradient" y2="100%" x2="50%" >
40 |             <stop offset="0.3" stop-color="tomato" />
41 |             <stop offset="0.4" stop-color="lightCoral" />
42 |             <stop offset="0.7" stop-color="tomato" />
43 |             <stop offset="0.9" stop-color="crimson" />
44 |         </linearGradient>
45 |         <linearGradient id="red-gradient" 
46 |                         xlink:href="#coral-gradient">
47 |             <stop offset="0.3" stop-color="darkRed" />
48 |             <stop offset="0.4" stop-color="red" />
49 |             <stop offset="0.7" stop-color="darkRed" />
50 |             <stop offset="0.9" stop-color="#400" />
51 |         </linearGradient>
52 |     </svg>
53 |     <h1><svg role="presentation">   
54 |         <text y="1em">Level 1 Heading</text> 
55 |     </svg></h1>
56 |     <p>An introductory paragraph full of lots of interesting text,
57 |     which goes on for a few lines to take up space.  Plenty of 
58 |     space.  Very interesting text.  So interesting, you can&rsquo;t 
59 |     wait to see:
60 |     </p>
61 |     <h2><svg role="presentation">
62 |         <text y="1em">A subheading</text></svg></h2>
63 |     <p>Such excitement!  Subheadings after headings.  This must be
64 |     a really interesting web page to require such exciting headings.
65 |     We really ought to have another one, to finish things off.
66 |     </p>
67 |     <h2><svg role="presentation">
68 |         <text y="1em">Another sub</text></svg></h2>
69 |     <p>There.  Now this feels like a proper mock-up.  You can really
70 |     get the feeling of a full page outline, can&rsquo;t you?
71 |     </p>
72 | </body>
73 | </html>


--------------------------------------------------------------------------------
/ch03-fill-stroke-files/gradient-text.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch03-fill-stroke-files/gradient-text.PNG


--------------------------------------------------------------------------------
/ch03-fill-stroke-files/gradient-text.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      xml:lang="en"
 4 |      height="50px" width="410px">
 5 |     <title>Gradient-Filled Text</title>
 6 |     <defs>
 7 |         <linearGradient id="fade">
 8 |             <stop stop-color="black" stop-opacity="1" offset="0"/>
 9 |             <stop stop-color="black" stop-opacity="0" offset="1"/>
10 |         </linearGradient>
11 |     </defs>
12 |     <g transform="translate(10,40)"
13 |        style="font-family: Arial;
14 |               font-weight: bold;
15 |               font-size: 24pt;
16 |               fill: url('#fade');">
17 |         <text>A Whiter Shade of Pale</text>
18 |     </g>
19 | </svg>


--------------------------------------------------------------------------------
/ch03-fill-stroke-files/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>ch03 Colorful Language — Supplementary Material: SVG Text Layout</title>
 5 |     <link rel="stylesheet" href="../index.css" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   </head>
 8 |   <body>
 9 | <header>
10 |   <h1><a href="../"><cite>SVG Text Layout</cite></a></h1>
11 |   <p>Example code for the O&rsquo;Reilly Media book</p>
12 |   <p>by Amelia Bellamy-Royds &amp; Kurt Cagle</p>
13 | </header>
14 | <main>
15 |   <h1>Colorful Language</h1>
16 |   <p>Chapter 3 briefly covers SVG’s <code>fill</code> and <code>stroke</code> properties for controlling the visual appearance of text.</p>
17 |   <p>
18 |   The links below will open the live example files or high-res PNG or JPEG screenshots in a new browser tab.  Alternatively, <a href="https://github.com/oreillymedia/SVG_Text_Layout">you can download the entire collection as a zip archive or fork it as a GitHub repository</a>.  Be sure to read the <a href="http://shop.oreilly.com/category/customer-service/faq-examples.do">O&rsquo;Reilly Media policy on the use of example code</a>.
19 |   </p>
20 | <ul>
21 |   <li>Example 3-1 &amp; Figure 3-1 (outlined SVG text as HTML headings): 
22 |     <ul>
23 |       <li><a target="_blank" href="stroked-headings.html">HTML file</a></li>
24 |       <li><a target="_blank" href="stroked-headings.PNG">screenshot</a></li>
25 |   </ul></li>
26 |   <li>Example 3-2 &amp; Figure 3-2 (currentColor and inline icons): 
27 |     <ul>
28 |       <li><a target="_blank" href="currentColor-icon.html">HTML file</a></li>
29 |       <li><a target="_blank" href="currentColor-icon.PNG">screenshot</a></li>
30 |   </ul></li>
31 |   <li>Figure 3-3 (demonstration of quirky errors in currentColor example): 
32 |     <ul>
33 |       <li><a target="_blank" href="currentColor-icon-oops.html">HTML file</a></li>
34 |       <li><a target="_blank" href="currentColor-icon-oops.PNG">screenshot</a></li>
35 |   </ul></li>
36 |   <li>Example 3-3 &amp; Figure 3-4 (gradient-filled SVG text): 
37 |     <ul>
38 |       <li><a target="_blank" href="gradient-text.svg">SVG file</a></li>
39 |       <li><a target="_blank" href="gradient-text.PNG">screenshot</a></li>
40 |   </ul></li>
41 |   <li>Example 3-4 &amp; Figure 3-5 (gradient-filled SVG text as HTML headings): 
42 |     <ul>
43 |       <li><a target="_blank" href="gradient-headings.html">HTML file</a></li>
44 |       <li><a target="_blank" href="gradient-headings.PNG">screenshot</a></li>
45 |   </ul></li>
46 |   <li>Example 3-5 &amp; Figure 3-6 (using <code>&lt;tspan&gt;</code> to change styles): 
47 |     <ul>
48 |       <li><a target="_blank" href="tspan-formatting.svg">SVG file</a></li>
49 |       <li><a target="_blank" href="tspan-formatting.PNG">screenshot</a></li>
50 |   </ul></li>
51 |   <li>Figure 3-7 (using <code>&lt;tspan&gt;</code> with paint servers): 
52 |     <ul>
53 |       <li><a target="_blank" href="gradient-headings-tspan.html">HTML file</a></li>
54 |       <li><a target="_blank" href="gradient-headings-tspan.PNG">screenshot</a></li>
55 |   </ul></li>
56 | </ul>
57 |   <p>Return to the <a href="../">main table of contents</a>.</p>
58 | </main>
59 | <footer>
60 |   <p>Don&rsquo;t have a copy of <cite>SVG Text Layout</cite> already? 
61 |   </p>
62 |   <p>
63 |     Order a print book or <abbr title="Digital Rights Management">DRM</abbr>-free e-book <a href="http://shop.oreilly.com/product/0636920043072.do">from O&rsquo;Reilly Media</a>, or access it through your Safari Books Online subscription.</p>
64 | </footer>
65 |   </body>
66 | </html>


--------------------------------------------------------------------------------
/ch03-fill-stroke-files/stroked-headings.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch03-fill-stroke-files/stroked-headings.PNG


--------------------------------------------------------------------------------
/ch03-fill-stroke-files/stroked-headings.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>SVG Text Headings</title>
 6 |     <style>
 7 |         body {
 8 |             background-color: #DEF;
 9 |             font-family: serif;
10 |         }
11 |         h1 svg, h2 svg {
12 |             width: 80%;
13 |             height: 1em;  
14 |             display: inline-block;
15 |             vertical-align: baseline;
16 |             overflow: visible;
17 |             padding-bottom: 0.4em;
18 |             margin-bottom: -0.4em;
19 |         }
20 |         h1, h2 {
21 |             font-family: sans-serif;
22 |             stroke: darkRed;
23 |         }
24 |         h1 {
25 |             fill: coral;
26 |         }
27 |         h2 {
28 |             fill: lightCoral;
29 |         }
30 |     </style>
31 | </head>
32 | <body>
33 |     <h1><svg role="presentation">                          <!--5-->
34 |         <text y="1em">Level 1 Heading</text>               <!--6-->
35 |     </svg></h1>
36 |     <p>An introductory paragraph full of lots of interesting text,
37 |     which goes on for a few lines to take up space.  Plenty of 
38 |     space.  Very interesting text.  So interesting, you can&rsquo;t 
39 |     wait to see:
40 |     </p>
41 |     <h2><svg role="presentation">
42 |         <text y="1em">A subheading</text></svg></h2>
43 |     <p>Such excitement!  Subheadings after headings.  This must be
44 |     a really interesting web page to require such exciting headings.
45 |     We really ought to have another one, to finish things off.
46 |     </p>
47 |     <h2><svg role="presentation">
48 |         <text y="1em">Another sub</text></svg></h2>
49 |     <p>There.  Now this feels like a proper mock-up.  You can really
50 |     get the feeling of a full page outline, can&rsquo;t you?
51 |     </p>
52 | </body>
53 | </html>


--------------------------------------------------------------------------------
/ch03-fill-stroke-files/tspan-formatting.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch03-fill-stroke-files/tspan-formatting.PNG


--------------------------------------------------------------------------------
/ch03-fill-stroke-files/tspan-formatting.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xml:lang="en" width="10cm" height="2cm">
 3 |     <title>Formatting Text Spans</title>
 4 |     <style type="text/css">
 5 |         svg {
 6 |             font-family: serif;
 7 |             font-size: 12mm;
 8 |             fill: navy;
 9 |         }
10 |     </style>
11 |     <rect fill="#CEE" width="100%" height="100%" />
12 |     <text x="5mm" y="1.5cm" >One, 
13 |         <tspan fill="royalBlue">Two,</tspan>
14 |         <tspan font-style="italic" fill="royalBlue" stroke="navy"
15 |                >Three!</tspan>
16 |     </text>
17 | </svg>


--------------------------------------------------------------------------------
/ch04-position-tspan-files/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>ch04 Multiline SVG Text — Supplementary Material: SVG Text Layout</title>
 5 |     <link rel="stylesheet" href="../index.css" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   </head>
 8 |   <body>
 9 | <header>
10 |   <h1><a href="../"><cite>SVG Text Layout</cite></a></h1>
11 |   <p>Example code for the O&rsquo;Reilly Media book</p>
12 |   <p>by Amelia Bellamy-Royds &amp; Kurt Cagle</p>
13 | </header>
14 | <main>
15 |   <h1> Multiline SVG Text</h1>
16 |   <p>Chapter 4 gets into more complex text layouts, using formatted poetry as examples.</p>
17 |   <p>
18 |   The links below will open the live example files or high-res PNG or JPEG screenshots in a new browser tab.  Alternatively, <a href="https://github.com/oreillymedia/SVG_Text_Layout">you can download the entire collection as a zip archive or fork it as a GitHub repository</a>.  Be sure to read the <a href="http://shop.oreilly.com/category/customer-service/faq-examples.do">O&rsquo;Reilly Media policy on the use of example code</a>.
19 |   </p>
20 | <ul>
21 |   <li>Example 4-1 &amp; Figure 4-1 (using <code>&lt;tspan&gt;</code> to adjust position): 
22 |     <ul>
23 |       <li><a target="_blank" href="tspan-position-absolute.svg">SVG file, using absolute positions</a></li>
24 |       <li><a target="_blank" href="tspan-position-relative.svg">SVG file, using relative positions</a></li>
25 |       <li><a target="_blank" href="tspan-position-absolute.PNG">screenshot</a></li>
26 |   </ul></li>
27 |   <li>Figure 4-2 (combining percentage positions with fixed offsets): 
28 |     <ul>
29 |       <li><a target="_blank" href="tspan-position-percentage-offset.svg">SVG file, using positions relative to 50%</a></li>
30 |       <li><a target="_blank" href="tspan-position-percentage-bottom.svg">SVG file, using positions relative to 100%</a></li>
31 |       <li><a target="_blank" href="tspan-position-percentage-compare.html">HTML file, embedding the two SVGs as objects</a> (note, the CSS table layout does not render correctly in some browsers)</li>
32 |       <li><a target="_blank" href="tspan-position-percentage-compare.PNG">screenshot</a></li>
33 |   </ul></li>
34 |   <li>Example 5-3 &amp; Figure 5-3 (“How doth the little crocodile”): 
35 |     <ul>
36 |       <li><a target="_blank" href="little-crocodile.svg">SVG file</a></li>
37 |       <li><a target="_blank" href="little-crocodile.PNG">screenshot</a></li>
38 |   </ul></li>
39 |   <li>Example 4-3 &amp; Figure 4-4 (“The Mouse's Tale”): 
40 |     <ul>
41 |       <li><a target="_blank" href="mouses-tale.svg">HTML file</a></li>
42 |       <li><a target="_blank" href="mouses-tale.PNG">screenshot</a></li>
43 |   </ul></li>
44 | </ul>
45 |   <p>Return to the <a href="../">main table of contents</a>.</p>
46 | </main>
47 | <footer>
48 |   <p>Don&rsquo;t have a copy of <cite>SVG Text Layout</cite> already? 
49 |   </p>
50 |   <p>
51 |     Order a print book or <abbr title="Digital Rights Management">DRM</abbr>-free e-book <a href="http://shop.oreilly.com/product/0636920043072.do">from O&rsquo;Reilly Media</a>, or access it through your Safari Books Online subscription.</p>
52 | </footer>
53 |   </body>
54 | </html>


--------------------------------------------------------------------------------
/ch04-position-tspan-files/little-crocodile.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch04-position-tspan-files/little-crocodile.PNG


--------------------------------------------------------------------------------
/ch04-position-tspan-files/little-crocodile.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xml:lang="en-GB" width="4.3in" height="3in">
 3 |     <title>How Doth the Little Crocodile - Lewis Carroll</title>
 4 |     <desc>From Alice in Wonderland</desc>
 5 |     <style>
 6 | @import 
 7 |   url(http://fonts.googleapis.com/css?family=Miltonian+Tattoo); <!--1-->
 8 |       
 9 |         svg {
10 |             font-family: "Miltonian Tattoo", serif;
11 |             font-size: 18pt;   
12 |         }
13 |         .verse {
14 |             fill: darkGreen;
15 |             stroke: #031;
16 |             word-spacing: 2px;                             <!--2-->
17 |         }
18 |         .verse > tspan:nth-child(2n) {                     <!--3-->
19 |             fill: navy;
20 |             stroke: #013;
21 |         }
22 |     </style>
23 |     <rect fill="#CEE" width="100%" height="100%" />
24 |     <text class="verse">                                   <!--4-->
25 |         <tspan dy="1.2em" x="10"
26 |                >How doth the little crocodile</tspan>      <!--5-->
27 |         <tspan dy="1.2em" x="10" dx="1em" 
28 |                >Improve his shining tail,</tspan>          <!--6-->
29 |         <tspan dy="1.2em" x="10"
30 |                >And pour the waters of the Nile</tspan>
31 |         <tspan dy="1.2em" x="10" dx="1em"
32 |                >On every golden scale!</tspan>
33 |       </text>
34 |     <text class="verse" y="50%">                           <!--7-->
35 |         <tspan dy="1.2em" x="10"
36 |                >How cheerfully he seems to grin,</tspan>
37 |         <tspan dy="1.2em" x="10" dx="1em"
38 |                >How neatly spreads his claws,</tspan>
39 |         <tspan dy="1.2em" x="10"
40 |                >And welcomes little fishes in</tspan>
41 |         <tspan dy="1.2em" x="10" dx="1em"
42 |                >With gently smiling jaws!</tspan>
43 |     </text>
44 | </svg>


--------------------------------------------------------------------------------
/ch04-position-tspan-files/mouses-tale-re-position.svg:
--------------------------------------------------------------------------------
  1 | <svg xmlns="http://www.w3.org/2000/svg"  
  2 |      xml:lang="en-GB" width="4.3in" height="6.5in">
  3 |     <title>The Mouse's Tale - Lewis Carroll</title>
  4 |     <desc>From Alice in Wonderland</desc>
  5 |     <style>
  6 |         svg {
  7 |             font-family: serif;
  8 |             font-size: 20px;    
  9 |             border: solid thin;
 10 |         }
 11 |         .em {
 12 |             font-style: italic;
 13 |         }
 14 |         .smaller {
 15 |             font-size: 85%;
 16 |         }
 17 |     </style>
 18 |     <text>
 19 |       <tspan dy="1em" x="37%">Fury said to</tspan>
 20 |       <tspan dy="1em" x="42%">a mouse, That</tspan>
 21 |       <tspan dy="1em" x="45%">he met in the</tspan>
 22 |       <tspan dy="1em" x="47%">house, "Let</tspan>
 23 |       <tspan dy="1em" x="45%">us both go</tspan>
 24 |       <tspan dy="1em" x="43%">to law: 
 25 |                 <tspan class="em">I</tspan></tspan>
 26 |       <tspan dy="1em" x="40%">will prose-</tspan>
 27 |       <tspan dy="1em" x="40%">cute  
 28 |                 <tspan class="em">you.</tspan>&#8212;</tspan>
 29 |       <tspan class="smaller">
 30 |         <tspan dy="1em" x="41%">Come, I'll</tspan>
 31 |         <tspan dy="1em" x="43%">take no de-</tspan>
 32 |         <tspan dy="1em" x="47%">nial; We </tspan>
 33 |         <tspan dy="1em" x="49%">must have</tspan>
 34 |         <tspan dy="1em" x="50%">the trial:</tspan>
 35 |         <tspan dy="1em" x="48%">For really</tspan>
 36 |         <tspan class="smaller">
 37 |           <tspan dy="1em" x="46%">this morn-</tspan>
 38 |           <tspan dy="1em" x="45%">ing I've</tspan>
 39 |           <tspan dy="1em" x="43%">nothing</tspan>
 40 |           <tspan dy="1em" x="41%">to do."</tspan>
 41 |           <tspan dy="1em" x="39%">Said the</tspan>
 42 |           <tspan dy="1em" x="37%">mouse to</tspan>
 43 |           <tspan dy="1em" x="36%">the cur,</tspan>
 44 |           <tspan class="smaller">
 45 |             <tspan dy="1em" x="35%">"Such a</tspan>
 46 |             <tspan dy="1em" x="36%">trial, dear</tspan>
 47 |             <tspan dy="1em" x="38%">Sir, With</tspan>
 48 |             <tspan dy="1em" x="40%">no jury</tspan>
 49 |             <tspan dy="1em" x="42%">or judge</tspan>
 50 |             <tspan dy="1em" x="44%">would</tspan>
 51 |             <tspan dy="1em" x="46%">be wast-</tspan>
 52 |             <tspan dy="1em" x="47%">ing our</tspan>
 53 |             <tspan class="smaller">
 54 |               <tspan dy="1em" x="49%">breath."</tspan>
 55 |               <tspan dy="1em" x="50%">"I'll be</tspan>
 56 |               <tspan dy="1em" x="52%">judge,</tspan>
 57 |               <tspan dy="1em" x="52%">I'll be</tspan>
 58 |               <tspan dy="1em" x="51%">jury,"</tspan>
 59 |               <tspan dy="1em" x="50%">said</tspan>
 60 |               <tspan dy="1em" x="48%">cun-</tspan>
 61 |               <tspan dy="1em" x="47%">ning</tspan>
 62 |               <tspan class="smaller">
 63 |                 <tspan dy="1em" x="46%">old</tspan>
 64 |                 <tspan dy="1em" x="44%">Fury:</tspan>
 65 |                 <tspan dy="1em" x="43%">"I'll</tspan>
 66 |                 <tspan dy="1em" x="42%">try</tspan>
 67 |                 <tspan dy="1em" x="41%">the</tspan>
 68 |                 <tspan dy="1em" x="41%">whole</tspan>
 69 |                 <tspan dy="1em" x="42%">cause</tspan>
 70 |                 <tspan class="smaller">
 71 |                   <tspan dy="1em" x="44%">and</tspan>
 72 |                   <tspan dy="1em" x="46%">condemn</tspan>
 73 |                   <tspan dy="-0.7em" >you to</tspan>
 74 |                   <tspan dy="-0.7em" >death!"</tspan>
 75 |                 </tspan>
 76 |               </tspan>
 77 |             </tspan>
 78 |           </tspan>
 79 |         </tspan>
 80 |       </tspan>
 81 |     </text>
 82 | <script><![CDATA[
 83 | (function(){
 84 |     var svg = document.documentElement;
 85 |     var mid = parseFloat(getComputedStyle(svg)["width"])/2;
 86 | 
 87 |     var tspans = document.getElementsByTagName("tspan");
 88 |     var t,i,n, x, w;
 89 | 
 90 |     for (i=0, n=tspans.length; i<n; i++) {
 91 |         t = tspans[i];
 92 |         if (t.hasAttribute("x") ) {
 93 |             x = t.x.baseVal[0].value;
 94 |             w = t.getComputedTextLength();
 95 |             t.setAttribute("x", "50%");
 96 |             t.setAttribute("dx", x - mid);
 97 |             t.dx.baseVal[0].convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_EMS);
 98 |             t.dx.baseVal[0].valueInSpecifiedUnits = 
 99 |                 Math.round(100*t.dx.baseVal[0].valueInSpecifiedUnits)/100;
100 |         }
101 |     }
102 | })();
103 | ]]></script>
104 | </svg>


--------------------------------------------------------------------------------
/ch04-position-tspan-files/mouses-tale.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch04-position-tspan-files/mouses-tale.PNG


--------------------------------------------------------------------------------
/ch04-position-tspan-files/mouses-tale.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"  
 2 |      xml:lang="en-GB" width="100%" height="47.5em">
 3 |     <title>The Mouse's Tale - Lewis Carroll</title>
 4 |     <desc>From Alice in Wonderland</desc>
 5 |     <style>
 6 |         svg {
 7 |             font-family: serif;
 8 |             font-size: medium;
 9 |         }
10 |         text {
11 |             font-size: 150%;           <!--1-->
12 |         }
13 |         .em {
14 |             font-style: italic;        <!--2-->
15 |         }
16 |         .smaller {
17 |             font-size: 85%;            <!--3-->
18 |         }
19 |     </style>
20 |     <text>                             <!--4-->
21 |       <tspan dy="1em" x="50%" dx="-2.68em">Fury said to</tspan> <!--5-->
22 |       <tspan dy="1em" x="50%" dx="-1.65em">a mouse, That</tspan>
23 |       <tspan dy="1em" x="50%" dx="-1.03em">he met in the</tspan>
24 |       <tspan dy="1em" x="50%" dx="-0.62em">house, “Let</tspan>  <!--6-->
25 |       <tspan dy="1em" x="50%" dx="-1.03em">us both go</tspan>
26 |       <tspan dy="1em" x="50%" dx="-1.44em">to law: 
27 |                 <tspan class="em">I</tspan></tspan>             <!--7-->
28 |       <tspan dy="1em" x="50%" dx="-2.06em">will prose-</tspan>
29 |       <tspan dy="1em" x="50%" dx="-2.06em">cute  
30 |                 <tspan class="em">you.</tspan>—</tspan>
31 |       <tspan class="smaller">                                   <!--8-->
32 |         <tspan dy="1em" x="50%" dx="-2.19em">Come, I’ll</tspan>
33 |         <tspan dy="1em" x="50%" dx="-1.7em">take no de-</tspan>
34 |         <tspan dy="1em" x="50%" dx="-0.73em">nial; We </tspan>
35 |         <tspan dy="1em" x="50%" dx="-0.24em">must have</tspan>
36 |         <tspan dy="1em" x="50%" dx="-0em">the trial:</tspan>
37 |         <tspan dy="1em" x="50%" dx="-0.49em">For really</tspan>
38 |         <tspan class="smaller">                                 <!--9-->
39 |           <tspan dy="1em" x="50%" dx="-1.14em">this morn-</tspan>
40 |           <tspan dy="1em" x="50%" dx="-1.43em">ing I’ve</tspan>
41 |           <tspan dy="1em" x="50%" dx="-2em">nothing</tspan>
42 |           <tspan dy="1em" x="50%" dx="-2.57em">to do.”</tspan>
43 |           <tspan dy="1em" x="50%" dx="-3.14em">Said the</tspan>
44 |           <tspan dy="1em" x="50%" dx="-3.71em">mouse to</tspan>
45 |           <tspan dy="1em" x="50%" dx="-4em">the cur,</tspan>
46 |           <tspan class="smaller">
47 |             <tspan dy="1em" x="50%" dx="-5.04em">“Such a</tspan>
48 |             <tspan dy="1em" x="50%" dx="-4.7em">trial, dear</tspan>
49 |             <tspan dy="1em" x="50%" dx="-4.03em">Sir, With</tspan>
50 |             <tspan dy="1em" x="50%" dx="-3.36em">no jury</tspan>
51 |             <tspan dy="1em" x="50%" dx="-2.69em">or judge</tspan>
52 |             <tspan dy="1em" x="50%" dx="-2.02em">would</tspan>
53 |             <tspan dy="1em" x="50%" dx="-1.34em">be wast-</tspan>
54 |             <tspan dy="1em" x="50%" dx="-1.01em">ing our</tspan>
55 |             <tspan class="smaller">
56 |               <tspan dy="1em" x="50%" dx="-0.4em">breath.”</tspan>
57 |               <tspan dy="1em" x="50%" dx="-0em">“I’ll be</tspan>
58 |               <tspan dy="1em" x="50%" dx="0.79em">judge,</tspan>
59 |               <tspan dy="1em" x="50%" dx="0.79em">I’ll be</tspan>
60 |               <tspan dy="1em" x="50%" dx="0.4em">jury,”</tspan>
61 |               <tspan dy="1em" x="50%" dx="-0em">said</tspan>
62 |               <tspan dy="1em" x="50%" dx="-0.79em">cun-</tspan>
63 |               <tspan dy="1em" x="50%" dx="-1.19em">ning</tspan>
64 |               <tspan class="smaller">
65 |                 <tspan dy="1em" x="50%" dx="-1.86em">old</tspan>
66 |                 <tspan dy="1em" x="50%" dx="-2.79em">Fury:</tspan>
67 |                 <tspan dy="1em" x="50%" dx="-3.26em">“I’ll</tspan>
68 |                 <tspan dy="1em" x="50%" dx="-3.72em">try</tspan>
69 |                 <tspan dy="1em" x="50%" dx="-4.19em">the</tspan>
70 |                 <tspan dy="1em" x="50%" dx="-4.19em">whole</tspan>
71 |                 <tspan dy="1em" x="50%" dx="-3.72em">cause</tspan>
72 |                 <tspan class="smaller">
73 |                   <tspan dy="1em" x="50%" dx="-3.29em">and</tspan>
74 |                   <tspan dy="1em" x="50%" dx="-2.19em"
75 |                                     >condemn</tspan>            <!--10-->
76 |                   <tspan dy="-0.7em">you to</tspan>
77 |                   <tspan dy="-0.7em">death!”</tspan>
78 |                 </tspan>
79 |               </tspan> 
80 |             </tspan>
81 |           </tspan>
82 |         </tspan>                                 <!--11-->
83 |       </tspan>
84 |     </text>
85 | </svg>


--------------------------------------------------------------------------------
/ch04-position-tspan-files/tspan-position-absolute.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch04-position-tspan-files/tspan-position-absolute.PNG


--------------------------------------------------------------------------------
/ch04-position-tspan-files/tspan-position-absolute.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"  
 2 |      xml:lang="en" width="10cm" height="2.5cm">
 3 |     <title>Positioning tspan</title>
 4 |     <style type="text/css">
 5 |         svg {
 6 |             font-family: serif;
 7 |             font-size: 12mm;
 8 |             fill: navy;
 9 |         }
10 |         .em {
11 |             fill: royalBlue;
12 |         }
13 |         .strong {
14 |             stroke: navy;
15 |             font-style: italic;
16 |         }
17 |     </style>
18 |     <rect fill="#CEE" width="100%" height="100%" />
19 |     <text x="5mm" y="2.1cm" >One, 
20 |         <tspan class="em" y="1.6cm">Two,</tspan>
21 |         <tspan class="strong em" y="1.1cm">Three!</tspan>
22 |     </text>
23 | </svg>


--------------------------------------------------------------------------------
/ch04-position-tspan-files/tspan-position-percentage-bottom.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"  
 2 |      xml:lang="en" width="10cm" height="2.5cm">
 3 |     <title>Bottom-aligned tspan Position</title>
 4 |     <style type="text/css">
 5 |         svg {
 6 |             font-family: serif;
 7 |             font-size: 12mm;
 8 |             fill: navy;
 9 |         }
10 |         .em {
11 |             fill: royalBlue;
12 |         }
13 |         .strong {
14 |             stroke: navy;
15 |             font-style: italic;
16 |         }
17 |     </style>
18 |     <rect fill="#CEE" width="100%" height="100%" />
19 |     <text x="5mm" y="100%" dy="-0.4cm">One, 
20 |         <tspan class="em" dy="-0.5cm">Two,</tspan>
21 |         <tspan class="strong em" dy="-0.5cm">Three!</tspan>
22 |     </text>
23 | </svg>


--------------------------------------------------------------------------------
/ch04-position-tspan-files/tspan-position-percentage-compare.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch04-position-tspan-files/tspan-position-percentage-compare.PNG


--------------------------------------------------------------------------------
/ch04-position-tspan-files/tspan-position-percentage-compare.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>SVG Resize Adjust</title>
 6 |     <style>
 7 |         body {
 8 |             background-color: royalBlue;
 9 |             width: 20cm;
10 |             display: table;
11 |             margin: 0; padding: 0;
12 |             border-collapse: collapse;
13 |         }
14 |         .row {
15 |             display: table-row;
16 |         }
17 |         object {
18 |             display: table-cell;
19 |             width: 9.5cm;
20 |             height: 2.5cm;
21 |             margin: 0.25cm;
22 |         }
23 |         .stretch object {
24 |             height: 7.5cm;
25 |         }
26 |         .squish object {
27 |             height: 1.5cm;
28 |         }
29 |     </style>
30 | </head>
31 | <body>
32 |     <div class="row">
33 |         <object type="image/svg+xml"
34 |                 data="tspan-position-percentage-offset.svg">
35 |         </object>
36 |         <object type="image/svg+xml"
37 |                 data="tspan-position-percentage-bottom.svg">
38 |         </object>
39 |     </div>
40 |     <div class="row stretch">
41 |         <object type="image/svg+xml"
42 |                 data="tspan-position-percentage-offset.svg">
43 |         </object>
44 |         <object type="image/svg+xml"
45 |                 data="tspan-position-percentage-bottom.svg">
46 |         </object>
47 |     </div>
48 |     <div class="row squish">
49 |         <object type="image/svg+xml"
50 |                 data="tspan-position-percentage-offset.svg">
51 |         </object>
52 |         <object type="image/svg+xml"
53 |                 data="tspan-position-percentage-bottom.svg">
54 |         </object>
55 |     </div>
56 | </body>
57 | </html>


--------------------------------------------------------------------------------
/ch04-position-tspan-files/tspan-position-percentage-offset.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"  
 2 |      xml:lang="en" width="10cm" height="2.5cm">
 3 |     <title>Centering tspan Position</title>
 4 |     <style type="text/css">
 5 |         svg {
 6 |             font-family: serif;
 7 |             font-size: 12mm;
 8 |             fill: navy;
 9 |         }
10 |         .em {
11 |             fill: royalBlue;
12 |         }
13 |         .strong {
14 |             stroke: navy;
15 |             font-style: italic;
16 |         }
17 |     </style>
18 |     <rect fill="#CEE" width="100%" height="100%" />
19 |     <text x="5mm" y="50%" dy="0.85cm">One, 
20 |         <tspan class="em" dy="-0.5cm">Two,</tspan>
21 |         <tspan class="strong em" dy="-0.5cm">Three!</tspan>
22 |     </text>
23 | </svg>


--------------------------------------------------------------------------------
/ch04-position-tspan-files/tspan-position-relative.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"   
 2 |      xml:lang="en" width="10cm" height="2.5cm">
 3 |     <title>Adjusting tspan Position</title>
 4 |     <style type="text/css">
 5 |         svg {
 6 |             font-family: serif;
 7 |             font-size: 12mm;
 8 |             fill: navy;
 9 |         }
10 |         .em {
11 |             fill: royalBlue;
12 |         }
13 |         .strong {
14 |             stroke: navy;
15 |             font-style: italic;
16 |         }
17 |     </style>
18 |     <rect fill="#CEE" width="100%" height="100%" />
19 |     <text x="5mm" y="2.1cm" >One, 
20 |         <tspan class="em" dy="-0.5cm">Two,</tspan>
21 |         <tspan class="strong em" dy="-0.5cm">Three!</tspan>
22 |     </text>
23 | </svg>


--------------------------------------------------------------------------------
/ch05-position-char-files/bam-boom.FF.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch05-position-char-files/bam-boom.FF.PNG


--------------------------------------------------------------------------------
/ch05-position-char-files/bam-boom.IE.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch05-position-char-files/bam-boom.IE.PNG


--------------------------------------------------------------------------------
/ch05-position-char-files/bam-boom.gradients.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch05-position-char-files/bam-boom.gradients.PNG


--------------------------------------------------------------------------------
/ch05-position-char-files/bam-boom.gradients.xcf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch05-position-char-files/bam-boom.gradients.xcf


--------------------------------------------------------------------------------
/ch05-position-char-files/bam-boom.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      xml:lang="en"
 4 |      width="400px" height="400px" viewBox="0 0 400 400">
 5 |     <title>Explosive Text</title>
 6 |     <style type="text/css">
 7 |         .dynamic-lettering {
 8 |             font-family: "Gill Sans Ultra Bold", 
 9 |                          "Gill Sans", "Gill Sans MT",
10 |                          "Showcard Gothic", 
11 |                          "Cooper Black", "Cooper",
12 |                          "Arial Black", "Arial",  
13 |                          "Impact",  sans-serif;                <!--1-->
14 |             font-size: 100px;
15 |             font-weight: 900;                                  <!--2-->
16 |             fill: url(#yellow-red) orangeRed;
17 |             stroke: url(#red-brown) red;
18 |             stroke-width: 3px;
19 |         }
20 |             
21 |     </style>
22 |     <defs>
23 |         <linearGradient id="yellow-red"
24 |                         gradientTransform="rotate(90)">
25 |             <stop stop-color="yellow" offset="0"/>
26 |             <stop stop-color="red" offset="0.8"/>
27 |             <stop stop-color="maroon" offset="1.0"/>           <!--3-->
28 |         </linearGradient>
29 |         <linearGradient id="red-brown"
30 |                         gradientTransform="rotate(90)" >
31 |             <stop stop-color="orangeRed" offset="0"/>
32 |             <stop stop-color="maroon" offset="1.0"/>
33 |         </linearGradient>
34 |     </defs>
35 |     <rect height="100%" width="100%" fill="aquamarine"/>
36 |     <g class="dynamic-lettering">
37 |         <text transform="translate(40,165) rotate(-15)"
38 |               dy="0 20 -30 20"
39 |               >BAM!</text>                                     <!--4-->
40 |         <text x="75" y="375" 
41 |               dx="0   -70  -30   8 -25"
42 |               dy="0   -70  -80  50  45" 
43 |           rotate="-70 -15   35  10  30">BOOM!</text>           <!--5-->
44 |     </g>
45 | </svg>


--------------------------------------------------------------------------------
/ch05-position-char-files/character-position-relative.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xml:lang="en" width="4in" height="1in">
 3 |     <title>Relative Positioning of 
 4 |         Individual Characters</title>
 5 |     <style type="text/css">
 6 |         svg {
 7 |             font: bold italic 0.5in serif;
 8 |             fill: royalBlue;
 9 |             stroke: navy;
10 |         }
11 |     </style>
12 |     <rect fill="#CEE" stroke="none" width="100%" height="100%" />
13 |     <text x="0" y="0.8in"
14 |           dx="0  0.5in 0.5in  0.5in 0.5in  0.5in" 
15 |           dy="0 -0.4in 0.4in -0.4in 0.4in -0.4in"
16 |           >Wiggle</text>
17 | </svg>


--------------------------------------------------------------------------------
/ch05-position-char-files/character-position.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch05-position-char-files/character-position.PNG


--------------------------------------------------------------------------------
/ch05-position-char-files/character-position.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xml:lang="en" width="4in" height="1in">
 3 |     <title>Positioning Individual Characters</title>
 4 |     <style type="text/css">
 5 |         svg {
 6 |             font: bold italic 0.5in serif;
 7 |             fill: royalBlue;
 8 |             stroke: navy;
 9 |         }
10 |     </style>
11 |     <rect fill="#CEE" stroke="none" width="100%" height="100%" />
12 |     <text x="0     1.0in 1.6in 2.2in 3.0in 3.6in" 
13 |           y="0.8in 0.4in 0.8in 0.4in 0.8in 0.4in"
14 |           >Wiggle</text>
15 | </svg>


--------------------------------------------------------------------------------
/ch05-position-char-files/character-rotation.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch05-position-char-files/character-rotation.PNG


--------------------------------------------------------------------------------
/ch05-position-char-files/character-rotation.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xml:lang="en" width="4in" height="0.7in">
 3 |     <title>Rotating Individual Characters</title>
 4 |     <style type="text/css">
 5 |         svg {
 6 |             font: bold italic 0.5in serif;
 7 |             fill: royalBlue;
 8 |             stroke: navy;
 9 |         }
10 |     </style>
11 |     <rect fill="#CEE" stroke="none" width="100%" height="100%" />
12 |     <text x="0.2in" y="0.5in" rotate="-45 0 15 -15 15"
13 |           >Jiggle
14 |         <tspan rotate="-25">giggle</tspan>
15 |         jig!
16 |     </text>
17 | </svg>


--------------------------------------------------------------------------------
/ch05-position-char-files/character-tspan-position.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch05-position-char-files/character-tspan-position.PNG


--------------------------------------------------------------------------------
/ch05-position-char-files/character-tspan-position.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xml:lang="en" width="10cm" height="3.5cm">
 3 |     <title>Character and tspan Position adjustments</title>
 4 |     <style type="text/css">
 5 |         svg {
 6 |             font-family: serif;
 7 |             font-size: 12mm;
 8 |             fill: navy;
 9 |         }
10 |         .em {
11 |             fill: royalBlue;
12 |         }
13 |         .strong {
14 |             stroke: navy;
15 |             font-style: italic;
16 |         }
17 |     </style>
18 |     <rect fill="#CEE" width="100%" height="100%" />
19 |     <text x="5mm" y="3cm"
20 |           dy="-30 30 -30 30 -30 30 -30 30 -30 30 -30 30 -30 30"
21 |           >One, 
22 |         <tspan class="em" dy="-15" dx="3mm">Two,</tspan>
23 |         <tspan class="strong em" dx="3mm"
24 |                dy="-15 10 10 10 10"
25 |                >Three!</tspan>
26 |     </text>
27 | </svg>


--------------------------------------------------------------------------------
/ch05-position-char-files/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>ch05 Off-Kilter Characters — Supplementary Material: SVG Text Layout</title>
 5 |     <link rel="stylesheet" href="../index.css" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   </head>
 8 |   <body>
 9 | <header>
10 |   <h1><a href="../"><cite>SVG Text Layout</cite></a></h1>
11 |   <p>Example code for the O&rsquo;Reilly Media book</p>
12 |   <p>by Amelia Bellamy-Royds &amp; Kurt Cagle</p>
13 | </header>
14 | <main>
15 |   <h1>Off-Kilter Characters</h1>
16 |   <p>Chapter 5 explores SVG’s ability to control the position and orientation of individual text characters.</p>
17 |   <p>
18 |   The links below will open the live example files or high-res PNG or JPEG screenshots in a new browser tab.  Alternatively, <a href="https://github.com/oreillymedia/SVG_Text_Layout">you can download the entire collection as a zip archive or fork it as a GitHub repository</a>.  Be sure to read the <a href="http://shop.oreilly.com/category/customer-service/faq-examples.do">O&rsquo;Reilly Media policy on the use of example code</a>.
19 |   </p>
20 | <ul>
21 |   <li>Example 5-1 &amp; Figure 5-1 (positioning individual characters): 
22 |     <ul>
23 |       <li><a target="_blank" href="character-position.svg">SVG file</a></li>
24 |       <li><a target="_blank" href="character-position.PNG">screenshot</a></li>
25 |       <li><a target="_blank" href="character-position-relative.svg">SVG file, using relative attributes</a></li>
26 |   </ul></li>
27 |   <li>Example 5-2 &amp; Figure 5-2 (conflicting character positions on nested elements): 
28 |     <ul>
29 |       <li><a target="_blank" href="character-tspan-position.svg">SVG file</a></li>
30 |       <li><a target="_blank" href="character-tspan-position.PNG">screenshot</a></li>
31 |   </ul></li>
32 |   <li>Example 5-3 &amp; Figure 5-3 (rotating characters): 
33 |     <ul>
34 |       <li><a target="_blank" href="character-rotation.svg">SVG file</a></li>
35 |       <li><a target="_blank" href="character-rotation.PNG">screenshot</a></li>
36 |   </ul></li>
37 |   <li>Example 5-4 &amp; Figure 5-4 (comic book text): 
38 |     <ul>
39 |       <li><a target="_blank" href="bam-boom.svg">SVG file</a></li>
40 |       <li><a target="_blank" href="bam-boom.FF.PNG">screenshot, in Firefox</a></li>
41 |       <li><a target="_blank" href="bam-boom.IE.PNG">screenshot, in Internet Explorer</a> (Chromium and WebKit are similar)</li>
42 |       <li><a target="_blank" href="bam-boom.gradients.PNG">side-by-side screenshots comparing the gradient effect</a></li>
43 |       <li>See also <a href="../ch10-fonts-files/">Chapter 10</a> for examples of font effects on layout</li>
44 |   </ul></li>
45 | </ul>
46 |   <p>Return to the <a href="../">main table of contents</a>.</p>
47 | </main>
48 | <footer>
49 |   <p>Don&rsquo;t have a copy of <cite>SVG Text Layout</cite> already? 
50 |   </p>
51 |   <p>
52 |     Order a print book or <abbr title="Digital Rights Management">DRM</abbr>-free e-book <a href="http://shop.oreilly.com/product/0636920043072.do">from O&rsquo;Reilly Media</a>, or access it through your Safari Books Online subscription.</p>
53 | </footer>
54 |   </body>
55 | </html>


--------------------------------------------------------------------------------
/ch06-text-anchor-files/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>ch06 Casting Anchor — Supplementary Material: SVG Text Layout</title>
 5 |     <link rel="stylesheet" href="../index.css" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   </head>
 8 |   <body>
 9 | <header>
10 |   <h1><a href="../"><cite>SVG Text Layout</cite></a></h1>
11 |   <p>Example code for the O&rsquo;Reilly Media book</p>
12 |   <p>by Amelia Bellamy-Royds &amp; Kurt Cagle</p>
13 | </header>
14 | <main>
15 |   <h1>Casting Anchor</h1>
16 |   <p>Chapter 6 introduces the <code>text-anchor</code> property and discusses how it affects the alignment of text.</p>
17 |   <p>
18 |   The links below will open the live example files or high-res PNG or JPEG screenshots in a new browser tab.  Alternatively, <a href="https://github.com/oreillymedia/SVG_Text_Layout">you can download the entire collection as a zip archive or fork it as a GitHub repository</a>.  Be sure to read the <a href="http://shop.oreilly.com/category/customer-service/faq-examples.do">O&rsquo;Reilly Media policy on the use of example code</a>.
19 |   </p>
20 | <ul>
21 |   <li>Example 6-1 &amp; Figure 6-1 (<code>text-anchor</code> basics): 
22 |     <ul>
23 |       <li><a target="_blank" href="text-anchor.svg">SVG file</a></li>
24 |       <li><a target="_blank" href="text-anchor.PNG">screenshot</a></li>
25 |   </ul></li>
26 |   <li>Example 6-2 &amp; Figure 6-2 (text chunks): 
27 |     <ul>
28 |       <li><a target="_blank" href="text-chunk-anchor.svg">SVG file</a></li>
29 |       <li><a target="_blank" href="text-chunk-anchor.PNG">screenshot</a></li>
30 |   </ul></li>
31 |   <li>Figure 6-3 (fixing whitespace issue with an extra text chunk): 
32 |     <ul>
33 |       <li><a target="_blank" href="text-chunk-anchor-fix-whitespace.svg">SVG file</a></li>
34 |       <li><a target="_blank" href="text-chunk-anchor-fix-whitespace.PNG">screenshot</a></li>
35 |   </ul></li>
36 | </ul>
37 |   <p>Return to the <a href="../">main table of contents</a>.</p>
38 | </main>
39 | <footer>
40 |   <p>Don&rsquo;t have a copy of <cite>SVG Text Layout</cite> already? 
41 |   </p>
42 |   <p>
43 |     Order a print book or <abbr title="Digital Rights Management">DRM</abbr>-free e-book <a href="http://shop.oreilly.com/product/0636920043072.do">from O&rsquo;Reilly Media</a>, or access it through your Safari Books Online subscription.</p>
44 | </footer>
45 |   </body>
46 | </html>


--------------------------------------------------------------------------------
/ch06-text-anchor-files/text-anchor.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch06-text-anchor-files/text-anchor.PNG


--------------------------------------------------------------------------------
/ch06-text-anchor-files/text-anchor.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      xml:lang="en"
 4 |      width="4.3in" height="1.72in" viewBox="0 0 400 160">
 5 |     <title>Anchoring SVG Text</title>
 6 |     <style type="text/css">
 7 |         svg {
 8 |             font: bold 50px serif;
 9 |         }
10 |     </style>
11 |     <rect fill="#CEE" width="100%" height="100%" />
12 |     <line stroke="gray" x1="50%" x2="50%" y2="100%" />
13 |     
14 |     <text text-anchor="start" fill="darkGreen" 
15 |           x="50%" y="1em" >Start</text>
16 |     <text text-anchor="middle" fill="navy" 
17 |           x="50%" y="2em" >Middle</text>
18 |     <text text-anchor="end" fill="darkRed" 
19 |           x="50%" y="3em" >End</text>
20 | </svg>


--------------------------------------------------------------------------------
/ch06-text-anchor-files/text-chunk-anchor-IE-test.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      xml:lang="en"
 4 |      width="4.3in" height="2.4in" viewBox="0 0 400 225">
 5 |     <title>Anchoring Custom-Positioned Text</title>
 6 |     <style type="text/css">
 7 |         svg {
 8 |             font: bold 50px serif;
 9 |         }
10 |     </style>
11 |     <rect fill="#CEE" width="100%" height="100%" />
12 |     
13 |     <g text-anchor="start" 
14 |        fill="darkGreen" transform="translate(20,0)">
15 |         <g id="sample"> 
16 |             <line stroke="gray" y2="100%" />
17 |             <text x="0 0 0" y="40"
18 |                   dy="0 25 25 25 25 25"
19 |                   > Anchor <tspan 
20 |                 x="0" dy="1em"> SVG</tspan> </text>
21 |         </g>
22 |     </g>
23 |     <use xlink:href="#sample" text-anchor="middle"
24 |          fill="navy" transform="translate(200,0)" /> 
25 |     <use xlink:href="#sample" text-anchor="end"
26 |          fill="darkRed" transform="translate(380,0)" />
27 | </svg>


--------------------------------------------------------------------------------
/ch06-text-anchor-files/text-chunk-anchor-dx.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      xml:lang="en"
 4 |      width="4.3in" height="2.4in" viewBox="0 0 400 225">
 5 |     <title>Anchoring Custom-Positioned Text</title>
 6 |     <style type="text/css">
 7 |         svg {
 8 |             font: bold 50px serif;
 9 |         }
10 |     </style>
11 |     <rect fill="#CEE" width="100%" height="100%" />
12 |     
13 |     <g text-anchor="start" 
14 |        fill="darkGreen" transform="translate(20,0)">       <!--1-->
15 |         <g id="sample">                                    <!--2-->
16 |             <line stroke="gray" y2="100%" />               <!--3-->
17 |             <text x="0 0 0" y="40"
18 |                   dx="10 -10 10 -10 10 -10"
19 |                   dy="0 25 25 25 25 25"
20 |                   >Anchor                                  <!--4-->
21 |                 <tspan x="0" dy="1em" dx="10">SVG</tspan></text>   <!--5-->
22 |         </g>
23 |     </g>
24 |     <use xlink:href="#sample" text-anchor="middle"
25 |          fill="navy" transform="translate(200,0)" />       <!--6-->
26 |     <use xlink:href="#sample" text-anchor="end"
27 |          fill="darkRed" transform="translate(380,0)" />
28 | </svg>


--------------------------------------------------------------------------------
/ch06-text-anchor-files/text-chunk-anchor-fix-whitespace.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch06-text-anchor-files/text-chunk-anchor-fix-whitespace.PNG


--------------------------------------------------------------------------------
/ch06-text-anchor-files/text-chunk-anchor-fix-whitespace.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      xml:lang="en"
 4 |      width="4.3in" height="2.4in" viewBox="0 0 400 225">
 5 |     <title>Anchoring Custom-Positioned Text</title>
 6 |     <style type="text/css">
 7 |         svg {
 8 |             font: bold 50px serif;
 9 |         }
10 |     </style>
11 |     <rect fill="#CEE" width="100%" height="100%" />
12 |     
13 |     <g text-anchor="start" 
14 |        fill="darkGreen" transform="translate(20,0)">
15 |         <g id="sample"> 
16 |             <line stroke="gray" y2="100%" />
17 |             <text x="0 0 0" y="40"
18 |                   dy="0 25 25 25 25 25"
19 |                   >Anchor<tspan 
20 |                 x="0 0" dy="0 1em"> SVG</tspan></text>
21 |         </g>
22 |     </g>
23 |     <use xlink:href="#sample" text-anchor="middle"
24 |          fill="navy" transform="translate(200,0)" /> 
25 |     <use xlink:href="#sample" text-anchor="end"
26 |          fill="darkRed" transform="translate(380,0)" />
27 | </svg>


--------------------------------------------------------------------------------
/ch06-text-anchor-files/text-chunk-anchor.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch06-text-anchor-files/text-chunk-anchor.PNG


--------------------------------------------------------------------------------
/ch06-text-anchor-files/text-chunk-anchor.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      xml:lang="en"
 4 |      width="4.3in" height="2.4in" viewBox="0 0 400 225">
 5 |     <title>Anchoring Custom-Positioned Text</title>
 6 |     <style type="text/css">
 7 |         svg {
 8 |             font: bold 50px serif;
 9 |         }
10 |     </style>
11 |     <rect fill="#CEE" width="100%" height="100%" />
12 |     
13 |     <g text-anchor="start" 
14 |        fill="darkGreen" transform="translate(20,0)">       <!--1-->
15 |         <g id="sample">                                    <!--2-->
16 |             <line stroke="gray" y2="100%" />               <!--3-->
17 |             <text x="0 0 0" y="40"
18 |                   dy="0 25 25 25 25 25"
19 |                   >Anchor                                  <!--4-->
20 |                 <tspan x="0" dy="1em">SVG</tspan></text>   <!--5-->
21 |         </g>
22 |     </g>
23 |     <use xlink:href="#sample" text-anchor="middle"
24 |          fill="navy" transform="translate(200,0)" />       <!--6-->
25 |     <use xlink:href="#sample" text-anchor="end"
26 |          fill="darkRed" transform="translate(380,0)" />
27 | </svg>


--------------------------------------------------------------------------------
/ch06-text-anchor-files/whitespace-test.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"
 2 |      xml:space="preserve" width="100%" height="75px"
 3 |         font-size="30px"
 4 |         fill="darkRed">
 5 |     <rect fill="lightSkyBlue" height="100%" width="100%" />
 6 |     <text dy="1em" >  
 7 |         Left aligned 
 8 |         <tspan xml:space="preserve">with…     spaces?</tspan>  
 9 |     </text>
10 |     <text dy="2em" x="100%" text-anchor="end" xml:space="preserve">
11 |         Right aligned 
12 |         <tspan>with…     spaces?</tspan>  
13 |     </text>
14 | </svg>


--------------------------------------------------------------------------------
/ch07-rtl-vertical-files/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>ch07 Anchoring in International Waters — Supplementary Material: SVG Text Layout</title>
 5 |     <link rel="stylesheet" href="../index.css" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   </head>
 8 |   <body>
 9 | <header>
10 |   <h1><a href="../"><cite>SVG Text Layout</cite></a></h1>
11 |   <p>Example code for the O&rsquo;Reilly Media book</p>
12 |   <p>by Amelia Bellamy-Royds &amp; Kurt Cagle</p>
13 | </header>
14 | <main>
15 |   <h1>Anchoring in International Waters</h1>
16 |   <p>Chapter 7 considers the particular issues of multidirectional text, including right-to-left horizontal text and vertical text.</p>
17 |   <p>
18 |   The links below will open the live example files or high-res PNG or JPEG screenshots in a new browser tab.  Alternatively, <a href="https://github.com/oreillymedia/SVG_Text_Layout">you can download the entire collection as a zip archive or fork it as a GitHub repository</a>.  Be sure to read the <a href="http://shop.oreilly.com/category/customer-service/faq-examples.do">O&rsquo;Reilly Media policy on the use of example code</a>.
19 |   </p>
20 | <ul>
21 |   <li>Example 7-1 &amp; Figure 7-1 (<code>text-anchor</code> and text direction): 
22 |     <ul>
23 |       <li><a target="_blank" href="text-direction.html">HTML file</a></li>
24 |       <li><a target="_blank" href="text-direction.PNG">screenshot</a></li>
25 |   </ul></li>
26 |   <li>Example 7-2 &amp; Figure 7-2 (vertical text): 
27 |     <ul>
28 |       <li><a target="_blank" href="vertical-modes.svg">SVG file</a></li>
29 |       <li><a target="_blank" href="vertical-modes.svg">SVG file, with future-friendly CSS compatibility rules</a></li>
30 |       <li><a target="_blank" href="vertical-modes.PNG">screenshot</a></li>
31 |   </ul></li>
32 |   <li>Example 7-3 &amp; Figure 7-3 (simulating vertical writing mode with character positioning attributes): 
33 |     <ul>
34 |       <li><a target="_blank" href="vertical-modes-fallback.svg">SVG file</a></li>
35 |       <li><a target="_blank" href="vertical-modes-fallback.PNG">screenshot</a></li>
36 |   </ul></li>
37 | </ul>
38 |   <p>Return to the <a href="../">main table of contents</a>.</p>
39 | </main>
40 | <footer>
41 |   <p>Don&rsquo;t have a copy of <cite>SVG Text Layout</cite> already? 
42 |   </p>
43 |   <p>
44 |     Order a print book or <abbr title="Digital Rights Management">DRM</abbr>-free e-book <a href="http://shop.oreilly.com/product/0636920043072.do">from O&rsquo;Reilly Media</a>, or access it through your Safari Books Online subscription.</p>
45 | </footer>
46 |   </body>
47 | </html>


--------------------------------------------------------------------------------
/ch07-rtl-vertical-files/text-direction-2column.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8"/>
 5 |     <title>Multilingual SVG Text Direction and Layout</title>
 6 |     <style>
 7 |         table {
 8 |             width: 100%;
 9 |             table-layout: fixed;
10 |             border-collapse: collapse;
11 |         }
12 |         th:nth-child(n-2) {
13 |             width: 3em;
14 |         }
15 |         td, th {
16 |             border: solid royalBlue;   
17 |             padding: 0;
18 |             background: #DEF;
19 |         }
20 |         svg {
21 |             height: 5em;
22 |             width: 100%;
23 |         }
24 |         line {
25 |             stroke: gray;
26 |         }
27 |         text {
28 |             fill: currentColor;
29 |         }
30 |         .start  { color: darkGreen; }
31 |         .middle { color: navy; }
32 |         .end    { color: darkRed; }
33 |     </style>
34 | </head>
35 | <body>
36 | <script>
37 | (function(){
38 |     var svgNS = "http://www.w3.org/2000/svg";
39 |     var doc = document;
40 |     
41 |     var strings = [ "Hello World!",
42 |                     "مرحبا أيها العالم!",
43 |                     "Γειά Σου Κόσμε!",
44 |                     "שלום העולם!" ],
45 |         directions = [ "ltr", "rtl" ],
46 |         anchors = [ "start", "middle", "end" ];
47 |     
48 |     var table = doc.createElement("table"),
49 |        // thead = doc.createElement("thead"),
50 |         tbody = doc.createElement("tbody");
51 |     //table.insertBefore(thead, null);
52 |     table.insertBefore(tbody, null);
53 |     
54 |     //thead.insertBefore(doc.createElement("th"), null);
55 |     
56 |     var row, rowh, rowsub, cell, svg, line, text;
57 |     for (var i=0, a=anchors.length; i<a; i++){        
58 |         for (var j=0, d=directions.length; j<d; j++) {
59 |             row = doc.createElement("tr");
60 |             rowh = doc.createElement("th");
61 |             rowh.textContent = anchors[i];
62 |             row.setAttribute("class", anchors[i]);
63 |             row.insertBefore(rowh, null);
64 |             rowsub = doc.createElement("th");
65 |             rowsub.textContent = directions[j];
66 |             row.insertBefore(rowsub, null);
67 |             
68 |             cell = doc.createElement("td");            
69 |             row.insertBefore(cell, null);
70 |             
71 |             svg = doc.createElementNS(svgNS, "svg");
72 |             svg.setAttribute("direction", directions[j]);
73 |             svg.setAttribute("text-anchor", anchors[i]);
74 |             cell.insertBefore(svg, null);
75 |             
76 |             line = doc.createElementNS(svgNS, "line");
77 |             line.setAttribute("x1", "50%");
78 |             line.setAttribute("x2", "50%");
79 |             line.setAttribute("y2", "100%");
80 |             svg.insertBefore(line, null);
81 |             
82 |             for (var k=0, s=strings.length; k<s; k++) {
83 |                 text = doc.createElementNS(svgNS, "text");
84 |                 text.textContent = strings[k];
85 |                 text.setAttribute("x", "50%");
86 |                 text.setAttribute("y", (k+1.5) + "em");
87 |                 svg.insertBefore(text, null);
88 |             }
89 |             tbody.insertBefore(row, null);
90 |         }
91 |     }
92 |     doc.body.insertBefore(table, null);
93 | })();
94 | </script>
95 | </body>
96 | </html>


--------------------------------------------------------------------------------
/ch07-rtl-vertical-files/text-direction.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch07-rtl-vertical-files/text-direction.PNG


--------------------------------------------------------------------------------
/ch07-rtl-vertical-files/text-direction.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8"/>
 5 |     <title>Multilingual SVG Text Direction and Layout</title>
 6 |     <style>
 7 |         table {
 8 |             width: 100%;
 9 |             table-layout: fixed;
10 |             border-collapse: collapse;
11 |         }
12 |         th:nth-child(n-2) {
13 |             width: 3em;
14 |         }
15 |         td, th {
16 |             border: solid royalBlue;   
17 |             padding: 0;
18 |             background: #DEF;
19 |         }
20 |         svg {
21 |             height: 5em;
22 |             width: 100%;
23 |         }
24 |         line {
25 |             stroke: gray;
26 |         }
27 |         text {
28 |             fill: currentColor;
29 |         }
30 |         .start  { color: darkGreen; }
31 |         .middle { color: navy; }
32 |         .end    { color: darkRed; }
33 |     </style>
34 | </head>
35 | <body>
36 | <script>
37 | (function(){
38 |     var svgNS = "http://www.w3.org/2000/svg";
39 |     var doc = document;
40 |     
41 |     var strings = [ "Hello, World!",
42 |                     "مرحبا أيها العالم!",
43 |                     "Γειά Σου Κόσμε!",
44 |                     "שלום העולם!" ],
45 |         directions = [ "ltr", "rtl" ],
46 |         anchors = [ "start", "middle", "end" ];
47 |     
48 |     var table = doc.createElement("table"),
49 |         tbody = doc.createElement("tbody");
50 |     table.insertBefore(tbody, null);
51 |     
52 |     var row, rowh, rowsub, cell, svg, line, text;
53 |     for (var i=0, a=anchors.length; i<a; i++){        
54 |         for (var j=0, d=directions.length; j<d; j++) {
55 |             row = doc.createElement("tr");
56 |             rowh = doc.createElement("th");
57 |             rowh.textContent = anchors[i];
58 |             row.setAttribute("class", anchors[i]);
59 |             row.insertBefore(rowh, null);
60 |             rowsub = doc.createElement("th");
61 |             rowsub.textContent = directions[j];
62 |             row.insertBefore(rowsub, null);
63 |             
64 |             cell = doc.createElement("td");            
65 |             row.insertBefore(cell, null);
66 |             
67 |             svg = doc.createElementNS(svgNS, "svg");
68 |             svg.setAttribute("direction", directions[j]);
69 |             svg.setAttribute("text-anchor", anchors[i]);
70 |             cell.insertBefore(svg, null);
71 |             
72 |             line = doc.createElementNS(svgNS, "line");
73 |             line.setAttribute("x1", "50%");
74 |             line.setAttribute("x2", "50%");
75 |             line.setAttribute("y2", "100%");
76 |             svg.insertBefore(line, null);
77 |             
78 |             for (var k=0, s=strings.length; k<s; k++) {
79 |                 text = doc.createElementNS(svgNS, "text");
80 |                 text.textContent = strings[k];
81 |                 text.setAttribute("x", "50%");
82 |                 text.setAttribute("y", (k+1.5) + "em");
83 |                 svg.insertBefore(text, null);
84 |             }
85 |             tbody.insertBefore(row, null);
86 |         }
87 |     }
88 |     doc.body.insertBefore(table, null);
89 | })();
90 | </script>
91 | </body>
92 | </html>


--------------------------------------------------------------------------------
/ch07-rtl-vertical-files/vertical-modes-fallback.Chrome.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch07-rtl-vertical-files/vertical-modes-fallback.Chrome.PNG


--------------------------------------------------------------------------------
/ch07-rtl-vertical-files/vertical-modes-fallback.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch07-rtl-vertical-files/vertical-modes-fallback.PNG


--------------------------------------------------------------------------------
/ch07-rtl-vertical-files/vertical-modes-fallback.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      width="4.3in" height="4.5in">
 4 |     <title>Faking Vertical Writing Modes</title>
 5 |     <style type="text/css">
 6 |         svg {
 7 |             font: 20px sans-serif;
 8 |             stroke-width: 2px;
 9 |         }
10 |         text {
11 |             fill: currentColor;
12 |         }
13 |     </style>
14 |     <defs>
15 |         <circle id="anchor" r="3px" fill="currentColor"
16 |                 stroke="currentColor" fill-opacity="0.5"/>
17 |     </defs>
18 |     <rect fill="#CEE" width="100%" height="100%" />
19 |     <g color="darkGreen" text-anchor="start">
20 |         <g id="sample" fill="currentColor" >
21 |             <use xlink:href="#anchor" x="1em" y="2em" />
22 |             <text x="1em" y="2em" >Hi, SVG World!</text>     <!--1-->
23 |             
24 |             <use xlink:href="#anchor" x="2.5em" y="3em" />
25 |             <text x="2.5em" y="3em" >您好SVG世界！</text>
26 |         </g>
27 |         <g id="rotated" transform="translate(0,50)" > 
28 |             <use xlink:href="#anchor" x="1em" y="2em" />
29 |             <text x="2em" y="-1em" transform="rotate(90)"
30 |                   dy="1ex"
31 |                   >Hi, SVG World!</text>                      <!--2-->
32 |             
33 |             <use xlink:href="#anchor" x="2.5em" y="3em" />
34 |             <text x="3em" y="-2.5em" transform="rotate(90)" 
35 |                   rotate="-90 -90 0 0 0 -90 -90 -90"
36 |                   dx="1em 0 -0.7em 0 0 1em" dy="1ex"
37 |                   >您好SVG世界！</text>                         <!--3-->
38 |         </g> 
39 |         <g id="upright" transform="translate(100,50)" > 
40 |             <use xlink:href="#anchor" x="1em" y="2em" />
41 |             <text  x="1em 1em 1em 1em 1em 1em 1em
42 |                       1em 1em 1em 1em 1em 1em 1em" 
43 |                   dy="1em 1em 1em 1em 1em 1em 1em 
44 |                       1em 1em 1em 1em 1em 1em 1em"
45 |                   text-anchor="middle"
46 |                   y="2em" >Hi, SVG World!</text>              <!--4-->
47 |             
48 |             <use xlink:href="#anchor" x="2.5em" y="3em" />
49 |             <text  x="2.5em 2.5em 2.5em 2.5em 2.5em 2.5em 2.5em 
50 |                       2.5em" 
51 |                   dy="1em 1em 1em 1em 1em 1em 1em 1em" 
52 |                   text-anchor="middle"
53 |                   y="3em" >您好SVG世界！</text>                 <!--5-->
54 |         </g> 
55 |     </g>
56 |     <g color="darkRed" text-anchor="end"
57 |        transform="translate(200,0)" >   
58 |         <use xlink:href="#sample" transform="translate(140,0)" />
59 |         <use xlink:href="#rotated" transform="translate(0,300)" /> <!--6-->
60 |          
61 |         <g id="upright-end" transform="translate(100,350)" 
62 |            text-anchor="middle"> 
63 |             <use xlink:href="#anchor" x="1em" y="2em" />
64 |             <text  x="1em 1em 1em 1em 1em 1em 1em
65 |                       1em 1em 1em 1em 1em 1em 1em" 
66 |                   dy="-13em 1em 1em 1em 1em 1em 1em 
67 |                         1em 1em 1em 1em 1em 1em 1em"
68 |                   y="2em" >Hi, SVG World!</text>              <!--7-->
69 |             
70 |             <use xlink:href="#anchor" x="2.5em" y="3em" />
71 |             <text  x="2.5em 2.5em 2.5em 2.5em 2.5em 2.5em 2.5em
72 |                       2.5em" 
73 |                   dy="-7em 1em 1em 1em 1em 1em 1em 1em" 
74 |                   y="3em" >您好SVG世界！</text> 
75 |         </g> 
76 |     </g>
77 | 
78 | </svg>


--------------------------------------------------------------------------------
/ch07-rtl-vertical-files/vertical-modes-future.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      width="4.3in" height="4.5in">
 4 |     <title>Mixed Scripts and Writing Modes</title>
 5 |     <style type="text/css">
 6 |         svg {
 7 |             font: 20px sans-serif;
 8 |             stroke-width: 2px;
 9 |         }
10 |         text {
11 |             fill: currentColor;
12 |         }
13 |         [writing-mode="tb"]{
14 |             writing-mode: vertical-rl;
15 |         }
16 |         [glyph-orientation-vertical="0"]{
17 |             text-orientation: upright;
18 |         }
19 |     </style>
20 |     <defs>
21 |         <circle id="anchor" r="3px" fill="currentColor"
22 |                 stroke="currentColor" fill-opacity="0.5"/>      <!--1-->
23 |     </defs>
24 |     <rect fill="#CEE" width="100%" height="100%" />
25 |     <g color="darkGreen" text-anchor="start">
26 |         <g id="sample" fill="currentColor" >
27 |             <use xlink:href="#anchor" x="1em" y="2em" />
28 |             <text x="1em" y="2em" >Hi, SVG World!</text>        <!--2-->
29 |             
30 |             <use xlink:href="#anchor" x="2.5em" y="3em" />
31 |             <text x="2.5em" y="3em" >您好SVG世界！</text>       <!--3-->
32 |         </g>
33 |         <use xlink:href="#sample" transform="translate(0,50)" 
34 |              writing-mode="tb" />                               <!--4-->
35 |         <use xlink:href="#sample" transform="translate(100,50)" 
36 |              writing-mode="tb" glyph-orientation-vertical="0"/> <!--5-->
37 |     </g>
38 |     <g color="darkRed" text-anchor="end"
39 |        transform="translate(200,0)" >                           <!--6-->
40 |         <use xlink:href="#sample" transform="translate(140,0)" />
41 |         <use xlink:href="#sample" transform="translate(0,350)" 
42 |              writing-mode="tb" />
43 |         <use xlink:href="#sample" transform="translate(100,350)" 
44 |              writing-mode="tb" glyph-orientation-vertical="0"/>
45 |     </g>
46 | 
47 | </svg>


--------------------------------------------------------------------------------
/ch07-rtl-vertical-files/vertical-modes.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch07-rtl-vertical-files/vertical-modes.PNG


--------------------------------------------------------------------------------
/ch07-rtl-vertical-files/vertical-modes.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      width="4.3in" height="4.5in">
 4 |     <title>Mixed Scripts and Writing Modes</title>
 5 |     <style type="text/css">
 6 |         svg {
 7 |             font: 20px sans-serif;
 8 |             stroke-width: 2px;
 9 |         }
10 |         text {
11 |             fill: currentColor;
12 |         }
13 |     </style>
14 |     <defs>
15 |         <circle id="anchor" r="3px" fill="currentColor"
16 |                 stroke="currentColor" fill-opacity="0.5"/>      <!--1-->
17 |     </defs>
18 |     <rect fill="#CEE" width="100%" height="100%" />
19 |     <g color="darkGreen" text-anchor="start">
20 |         <g id="sample" fill="currentColor" >
21 |             <use xlink:href="#anchor" x="1em" y="2em" />
22 |             <text x="1em" y="2em" >Hi, SVG World!</text>        <!--2-->
23 |             
24 |             <use xlink:href="#anchor" x="2.5em" y="3em" />
25 |             <text x="2.5em" y="3em" >您好SVG世界！</text>       <!--3-->
26 |         </g>
27 |         <use xlink:href="#sample" transform="translate(0,50)" 
28 |              writing-mode="tb" />                               <!--4-->
29 |         <use xlink:href="#sample" transform="translate(100,50)" 
30 |              writing-mode="tb" glyph-orientation-vertical="0"/> <!--5-->
31 |     </g>
32 |     <g color="darkRed" text-anchor="end"
33 |        transform="translate(200,0)" >                           <!--6-->
34 |         <use xlink:href="#sample" transform="translate(140,0)" />
35 |         <use xlink:href="#sample" transform="translate(0,350)" 
36 |              writing-mode="tb" />
37 |         <use xlink:href="#sample" transform="translate(100,350)" 
38 |              writing-mode="tb" glyph-orientation-vertical="0"/>
39 |     </g>
40 | 
41 | </svg>


--------------------------------------------------------------------------------
/ch08-baselines-files/baseline-shift-fallback.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch08-baselines-files/baseline-shift-fallback.PNG


--------------------------------------------------------------------------------
/ch08-baselines-files/baseline-shift-fallback.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg xmlns="http://www.w3.org/2000/svg" 
 3 |      width="410px" height="100px" viewBox="0 0 410 100">
 4 |     <title>Faking Baseline Shift in SVG Text</title>
 5 |     <style type="text/css">
 6 |     .formula {
 7 |         font-size: 22pt;
 8 |         text-anchor: middle;
 9 |     }
10 |     .super, .sub {
11 |         font-size: 50%;                <!--1-->
12 |     }
13 |     .footnote {
14 |         font-size: 14pt;
15 |     }
16 |     .footnote-divider {
17 |         stroke: dimGray;
18 |         stroke-width: 2px;
19 |     }
20 |     </style>
21 |     <rect fill="lightYellow" width="100%" height="100%" />
22 |     <text x="50%" y="1em" dy="1ex" class="formula">You&#8217;re  <!--2-->
23 |         as sweet as C<tspan class="sub" dy="0.5ex -0.5ex"
24 |         >6&#8204;</tspan>H<tspan class="sub" dy="0.5ex 0 -0.5ex"
25 |         >12&#8204;</tspan>O<tspan class="sub" dy="0.5ex -0.5ex"
26 |         >6&#8204;</tspan>.<tspan class="super" dy="-0.8em"
27 |         >(1)</tspan></text>                                      <!--3-->
28 |     <g transform="translate(10,70)">
29 |         <line x2="40" class="footnote-divider" />
30 |         <text y="1em" class="footnote">                          <!--4-->
31 |             <tspan class="super" dy="-0.8em">(1)<tspan dy="0.8em"
32 |             >&#8204;</tspan></tspan> 
33 |             Chemical signature of glucose sugar</text>
34 |     </g>
35 | </svg>


--------------------------------------------------------------------------------
/ch08-baselines-files/baseline-shift.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch08-baselines-files/baseline-shift.PNG


--------------------------------------------------------------------------------
/ch08-baselines-files/baseline-shift.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg xmlns="http://www.w3.org/2000/svg" 
 3 |      width="410px" height="100px" viewBox="0 0 410 100">
 4 |     <title>Baseline Shift in SVG Text</title>
 5 |     <style type="text/css">
 6 |     tspan {
 7 |         dominant-baseline: inherit;                        <!--1-->
 8 |     }
 9 |     .formula {
10 |         font-size: 22pt;
11 |         text-anchor: middle;
12 |         dominant-baseline: mathematical;
13 |     }
14 |     .super {
15 |         font-size: 50%;
16 |         baseline-shift: super;
17 |     }
18 |     .sub {
19 |         font-size: 50%;
20 |         baseline-shift: sub;
21 |     }
22 |     .footnote {
23 |         dominant-baseline: alphabetic;
24 |         font-size: 14pt;
25 |     }
26 |     .footnote-divider {
27 |         stroke: dimGray;
28 |         stroke-width: 2px;
29 |     }
30 |     </style>
31 |     <rect fill="lightYellow" width="100%" height="100%" />
32 |     <text x="50%" y="1em" class="formula">You&#8217;re as sweet <!--2-->
33 |         as C<tspan class="sub">6</tspan>H<tspan 
34 |         class="sub">12</tspan>O<tspan class="sub">6</tspan
35 |         >.<tspan class="super">(1)</tspan></text>               <!--3-->
36 |     <g transform="translate(10,70)">
37 |         <line x2="40" class="footnote-divider" />
38 |         <text dy="1em" class="footnote"><tspan 
39 |             class="super">(1)</tspan> 
40 |             Chemical signature of glucose sugar</text>
41 |     </g>
42 | </svg>


--------------------------------------------------------------------------------
/ch08-baselines-files/baselines.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch08-baselines-files/baselines.PNG


--------------------------------------------------------------------------------
/ch08-baselines-files/baselines.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      width="415" height="250" viewBox="0 0 415 250">
 4 |     <title>Text Baseline Comparison</title>
 5 |     <style>
 6 |         svg {
 7 |             text-anchor: middle;
 8 |             font-family: Arial, Helvetica, sans-serif;
 9 |             font-size: 12pt;
10 |         }
11 |         line {
12 |             stroke: lightGray;
13 |             stroke-width: 2px;
14 |         }
15 |         .small {
16 |             font-size: 75%;
17 |             font-family: Times New Roman, Times, serif;
18 |         }
19 |         tspan {
20 |             dominant-baseline: inherit;
21 |         }
22 |     </style>
23 |     <defs>
24 |         <line id="baseline" x1="-100" x2="100"/>
25 |         <line id="spine" y2="250" />
26 |     </defs>
27 |     <g transform="translate(105,0)">
28 |         <use xlink:href="#spine"/>
29 |         <g transform="translate(0,50)">
30 |             <use xlink:href="#baseline"/>
31 |             <text dominant-baseline="alphabetic">'alphabetic' 
32 |                 <tspan class="small">alignment您好</tspan></text>
33 |         </g>
34 |         <g transform="translate(0,100)">
35 |             <use xlink:href="#baseline"/>
36 |             <text dominant-baseline="middle">'middle' 
37 |                 <tspan class="small">alignment您好</tspan></text>
38 |         </g>
39 |         <g transform="translate(0,150)">
40 |             <use xlink:href="#baseline"/>
41 |             <text dominant-baseline="hanging">'hanging' 
42 |                 <tspan class="small">alignment您好</tspan></text>
43 |         </g>
44 |         <g transform="translate(0,200)">
45 |             <use xlink:href="#baseline"/>
46 |             <text dominant-baseline="text-before-edge"
47 |                   >'text-before-edge' 
48 |                 <tspan class="small">alignment您好</tspan></text>
49 |         </g>
50 |     </g>
51 |     <g transform="translate(310,0)">            
52 |         <use xlink:href="#spine"/>
53 |         <g transform="translate(0,50)">
54 |             <use xlink:href="#baseline"/>
55 |             <text dominant-baseline="ideographic">'ideographic' 
56 |                 <tspan class="small">alignment您好</tspan></text>
57 |         </g>
58 |         <g transform="translate(0,100)">
59 |             <use xlink:href="#baseline"/>
60 |             <text dominant-baseline="central">'central' 
61 |                 <tspan class="small">alignment您好</tspan></text>
62 |         </g>
63 |         <g transform="translate(0,150)">
64 |             <use xlink:href="#baseline"/>
65 |             <text dominant-baseline="mathematical">'mathematical' 
66 |                 <tspan class="small">alignment您好</tspan></text>
67 |         </g>     
68 |         <g transform="translate(0,200)">
69 |             <use xlink:href="#baseline"/>
70 |             <text dominant-baseline="text-after-edge"
71 |                   >'text-after-edge' 
72 |                 <tspan class="small">alignment您好</tspan></text>
73 |         </g>
74 |     </g>  
75 | </svg>


--------------------------------------------------------------------------------
/ch08-baselines-files/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>ch08 Lining Up — Supplementary Material: SVG Text Layout</title>
 5 |     <link rel="stylesheet" href="../index.css" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   </head>
 8 |   <body>
 9 | <header>
10 |   <h1><a href="../"><cite>SVG Text Layout</cite></a></h1>
11 |   <p>Example code for the O&rsquo;Reilly Media book</p>
12 |   <p>by Amelia Bellamy-Royds &amp; Kurt Cagle</p>
13 | </header>
14 | <main>
15 |   <h1>Lining Up</h1>
16 |   <p>Chapter 8 introduces the properties that control the vertical alignment of horizontal text and the horizontal alignment of vertical text.</p>
17 |   <p>
18 |   The links below will open the live example files or high-res PNG or JPEG screenshots in a new browser tab.  Alternatively, <a href="https://github.com/oreillymedia/SVG_Text_Layout">you can download the entire collection as a zip archive or fork it as a GitHub repository</a>.  Be sure to read the <a href="http://shop.oreilly.com/category/customer-service/faq-examples.do">O&rsquo;Reilly Media policy on the use of example code</a>.
19 |   </p>
20 | <ul>
21 |   <li>Example 8-1 &amp; Figure 8-1 (text baseline comparison): 
22 |     <ul>
23 |       <li><a target="_blank" href="baselines.svg">SVG file</a></li>
24 |       <li><a target="_blank" href="baselines.PNG">screenshot</a></li>
25 |   </ul></li>
26 |   <li>Example 8-2 &amp; Figure 8-2 (<code>baseline-shift</code>): 
27 |     <ul>
28 |       <li><a target="_blank" href="baseline-shift.svg">SVG file</a></li>
29 |       <li><a target="_blank" href="baseline-shift.PNG">screenshot</a></li>
30 |   </ul></li>
31 |   <li>Example 8-3 &amp; Figure 8-3 (simulating baseline shift with character positioning attributes): 
32 |     <ul>
33 |       <li><a target="_blank" href="baseline-shift-fallback.svg">SVG file</a></li>
34 |       <li><a target="_blank" href="baseline-shift-fallback.PNG">screenshot</a></li>
35 |   </ul></li>
36 | </ul>
37 |   <p>Return to the <a href="../">main table of contents</a>.</p>
38 | </main>
39 | <footer>
40 |   <p>Don&rsquo;t have a copy of <cite>SVG Text Layout</cite> already? 
41 |   </p>
42 |   <p>
43 |     Order a print book or <abbr title="Digital Rights Management">DRM</abbr>-free e-book <a href="http://shop.oreilly.com/product/0636920043072.do">from O&rsquo;Reilly Media</a>, or access it through your Safari Books Online subscription.</p>
44 | </footer>
45 |   </body>
46 | </html>


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-text-absolute.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch09-textPath-files/circle-text-absolute.PNG


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-text-absolute.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      xml:lang="en"
 4 |      width="4in" height="2.3in" viewBox="0 0 400 230">
 5 |     <title>Text Positioned in a Curve</title>
 6 |     <style type="text/css">
 7 |         text {
 8 |             font: bold italic 48px "Times New Roman", Times, serif;
 9 |             fill: gold;
10 |             stroke: orangeRed;
11 |         }
12 |     </style>
13 |     <rect fill="#CEE" width="100%" height="100%" />
14 |     <g transform="translate(200,180)">                <!--1-->
15 |         <text x="-150 -130 -75 0 75 130 150"
16 |               y="0 -75 -130 -150 -130 -75 0"
17 |               rotate="-90 -60 -30 0 30 60 90"
18 |               >Sunrise</text>                         <!--2-->
19 |     </g>
20 | </svg>


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath-arabic-centered.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch09-textPath-files/circle-textPath-arabic-centered.PNG


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath-arabic-centered.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      width="4in" height="2.3in" viewBox="0 0 400 230">
 4 |     <title xml:lang="en">Arabic Text on a Curved Path</title>
 5 |     <style type="text/css">
 6 |         text {
 7 |             font: bold italic 48px "Times New Roman", Times, serif;
 8 |             fill: gold;
 9 |             stroke: orangeRed;
10 |         }
11 |         @supports (filter: drop-shadow(0 0 0)){
12 |             text {
13 |                 stroke: none;
14 |                 filter: drop-shadow(orangeRed 0.5px 1px 1px);
15 |             }
16 |         }
17 |     </style>
18 |     <rect fill="#CEE" width="100%" height="100%" />
19 |     <path id="path" d="M50,200 C50,0 350,0 350,200"
20 |           fill="none" stroke="darkOrange" />
21 |     <text text-anchor="middle" dir="rtl" xml:lang="ar">
22 |         <textPath xlink:href="#path" startOffset="50%"
23 |             >جميل الخط النسخية على منحنى</textPath>
24 |     </text>
25 | </svg>


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath-arabic-centered.zoom.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch09-textPath-files/circle-textPath-arabic-centered.zoom.PNG


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath-arabic-flat.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch09-textPath-files/circle-textPath-arabic-flat.PNG


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath-arabic-flat.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      width="4in" height="2.3in" viewBox="0 0 400 230">
 4 |     <title xml:lang="en">Arabic Text on a Curved Path</title>
 5 |     <style type="text/css">
 6 |         text {
 7 |             font: bold italic 48px "Times New Roman", Times, serif;
 8 |             fill: gold;
 9 |             stroke: orangeRed;
10 |         }
11 |     </style>
12 |     <rect fill="#CEE" width="100%" height="100%" />
13 |     <path id="path" d="M50,200 C50,0 350,0 350,200"
14 |           fill="none" stroke="darkOrange" />
15 |     <text text-anchor="middle" dir="rtl" xml:lang="ar">
16 |         <textPath xlink:href="#path" startOffset="50%"
17 |             >جميل الخط النسخية على منحنى</textPath>
18 |     </text>
19 | </svg>


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath-arabic-styled.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      width="4in" height="2.3in" viewBox="0 0 400 230">
 4 |     <title xml:lang="en">Arabic Text on a Curved Path</title>
 5 |     <style type="text/css">
 6 |         text {
 7 |             font: bold italic 48px "Times New Roman", Times, serif;
 8 |             fill: orangeRed;
 9 |         }
10 |         .bright {
11 |             fill: gold;
12 |             stroke: orangeRed;
13 |         }
14 |     </style>
15 |     <rect fill="#CEE" width="100%" height="100%" />
16 |     <path id="path" d="M50,200 C50,0 350,0 350,200"
17 |           fill="none" stroke="darkOrange" />
18 |     <text text-anchor="middle" dir="rtl" xml:lang="ar">
19 |         <textPath xlink:href="#path" startOffset="50%"
20 |             ><tspan class="bright">جميل</tspan> 
21 |             الخط النسخية  
22 |             <tspan class="bright">على منحنى</tspan></textPath>
23 |     </text>
24 | </svg>


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath-arabic.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg xmlns="http://www.w3.org/2000/svg" 
 3 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 4 |      width="4in" height="2.3in" viewBox="0 0 400 230">
 5 |     <title xml:lang="en">Arabic Text on a Curved Path</title>
 6 |     <style type="text/css">
 7 |         text {
 8 |             font: bold italic 48px "Times New Roman", Times, serif;
 9 |             fill: gold;
10 |             stroke: orangeRed;
11 |             paint-order: stroke;
12 |         }
13 |         @supports (filter: drop-shadow(0 0 0)){
14 |             text {
15 |                 stroke: none;
16 |                 filter: drop-shadow(orangeRed 0.5px 1px 1px);
17 |             }
18 |         }
19 |     </style>
20 |     <rect fill="#CEE" width="100%" height="100%" />
21 |     <path id="path" d="M50,200 C50,0 350,0 350,200"
22 |           fill="none" stroke="darkOrange" />
23 |     <text text-anchor="start" dir="rtl" xml:lang="ar">
24 |         <textPath xlink:href="#path" startOffset="0%"
25 |             >جميل الخط النسخية على منحنى</textPath>
26 |     </text>
27 | </svg>


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath-centered-xy.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      xml:lang="en"
 4 |      width="4in" height="2.3in" viewBox="0 0 400 230">
 5 |     <title>Centered Text on a Curved Path</title>
 6 |     <style type="text/css">
 7 |         text {
 8 |             font: bold italic 48px "Times New Roman", Times, serif;
 9 |             fill: orangeRed;
10 |         }
11 |         .bright {
12 |             fill: gold;
13 |             stroke: orangeRed;
14 |         }
15 |     </style>
16 |     <rect fill="#CEE" width="100%" height="100%" />
17 |     <path id="path" d="M50,200 C50,0 350,0 350,200"
18 |           fill="none" stroke="darkOrange" />
19 |     <text dy="-5px" text-anchor="middle">
20 |         <textPath xlink:href="#path" startOffset="50%"
21 |             >from 
22 |             <tspan class="bright" dx="10px">Sunrise</tspan> 
23 |             to 
24 |             <tspan class="bright" dx="10px">Sunset</tspan>
25 |             <tspan x="50%" dy="1em">and back again</tspan>
26 |         </textPath>
27 |     </text>
28 | </svg>


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath-centered.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch09-textPath-files/circle-textPath-centered.PNG


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath-centered.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      xml:lang="en"
 4 |      width="4in" height="2.3in" viewBox="0 0 400 230">
 5 |     <title>Centered Text on a Curved Path</title>
 6 |     <style type="text/css">
 7 |         text {
 8 |             font: bold italic 48px "Times New Roman", Times, serif;
 9 |             fill: gold;
10 |             stroke: orangeRed;
11 |         }
12 |     </style>
13 |     <rect fill="#CEE" width="100%" height="100%" />
14 |     <path id="path" d="M50,200 C50,0 350,0 350,200"
15 |           fill="none" stroke="darkOrange" />
16 |     <text text-anchor="middle">
17 |         <textPath xlink:href="#path" startOffset="50%"
18 |             >from Sunrise to Sunset</textPath>
19 |     </text>
20 | </svg>


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath-dy.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch09-textPath-files/circle-textPath-dy.PNG


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath-dy.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      xml:lang="en"
 4 |      width="4in" height="2.3in" viewBox="0 0 400 230">
 5 |     <title>Text Offset from a Curved Path</title>
 6 |     <style type="text/css">
 7 |         text {
 8 |             font: bold italic 48px "Times New Roman", Times, serif;
 9 |             fill: orangeRed;
10 |         }
11 |         .bright {
12 |             fill: gold;
13 |             stroke: orangeRed;
14 |         }
15 |     </style>
16 |     <rect fill="#CEE" width="100%" height="100%" />
17 |     <path id="path" d="M50,200 C50,0 350,0 350,200"
18 |           fill="none" stroke="darkOrange" />
19 |     <text dy="0.5ex" text-anchor="middle">                 <!--2-->
20 |         <textPath xlink:href="#path" startOffset="50%"
21 |             >from 
22 |             <tspan class="bright" dy="-1ex" dx="10px"
23 |             >Sunrise</tspan>                               <!--3-->
24 |             <tspan dy="+1ex">to</tspan>                    <!--4--> 
25 |             <tspan class="bright" dy="+1ex" dx="10px"
26 |             >Sunset</tspan></textPath>                     <!--5-->
27 |     </text>
28 | </svg>


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath-hebrew-centered.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      width="4in" height="2.3in" viewBox="0 0 400 230">
 4 |     <title xml:lang="en">Hebrew Text on a Curved Path</title>
 5 |     <style type="text/css">
 6 |         text {
 7 |             font: bold italic 48px "Times New Roman", Times, serif;
 8 |             fill: gold;
 9 |             stroke: orangeRed;
10 |         }
11 |     </style>
12 |     <rect fill="#CEE" width="100%" height="100%" />
13 |     <path id="path" d="M50,200 C50,0 350,0 350,200"
14 |           fill="none" stroke="darkOrange" />
15 |     <text text-anchor="middle" dir="rtl" xml:lang="he">
16 |         <textPath xlink:href="#path" startOffset="50%"
17 |             >טכסט כתוב בעברית</textPath>
18 |     </text>
19 | </svg>


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath-hebrew-end.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      width="4in" height="2.3in" viewBox="0 0 400 230">
 4 |     <title xml:lang="en">Hebrew Text on a Curved Path</title>
 5 |     <style type="text/css">
 6 |         text {
 7 |             font: bold italic 48px "Times New Roman", Times, serif;
 8 |             fill: gold;
 9 |             stroke: orangeRed;
10 |         }
11 |     </style>
12 |     <rect fill="#CEE" width="100%" height="100%" />
13 |     <path id="path" d="M50,200 C50,0 350,0 350,200"
14 |           fill="none" stroke="darkOrange" />
15 |     <text text-anchor="end" dir="rtl" xml:lang="he">
16 |         <textPath xlink:href="#path" startOffset="100%"
17 |             >טכסט כתוב בעברית</textPath>
18 |     </text>
19 | </svg>


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath-hebrew.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch09-textPath-files/circle-textPath-hebrew.PNG


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath-hebrew.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      width="4in" height="2.3in" viewBox="0 0 400 230">
 4 |     <title xml:lang="en">Hebrew Text on a Curved Path</title>
 5 |     <style type="text/css">
 6 |         text {
 7 |             font: bold italic 48px "Times New Roman", Times, serif;
 8 |             fill: gold;
 9 |             stroke: orangeRed;
10 |         }
11 |     </style>
12 |     <rect fill="#CEE" width="100%" height="100%" />
13 |     <path id="path" d="M50,200 C50,0 350,0 350,200"
14 |           fill="none" stroke="darkOrange" />
15 |     <text dir="rtl" xml:lang="he">
16 |         <textPath xlink:href="#path"
17 |             >טכסט כתוב בעברית</textPath>
18 |     </text>
19 | </svg>


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath-multiline.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch09-textPath-files/circle-textPath-multiline.PNG


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath-multiline.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      xml:lang="en"
 4 |      width="4in" height="2.3in" viewBox="0 0 400 230">
 5 |     <title>Multiline Text on a Curved Path</title>
 6 |     <style type="text/css">
 7 |         text {
 8 |             font: bold italic 48px "Times New Roman", Times, serif;
 9 |             fill: gold;
10 |             stroke: orangeRed;
11 |         }
12 |     </style>
13 |     <rect fill="#CEE" width="100%" height="100%" />
14 |     <path id="path" d="M50,200 C50,0 350,0 350,200"
15 |           fill="none" stroke="darkOrange" />
16 |     <text text-anchor="middle">
17 |         <textPath xlink:href="#path" startOffset="50%"
18 |             letter-spacing="-2.5px"><tspan dy="-0.2em"
19 |             >Text above a path</tspan></textPath>
20 |         <textPath xlink:href="#path" startOffset="50%"
21 |             letter-spacing="5px"><tspan dy="0.8em"
22 |             >and below it, too!</tspan></textPath>
23 |     </text>
24 | </svg>


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath-rotated.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      xml:lang="en"
 4 |      width="4in" height="2.3in" viewBox="0 0 400 230">
 5 |     <title>Styled Text on a Curved Path</title>
 6 |     <style type="text/css">
 7 |         text {
 8 |             font: bold italic 48px "Times New Roman", Times, serif;
 9 |             fill: orangeRed;
10 |         }
11 |         .bright {
12 |             fill: gold;
13 |             stroke: orangeRed;
14 |         }
15 |     </style>
16 |     <rect fill="#CEE" width="100%" height="100%" />
17 |     <path id="path" d="M50,200 C50,0 350,0 350,200"
18 |           fill="none" stroke="darkOrange" />
19 |     <text text-anchor="middle" rotate="30">
20 |         <textPath xlink:href="#path" startOffset="50%"
21 |             >from 
22 |             <tspan class="bright">Sunrise</tspan> 
23 |             to 
24 |             <tspan class="bright">Sunset</tspan
25 |                 ></textPath>
26 |     </text>
27 | </svg>


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath-styled.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch09-textPath-files/circle-textPath-styled.PNG


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath-styled.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      xml:lang="en"
 4 |      width="4in" height="2.3in" viewBox="0 0 400 230">
 5 |     <title>Styled Text on a Curved Path</title>
 6 |     <style type="text/css">
 7 |         text {
 8 |             font: bold italic 48px "Times New Roman", Times, serif;
 9 |             fill: orangeRed;
10 |         }
11 |         .bright {
12 |             fill: gold;
13 |             stroke: orangeRed;
14 |         }
15 |     </style>
16 |     <rect fill="#CEE" width="100%" height="100%" />
17 |     <path id="path" d="M50,200 C50,0 350,0 350,200"
18 |           fill="none" stroke="darkOrange" />
19 |     <text text-anchor="middle">
20 |         <textPath xlink:href="#path" startOffset="50%"
21 |             >from 
22 |             <tspan class="bright">Sunrise</tspan> 
23 |             to 
24 |             <tspan class="bright">Sunset</tspan
25 |                 ></textPath>
26 |     </text>
27 | </svg>


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath-xy.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      xml:lang="en"
 4 |      width="4in" height="2.3in" viewBox="0 0 400 230">
 5 |     <title>Multiline Text on a Curved Path</title>
 6 |     <style type="text/css">
 7 |         text {
 8 |             font: bold italic 46px "Times New Roman", Times, serif;
 9 |             fill: orangeRed;
10 |         }
11 |         .bright {
12 |             fill: gold;
13 |             stroke: orangeRed;
14 |         }
15 |     </style>
16 |     <rect fill="#CEE" width="100%" height="100%" />
17 |     <path id="path" d="M50,200 C50,0 350,0 350,200"
18 |           fill="none" stroke="darkOrange" />
19 |     <text dy="-5px">
20 |         <textPath xlink:href="#path">from 
21 |             <tspan class="bright" dx="10px">Sunrise</tspan> 
22 |             to 
23 |             <tspan class="bright" dx="10px">Sunset</tspan>
24 |             <tspan x="20%" dy="1em">and back again</tspan>
25 |         </textPath>
26 |     </text>
27 | </svg>


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch09-textPath-files/circle-textPath.PNG


--------------------------------------------------------------------------------
/ch09-textPath-files/circle-textPath.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      xml:lang="en"
 4 |      width="4in" height="2.3in" viewBox="0 0 400 230">
 5 |     <title>Text on a Curved Path</title>
 6 |     <style type="text/css">
 7 |         text {
 8 |             font: bold italic 48px "Times New Roman", Times, serif;
 9 |             fill: gold;
10 |             stroke: orangeRed;
11 |         }
12 |     </style>
13 |     <rect fill="#CEE" width="100%" height="100%" />
14 |     <path id="path" d="M50,200 C50,0 350,0 350,200"
15 |           fill="none" stroke="darkOrange" />
16 |     <text>
17 |         <textPath xlink:href="#path">from Sunrise 
18 |             to Sunset</textPath>
19 |     </text>
20 | </svg>


--------------------------------------------------------------------------------
/ch09-textPath-files/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>ch09 Beyond Straight Lines — Supplementary Material: SVG Text Layout</title>
 5 |     <link rel="stylesheet" href="../index.css" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   </head>
 8 |   <body>
 9 | <header>
10 |   <h1><a href="../"><cite>SVG Text Layout</cite></a></h1>
11 |   <p>Example code for the O&rsquo;Reilly Media book</p>
12 |   <p>by Amelia Bellamy-Royds &amp; Kurt Cagle</p>
13 | </header>
14 | <main>
15 |   <h1>Beyond Straight Lines</h1>
16 |   <p>Chapter 9 looks at the <code>&lt;textPath&gt;</code> element and how it can be used to create curved or complex text layouts.</p>
17 |   <p>
18 |   The links below will open the live example files or high-res PNG or JPEG screenshots in a new browser tab.  Alternatively, <a href="https://github.com/oreillymedia/SVG_Text_Layout">you can download the entire collection as a zip archive or fork it as a GitHub repository</a>.  Be sure to read the <a href="http://shop.oreilly.com/category/customer-service/faq-examples.do">O&rsquo;Reilly Media policy on the use of example code</a>.
19 |   </p>
20 | <ul>
21 |   <li>Example 9-1 &amp; Figure 9-1 (curved text using absolute positioning): 
22 |     <ul>
23 |       <li><a target="_blank" href="circle-text-absolute.svg">SVG file</a></li>
24 |       <li><a target="_blank" href="circle-text-absolute.PNG">screenshot</a></li>
25 |   </ul></li>
26 |   <li>Example 9-2 &amp; Figure 9-2 (curved text using <code>&lt;textPath&gt;</code>): 
27 |     <ul>
28 |       <li><a target="_blank" href="circle-textPath.svg">SVG file</a></li>
29 |       <li><a target="_blank" href="circle-textPath.PNG">screenshot</a></li>
30 |   </ul></li>
31 |   <li>Figure 9-3 (centering text on a path): 
32 |     <ul>
33 |       <li><a target="_blank" href="circle-textPath-centered.svg">SVG file</a></li>
34 |       <li><a target="_blank" href="circle-textPath-centered.PNG">screenshot</a></li>
35 |   </ul></li>
36 |   <li>Example 9-3 &amp; Figure 9-4, 9-5, &amp; 9-8 (Arabic text on a path): 
37 |     <ul>
38 |       <li><a target="_blank" href="circle-textPath-arabic-centered.svg">SVG file</a> (displays incorrectly in most browsers)</li>
39 |       <li><a target="_blank" href="circle-textPath-arabic-centered.PNG">screenshot, in Firefox</a></li>
40 |       <li><a target="_blank" href="circle-textPath-arabic-flat.svg">SVG file, using strokes instead of shadows</a> (displays incorrectly in most browsers)</li>
41 |       <li><a target="_blank" href="circle-textPath-arabic-flat.PNG">screenshot of stroked text, in Firefox</a></li>
42 |       <li><a target="_blank" href="circle-textPath-arabic-centered.zoom.PNG">zoomed-in screenshot of shadowed text, in Firefox</a></li>
43 |   </ul></li>
44 |   <li>Example 9-4 &amp; Figure 9-6 (<code>&lt;tspan&gt;</code> inside <code>&lt;textPath&gt;</code> for styling): 
45 |     <ul>
46 |       <li><a target="_blank" href="circle-textPath-styled.svg">SVG file</a></li>
47 |       <li><a target="_blank" href="circle-textPath-styled.PNG">screenshot</a></li>
48 |   </ul></li>
49 |   <li>Example 9-5 &amp; Figure 9-7 (<code>&lt;tspan&gt;</code> inside <code>&lt;textPath&gt;</code> for positioning adjustments): 
50 |     <ul>
51 |       <li><a target="_blank" href="circle-textPath-dy.svg">SVG file</a></li>
52 |       <li><a target="_blank" href="circle-textPath-dy.PNG">screenshot</a></li>
53 |   </ul></li>
54 |   <li>Example 9-6 &amp; Figure 9-9 (using multiple <code>&lt;textPath&gt;</code> elements for multiline text): 
55 |     <ul>
56 |       <li><a target="_blank" href="circle-textPath-multiline.svg">SVG file</a></li>
57 |       <li><a target="_blank" href="circle-textPath-multiline.PNG">screenshot</a></li>
58 |   </ul></li>
59 | </ul>
60 |   <p>Return to the <a href="../">main table of contents</a>.</p>
61 | </main>
62 | <footer>
63 |   <p>Don&rsquo;t have a copy of <cite>SVG Text Layout</cite> already? 
64 |   </p>
65 |   <p>
66 |     Order a print book or <abbr title="Digital Rights Management">DRM</abbr>-free e-book <a href="http://shop.oreilly.com/product/0636920043072.do">from O&rsquo;Reilly Media</a>, or access it through your Safari Books Online subscription.</p>
67 | </footer>
68 |   </body>
69 | </html>


--------------------------------------------------------------------------------
/ch09-textPath-files/textPath-startOffset.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      xml:lang="en"
 4 |      width="400" height="200" viewBox="0 0 400 200">
 5 |     <title>Text on a Path -- Start Offset</title>
 6 |     <rect fill="#CEE" width="100%" height="100%" />
 7 |     <path id="path" d="M50,180 C50,0 350,0 350,180" 
 8 |           stroke="royalblue" fill="none"/>
 9 |     <text font-size="50px">
10 |         <textPath startOffset="-30%" xlink:href="#path">Text on a Path</textPath>
11 |         <textPath startOffset="130%" text-anchor="end" 
12 |                   xlink:href="#path">Text on a Path</textPath>
13 |     </text>
14 | </svg>


--------------------------------------------------------------------------------
/ch09-textPath-files/walrus-carpenter.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" width="800" height="400"
 2 |     xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      xml:lang="en"
 4 |     viewBox="0 0 2000 1000" >
 5 |     <defs>
 6 |         <path d="M-300,0 C-300,0 -300,-275 0,-275 C0,-275 250,-275 250,0 
 7 |             C250,0 250,225 0,225 C0,225 -225,200 -200,0 
 8 |             C-200,0 -200,-175 0,-175 C0,-175 150,-175 125,0 
 9 |             C125,0 125,100 0,100 C0,100 -75,100 -75,0 
10 |             C-75,0 -75,-50 0,-50 C0,-50 25,-50 25,0 
11 |             C25,0 25,10 0,0" id="spiral"/>
12 |     </defs>
13 |     <g transform="translate(400,400)">
14 |         <use xlink:href="#spiral" style="fill:none;stroke:blue;stroke-width:1"/>
15 |         <text style="font-size:32pt"><textPath xlink:href="#spiral">"The time has come," <tspan font-size="90%">the Walrus said, "to talk of many things. <tspan font-size="90%">Of shoes, and ships and sealing wax, <tspan font-size="90%">of cabbages and kings. <tspan font-size="90%">And why the sea is boiling hot, <tspan font-size="90%">and whether pigs have wings.</tspan></tspan></tspan></tspan></tspan></textPath></text>
16 |     </g>
17 |     <g transform="translate(1100,400)">
18 |         <use xlink:href="#spiral" style="fill:none;"/>
19 |         <text style="font-size:32pt"><textPath xlink:href="#spiral">"The time has come," <tspan font-size="90%">the Walrus said, "to talk of many things. <tspan font-size="90%">Of shoes, and ships and sealing wax, <tspan font-size="90%">of cabbages and kings. <tspan font-size="90%">And why the sea is boiling hot, <tspan font-size="90%">and whether pigs have wings.</tspan></tspan></tspan></tspan></tspan></textPath></text>
20 |     </g>
21 | </svg>


--------------------------------------------------------------------------------
/ch10-fonts-files/bam-boom-comparison.Arial.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch10-fonts-files/bam-boom-comparison.Arial.PNG


--------------------------------------------------------------------------------
/ch10-fonts-files/bam-boom-comparison.Cooper.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch10-fonts-files/bam-boom-comparison.Cooper.PNG


--------------------------------------------------------------------------------
/ch10-fonts-files/bam-boom-comparison.GillSans.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch10-fonts-files/bam-boom-comparison.GillSans.PNG


--------------------------------------------------------------------------------
/ch10-fonts-files/bam-boom-comparison.Goudy.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch10-fonts-files/bam-boom-comparison.Goudy.PNG


--------------------------------------------------------------------------------
/ch10-fonts-files/bam-boom-comparison.Impact.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch10-fonts-files/bam-boom-comparison.Impact.PNG


--------------------------------------------------------------------------------
/ch10-fonts-files/bam-boom-comparison.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch10-fonts-files/bam-boom-comparison.PNG


--------------------------------------------------------------------------------
/ch10-fonts-files/bam-boom-comparison.Showcard.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch10-fonts-files/bam-boom-comparison.Showcard.PNG


--------------------------------------------------------------------------------
/ch10-fonts-files/bam-boom-comparison.hi-res.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch10-fonts-files/bam-boom-comparison.hi-res.PNG


--------------------------------------------------------------------------------
/ch10-fonts-files/bam-boom-comparison.xcf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch10-fonts-files/bam-boom-comparison.xcf


--------------------------------------------------------------------------------
/ch10-fonts-files/bam-boom-postscript-names.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" 
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      xml:lang="en"
 4 |      width="400px" height="400px" viewBox="0 0 400 400">
 5 |     <title>Explosive Text</title>
 6 |     <style type="text/css">
 7 |         @font-face {
 8 |             font-family: heavy;
 9 |             src: local(GillSans-UltraBold),
10 |                  local("Gill Sans Ultra Bold"),
11 |                  local(ShowcardGothic-Reg), 
12 |                  local("Showcard Gothic"), 
13 |                  local(Cooper Black),
14 |                  local(CooperBlack),
15 |                  local(Arial Black),  
16 |                  local(Arial-Black),  
17 |                  local(Impact);
18 |         }
19 |         .dynamic-lettering {
20 |             font-family: heavy, 
21 |                          "Gill Sans Ultra Bold",  
22 |                          sans-serif; 
23 |             font-size: 100px;
24 |             font-weight: 900;     
25 |             fill: url(#yellow-red) orangeRed;
26 |             stroke: url(#red-brown) red;
27 |             stroke-width: 3px;
28 |         }
29 |             
30 |     </style>
31 |     <defs>
32 |         <linearGradient gradientTransform="rotate(90)" id="yellow-red">
33 |             <stop stop-color="yellow" offset="0"/>
34 |             <stop stop-color="red" offset="0.8"/>
35 |             <stop stop-color="maroon" offset="1.0"/>           <!--3-->
36 |         </linearGradient>
37 |         <linearGradient gradientTransform="rotate(90)" id="red-brown">
38 |             <stop stop-color="orangeRed" offset="0"/>
39 |             <stop stop-color="maroon" offset="1.0"/>
40 |         </linearGradient>
41 |     </defs>
42 |     <rect height="100%" width="100%" fill="aquamarine"/>
43 |     <g class="dynamic-lettering">
44 |         <text transform="translate(40,165) rotate(-15)"
45 |               dy="0 20 -30 20"
46 |               >BAM!</text>                                     <!--4-->
47 |         <text x="75" y="375" 
48 |               dx="0   -70  -30   8 -25"
49 |               dy="0   -70  -80  50  45" 
50 |           rotate="-70 -15   35  10  30">BOOM!</text>           <!--5-->
51 |     </g>
52 | </svg>


--------------------------------------------------------------------------------
/ch10-fonts-files/generic-fonts-cursive.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch10-fonts-files/generic-fonts-cursive.PNG


--------------------------------------------------------------------------------
/ch10-fonts-files/generic-fonts-cursive.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      width="4in" height="1in">
 4 |     <title xml:lang="en">Cursive font families</title>
 5 |     <style type="text/css">
 6 |         svg {
 7 |             font-size: 24px;
 8 |         }
 9 |         text {
10 |             font-family: cursive;
11 |             fill: sienna;
12 |             fill: url(#stripes) sienna;
13 |             font-size: 32px;
14 |         }
15 |         [writing-mode="tb"]{
16 |             writing-mode: vertical-rl;
17 |         }
18 |         [glyph-orientation-vertical="0"]{
19 |             text-orientation: upright;
20 |         }
21 |         text:nth-of-type(1){ 
22 |             font-family: Kunstler Script, cursive;
23 |         }
24 |         text:nth-of-type(2){ 
25 |             font-family: Brush Script MT, cursive;
26 |         }
27 |         text:nth-of-type(3){ 
28 |             font-family: Comic Sans, cursive;
29 |         }
30 |         text:nth-of-type(4){ 
31 |             font-family: Bradley Hand ITC, cursive;
32 |         }
33 |     </style>
34 |     <pattern id="stripes"
35 |              patternUnits="userSpaceOnUse" patternTransform="rotate(50)"
36 |              width="6px" height="10px">
37 |         <rect fill="teal" width="2px" height="10px" />
38 |         <rect fill="darkturquoise" x="2px" width="2px" height="10px" />
39 |         <rect fill="cadetblue" x="4px" width="2px" height="10px" />
40 |     </pattern>
41 |     <rect fill="lavenderblush" width="100%" height="4em" />
42 |     <g xml:lang="en">
43 |         <text x="50%" dx="1em" y="1.2em" 
44 |               >Hello, World!</text>
45 |         <text x="50%" dx="1em" y="2.5em" 
46 |               >Hello, World!</text>
47 |         <text x="50%" dx="0.5em" y="1.2em" text-anchor="end"
48 |               >Hello, World!</text>
49 |         <text x="50%" dx="0.5em" y="2.5em" text-anchor="end"
50 |               >Hello, World!</text>
51 |     </g>
52 | 
53 | </svg>


--------------------------------------------------------------------------------
/ch10-fonts-files/generic-fonts-fantasy.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch10-fonts-files/generic-fonts-fantasy.PNG


--------------------------------------------------------------------------------
/ch10-fonts-files/generic-fonts-fantasy.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      width="4in" height="1in">
 4 |     <title xml:lang="en">Fantasy font families</title>
 5 |     <style type="text/css">
 6 |         svg {
 7 |             font-size: 24px;
 8 |         }
 9 |         text {
10 |             font-family: cursive;
11 |             font-size: 28px;
12 |             fill: sienna;
13 |             fill: url(#stripes) sienna;
14 |         }
15 |         [writing-mode="tb"]{
16 |             writing-mode: vertical-rl;
17 |         }
18 |         [glyph-orientation-vertical="0"]{
19 |             text-orientation: upright;
20 |         }
21 |         text:nth-of-type(1){ 
22 |             font-family: Chiller, cursive;
23 |         }
24 |         text:nth-of-type(2){ 
25 |             font-family: Blackadder ITC, cursive;
26 |         }
27 |         text:nth-of-type(3){ 
28 |             font-family: Algerian, cursive;
29 |         }
30 |         text:nth-of-type(4){ 
31 |             font-family: Ravie, cursive;
32 |         }
33 |     </style>
34 |     <pattern id="stripes"
35 |              patternUnits="userSpaceOnUse" patternTransform="rotate(50)"
36 |              width="6px" height="10px">
37 |         <rect fill="saddlebrown" width="2px" height="10px" />
38 |         <rect fill="sienna" x="2px" width="2px" height="10px" />
39 |         <rect fill="peru" x="4px" width="2px" height="10px" />
40 |     </pattern>
41 |     <rect fill="#BFC" width="100%" height="4em" />
42 |     <g xml:lang="en">
43 |         <text x="50%" dx="1.7em" y="1.2em" 
44 |               >Hello, World!</text>
45 |         <text x="50%" dx="1.7em" y="2.8em" 
46 |               >Hello, World!</text>
47 |         <text x="50%" dx="1.5em" y="1.2em" text-anchor="end"
48 |               >Hello, World!</text>
49 |         <text x="50%" dx="1.5em" y="2.8em" text-anchor="end"
50 |               >Hello, World!</text>
51 |     </g>
52 | 
53 | </svg>


--------------------------------------------------------------------------------
/ch10-fonts-files/generic-fonts-monospace.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch10-fonts-files/generic-fonts-monospace.PNG


--------------------------------------------------------------------------------
/ch10-fonts-files/generic-fonts-monospace.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      width="4in" height="1in">
 4 |     <title xml:lang="en">Monospace font families 
 5 |                         for various scripts</title>
 6 |     <style type="text/css">
 7 |         svg {
 8 |             font-size: 24px;
 9 |         }
10 |         text {
11 |             font-family: monospace;
12 |             fill: firebrick;
13 |             fill: url(#stripes) firebrick;
14 |         }
15 |         [writing-mode="tb"]{
16 |             writing-mode: vertical-rl;
17 |         }
18 |         [glyph-orientation-vertical="0"]{
19 |             text-orientation: upright;
20 |         }
21 |         :lang(en){ 
22 |             font-family: Lucida Console, monospace;
23 |         }
24 |         :lang(ru){ 
25 |             font-family: Courier New, monospace;
26 |         }
27 |         :lang(he){ 
28 |             font-family: Miriam Fixed, monospace;
29 |         }
30 |         :lang(ar){ 
31 |             font-family: Simplified Arabic Fixed, monospace;
32 |         }
33 |     </style>
34 |     <pattern id="stripes"
35 |              patternUnits="userSpaceOnUse" patternTransform="rotate(50)"
36 |              width="6px" height="10px">
37 |         <rect fill="coral" width="2px" height="10px" />
38 |         <rect fill="firebrick" x="2px" width="2px" height="10px" />
39 |         <rect fill="indianred" x="4px" width="2px" height="10px" />
40 |     </pattern>
41 |     <rect fill="lightblue" width="100%" height="4em" />
42 |     <text x="50%" dx="0.3em" y="1.2em" xml:lang="en"
43 |           >Hello, World!</text>
44 |     <text x="50%" dx="0.3em" y="3.2em" xml:lang="ru"
45 |           >Привет мир!</text>
46 |     <text x="50%" dx="-0em" y="1.2em" xml:lang="he" direction="rtl"
47 |           >שלום העולם!</text>
48 |     <text x="50%" dx="-0em" y="3.2em" xml:lang="ar" direction="rtl"
49 |           >مرحبا أيها العالم!</text>
50 | 
51 | </svg>


--------------------------------------------------------------------------------
/ch10-fonts-files/generic-fonts-sans-serif.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch10-fonts-files/generic-fonts-sans-serif.PNG


--------------------------------------------------------------------------------
/ch10-fonts-files/generic-fonts-sans-serif.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      width="4in" height="1in">
 4 |     <title xml:lang="en">Sans-serif font families 
 5 |                         for various scripts</title>
 6 |     <style type="text/css">
 7 |         svg {
 8 |             font-size: 24px;
 9 |         }
10 |         text {
11 |             font-family: sans-serif;
12 |             fill: mediumBlue;
13 |             fill: url(#stripes) mediumBlue;
14 |         }
15 |         [writing-mode="tb"]{
16 |             writing-mode: vertical-rl;
17 |         }
18 |         [glyph-orientation-vertical="0"]{
19 |             text-orientation: upright;
20 |         }
21 |         :lang(en){ 
22 |             font-family: Verdana, sans-serif;
23 |         }
24 |         :lang(ru){ 
25 |             font-family: Corbel, sans-serif;
26 |         }
27 |         :lang(he){ 
28 |             font-family: Gisha, sans-serif;
29 |         }
30 |         :lang(ar){ 
31 |             font-family: Segoe UI, sans-serif;
32 |         }
33 |         :lang(zh-Hans){ 
34 |             font-family: SimHei, sans-serif;
35 |         }
36 |     </style>
37 |     <pattern id="stripes"
38 |              patternUnits="userSpaceOnUse" patternTransform="rotate(50)"
39 |              width="6px" height="10px">
40 |         <rect fill="mediumBlue" width="2px" height="10px" />
41 |         <rect fill="mediumpurple" x="2px" width="2px" height="10px" />
42 |         <rect fill="mediumslateblue" x="4px" width="2px" height="10px" />
43 |     </pattern>
44 |     <rect fill="cornsilk" width="100%" height="4em" />
45 |     <text x="50%" dx="1.2em" y="1.2em" xml:lang="en"
46 |           >Hello, World!</text>
47 |     <text x="50%" dx="1.2em" y="3.2em" xml:lang="ru"
48 |           >Привет мир!</text>
49 |     <text x="50%" dx="-1.2em" y="1.2em" xml:lang="he" direction="rtl"
50 |           >שלום העולם!</text>
51 |     <text x="50%" dx="-1.2em" y="3.2em" xml:lang="ar" direction="rtl"
52 |           >مرحبا أيها العالم!</text>
53 |     <text x="50%" xml:lang="zh-Hans" y="0.2em"
54 |           writing-mode="tb">你好！</text>
55 | 
56 | </svg>


--------------------------------------------------------------------------------
/ch10-fonts-files/generic-fonts-serif.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch10-fonts-files/generic-fonts-serif.PNG


--------------------------------------------------------------------------------
/ch10-fonts-files/generic-fonts-serif.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg"
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      width="4in" height="1in">
 4 |     <title xml:lang="en">Serif font families 
 5 |                         for various scripts</title>
 6 |     <style type="text/css">
 7 |         svg {
 8 |             font-size: 24px;
 9 |         }
10 |         text {
11 |             font-family: serif;
12 |             fill: seagreen;
13 |             fill: url(#stripes) seagreen;
14 |         }
15 |         [writing-mode="tb"]{
16 |             writing-mode: vertical-rl;
17 |         }
18 |         [glyph-orientation-vertical="0"]{
19 |             text-orientation: upright;
20 |         }
21 |         :lang(en){ 
22 |             font-family: Georgia, serif;
23 |         }
24 |         :lang(ru){ 
25 |             font-family: Constantia, serif;
26 |         }
27 |         :lang(he){ 
28 |             font-family: David, serif;
29 |         }
30 |         :lang(ar){ 
31 |             font-family: Andalus, serif;
32 |         }
33 |         :lang(zh-Hans){ 
34 |             font-family: SimSun, serif;
35 |         }
36 |     </style>
37 |     <pattern id="stripes"
38 |              patternUnits="userSpaceOnUse" patternTransform="rotate(50)"
39 |              width="6px" height="10px">
40 |         <rect fill="seagreen" width="2px" height="10px" />
41 |         <rect fill="mediumseagreen" x="2px" width="2px" height="10px" />
42 |         <rect fill="darkgreen" x="4px" width="2px" height="10px" />
43 |     </pattern>
44 |     <rect fill="linen" width="100%" height="4em" />
45 |     <text x="50%" dx="1.2em" y="1.2em" xml:lang="en"
46 |           >Hello, World!</text>
47 |     <text x="50%" dx="1.2em" y="3.2em" xml:lang="ru"
48 |           >Привет мир!</text>
49 |     <text x="50%" dx="-1.2em" y="1.2em" xml:lang="he" direction="rtl"
50 |           >שלום העולם!</text>
51 |     <text x="50%" dx="-1.2em" y="3.2em" xml:lang="ar" direction="rtl"
52 |           >مرحبا أيها العالم!</text>
53 |     <text x="50%" xml:lang="zh-Hans" y="0.2em"
54 |           writing-mode="tb">你好！</text>
55 | 
56 | </svg>


--------------------------------------------------------------------------------
/ch10-fonts-files/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>ch10 Fonts, Fimilies, Faces — Supplementary Material: SVG Text Layout</title>
 5 |     <link rel="stylesheet" href="../index.css" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   </head>
 8 |   <body>
 9 | <header>
10 |   <h1><a href="../"><cite>SVG Text Layout</cite></a></h1>
11 |   <p>Example code for the O&rsquo;Reilly Media book</p>
12 |   <p>by Amelia Bellamy-Royds &amp; Kurt Cagle</p>
13 | </header>
14 | <main>
15 |   <h1>Fonts, Families, Faces</h1>
16 |   <p>Chapter 10 explores fonts and their impact on SVG text, including the use of the <code>@font-face</code> rule to incorporate web fonts in your SVG graphics online.</p>
17 |   <p>
18 |   The links below will open the live example files or high-res PNG or JPEG screenshots in a new browser tab.  Alternatively, <a href="https://github.com/oreillymedia/SVG_Text_Layout">you can download the entire collection as a zip archive or fork it as a GitHub repository</a>.  Be sure to read the <a href="http://shop.oreilly.com/category/customer-service/faq-examples.do">O&rsquo;Reilly Media policy on the use of example code</a>.
19 |   </p>
20 | <ul>
21 |   <li>Inline figures (examples of font family types&mdash;some fonts may not be available on your system): 
22 |     <ul>
23 |       <li><a target="_blank" href="generic-fonts-serif.svg">serif fonts SVG file</a></li>
24 |       <li><a target="_blank" href="generic-fonts-serif.PNG">serif fonts screenshot</a></li>
25 |       <li><a target="_blank" href="generic-fonts-sans-serif.svg">sans-serif fonts SVG file</a></li>
26 |       <li><a target="_blank" href="generic-fonts-sans-serif.PNG">sans-serif fonts screenshot</a></li>
27 |       <li><a target="_blank" href="generic-fonts-monospace.svg">monospace fonts SVG file</a></li>
28 |       <li><a target="_blank" href="generic-fonts-monospace.PNG">monospace fonts screenshot</a></li>
29 |       <li><a target="_blank" href="generic-fonts-cursive.svg">cursive fonts SVG file</a></li>
30 |       <li><a target="_blank" href="generic-fonts-cursive.PNG">cursive fonts screenshot</a></li>
31 |       <li><a target="_blank" href="generic-fonts-fantasy.svg">fantasy fonts SVG file</a></li>
32 |       <li><a target="_blank" href="generic-fonts-fantasy.PNG">fantasy fonts screenshot</a></li>
33 |   </ul></li>
34 |   <li>Figure 10-1 (comparing fonts in the same file): 
35 |     <ul>
36 |       <li><a target="_blank" href="bam-boom-comparison.PNG">screenshot collage</a></li>
37 |       <li>See also the original files in <a href="../ch05-position-char-files/">Chapter 5</a></li>
38 |   </ul></li>
39 |   <li>Example 10-1 &amp; Figure 10-2 (using web fonts and <code>@font-face</code>): 
40 |     <ul>
41 |       <li><a target="_blank" href="penpal-fonts.svg">SVG file</a></li>
42 |       <li><a target="_blank" href="penpal-fonts.PNG">screenshot</a></li>
43 |       <li>See also <a href="/ch11-size-adjust.asciidoc">Chapter 11</a> for more variations on this example</li>
44 |   </ul></li>
45 | </ul>
46 |   <p>Return to the <a href="../">main table of contents</a>.</p>
47 | </main>
48 | <footer>
49 |   <p>Don&rsquo;t have a copy of <cite>SVG Text Layout</cite> already? 
50 |   </p>
51 |   <p>
52 |     Order a print book or <abbr title="Digital Rights Management">DRM</abbr>-free e-book <a href="http://shop.oreilly.com/product/0636920043072.do">from O&rsquo;Reilly Media</a>, or access it through your Safari Books Online subscription.</p>
53 | </footer>
54 |   </body>
55 | </html>


--------------------------------------------------------------------------------
/ch10-fonts-files/penpal-fonts.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch10-fonts-files/penpal-fonts.PNG


--------------------------------------------------------------------------------
/ch10-fonts-files/penpal-fonts.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      width="4.3in" height="4.3in" viewBox="0 0 400 400">
 4 |     <title>Dear Pen Pal</title>
 5 |     <style type="text/css">
 6 | @font-face {
 7 |     font-family: "hand-writing"; 
 8 |     font-weight: normal;
 9 |     font-style: italic;
10 |     src: local("Morado Marker"), local("morado-marker"),
11 |          url("../Fonts/morado marker.woff") format("woff"),
12 |          url("../Fonts/morado marker.ttf") format("truetype");
13 |     /* Morado by Peter Wiegel
14 |        Downloaded from: http://www.dafont.com/morado.font 
15 |     */
16 | }
17 | @font-face {
18 |     font-family: hand-writing; 
19 |     src: local("CoolStory"), local("CoolStory Regular"),
20 |          url("../Fonts/coolstory regular.woff") format("woff"),
21 |          url("../Fonts/coolstory regular.ttf") format("truetype");
22 |     /* Cool Story by Peter Olexa 
23 |        Downloaded from: http://www.dafont.com/coolstory.font 
24 |     */
25 | }
26 | svg {
27 |     background-color: lightSkyBlue;
28 |     border: solid thin;
29 |     margin: 10px;
30 | 
31 |     font-family: "hand-writing", cursive;
32 |     font-size: 36px;
33 | }
34 |     </style>
35 |     <defs>
36 |         <rect id="paper" width="300" height="350" rx="3"/>
37 |     </defs>
38 |     <g transform="translate(-5,50) rotate(-20) skewY(5)">
39 |         <use xlink:href="#paper" transform="translate(-10,15)"
40 |              fill="black" fill-opacity="0.3"/>
41 |         <use xlink:href="#paper" fill="linen" stroke="bisque"/>
42 |         <g transform="translate(0,20)">
43 |             <text font-style="italic" font-size="48px"
44 |                   x="30" y="50" >Dear Pen Pal,</text>
45 |             <text>
46 |                 <tspan x="10" y="100">Today, I received a</tspan>
47 |                 <tspan x="10" dy="50">new letter from my</tspan>
48 |                 <tspan x="10" dy="50">pen pal.  Hooray!</tspan>
49 |             </text>
50 |             <text font-style="italic" font-size="48px"
51 |                   x="100" y="250" >Sincerely,</text>
52 |             <text x="200" y="300" font-size="larger">Me</text>
53 |         </g>
54 |     </g>
55 | </svg>


--------------------------------------------------------------------------------
/ch11-size-adjust-files/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>ch11 The Perfect Fit — Supplementary Material: SVG Text Layout</title>
 5 |     <link rel="stylesheet" href="../index.css" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   </head>
 8 |   <body>
 9 | <header>
10 |   <h1><a href="../"><cite>SVG Text Layout</cite></a></h1>
11 |   <p>Example code for the O&rsquo;Reilly Media book</p>
12 |   <p>by Amelia Bellamy-Royds &amp; Kurt Cagle</p>
13 | </header>
14 | <main>
15 |   <h1>The Perfect Fit</h1>
16 |   <p>Chapter 11 looks at the <code>textLength</code> attribute and <code>font-size-adjust</code> property, which can be used to standardize text layout when you don’t have full control over the fonts used; the chapter also describes decorative uses for <code>textLength</code>.</p>
17 |   <p>
18 |   The links below will open the live example files or high-res PNG or JPEG screenshots in a new browser tab.  Alternatively, <a href="https://github.com/oreillymedia/SVG_Text_Layout">you can download the entire collection as a zip archive or fork it as a GitHub repository</a>.  Be sure to read the <a href="http://shop.oreilly.com/category/customer-service/faq-examples.do">O&rsquo;Reilly Media policy on the use of example code</a>.
19 |   </p>
20 | <ul>
21 |   <li>Figure 11-1 (comparing web fonts versus a fallback font): 
22 |     <ul>
23 |       <li><a target="_blank" href="penpal-fonts-fallback-comparison.PNG">screenshot collage</a></li>
24 |       <li>See also the original files in <a href="../ch10-fonts-files/">Chapter 11</a></li>
25 |   </ul></li>
26 |   <li>Example 11-1 &amp; Figure 11-2 (using <code>textLength</code> and <code>font-size-adjust</code> to constrain layout when using fallback fonts): 
27 |     <ul>
28 |       <li><a target="_blank" href="penpal-font-adjust.svg">SVG file</a></li>
29 |       <li><a target="_blank" href="penpal-font-adjust.PNG">screenshot collage, of different font and property support combinations</a></li>
30 |   </ul></li>
31 |   <li>Example 11-2 &amp; Figure 11-3 (using <code>textLength</code> and <code>lengthAdjust</code> for graphical effect): 
32 |     <ul>
33 |       <li><a target="_blank" href="lengthAdjust.html">HTML file</a></li>
34 |       <li><a target="_blank" href="lengthAdjust.PNG">screenshot</a></li>
35 |   </ul></li>
36 | </ul>
37 |   <p>Return to the <a href="../">main table of contents</a>.</p>
38 | </main>
39 | <footer>
40 |   <p>Don&rsquo;t have a copy of <cite>SVG Text Layout</cite> already? 
41 |   </p>
42 |   <p>
43 |     Order a print book or <abbr title="Digital Rights Management">DRM</abbr>-free e-book <a href="http://shop.oreilly.com/product/0636920043072.do">from O&rsquo;Reilly Media</a>, or access it through your Safari Books Online subscription.</p>
44 | </footer>
45 |   </body>
46 | </html>


--------------------------------------------------------------------------------
/ch11-size-adjust-files/lengthAdjust.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch11-size-adjust-files/lengthAdjust.PNG


--------------------------------------------------------------------------------
/ch11-size-adjust-files/lengthAdjust.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8"/>
 5 |     <title>SVG lengthAdjust for Graphical Effect</title>
 6 |     <style>
 7 |         body {
 8 |             font: large serif;
 9 |             padding: 1em;
10 |             background: lightSlateGray;
11 |         }
12 |         table {
13 |             table-layout: fixed;
14 |             border-collapse: collapse;
15 |             background: white;
16 |             width: 100%;
17 |         }
18 |         th, td {  
19 |             border: solid thick dimgray;
20 |         }
21 |         th {
22 |             font: bold x-large sans-serif;
23 |             background-color: #EEF;
24 |             border-style: double;
25 |             color: #222;
26 |         }
27 |         th svg {
28 |             display: block;
29 |             height: 1.25em;
30 |             width: 100%;
31 |             max-width: 12em;
32 |             margin: auto;
33 |             padding: 0.25em 0;
34 |             overflow: visible;         <!--1-->
35 |         }
36 |         th svg text {   
37 |             fill: currentColor;
38 |             font-size: 24px;           <!--2-->
39 |         }
40 |         td {
41 |             padding: 0.2em;
42 |         }
43 |     </style>
44 | </head>
45 | <body>
46 |     <table>
47 |         <tr>
48 |             <th><svg viewBox="0 0 135 30">                 <!--3-->
49 |                 <text dy="1em" textLength="135"
50 |                       lengthAdjust="spacingAndGlyphs"
51 |                       >This text is too long</text>        <!--4-->
52 |             </svg></th>
53 |             <td>Look! Each heading has the 
54 |                 same length.</td>
55 |         </tr>
56 |         <tr>
57 |             <th><svg viewBox="0 0 135 30">
58 |                 <text dy="1em" textLength="135"
59 |                       lengthAdjust="spacingAndGlyphs"
60 |                       >Short</text>                        <!--5-->
61 |             </svg></th>
62 |             <td>Cool effect, don't you think?</td>
63 |         </tr>
64 |         <tr>
65 |             <th><svg viewBox="0 0 135 30">
66 |                 <text dy="1em" textLength="135"
67 |                       lengthAdjust="spacingAndGlyphs"
68 |                       >Just Right</text>
69 |             </svg></th>
70 |             <td>They compress on smaller screens, too!</td>
71 |         </tr>
72 |     </table>
73 | </body>
74 | </html>


--------------------------------------------------------------------------------
/ch11-size-adjust-files/penpal-font-adjust-comparison.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch11-size-adjust-files/penpal-font-adjust-comparison.PNG


--------------------------------------------------------------------------------
/ch11-size-adjust-files/penpal-font-adjust-comparison.xcf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch11-size-adjust-files/penpal-font-adjust-comparison.xcf


--------------------------------------------------------------------------------
/ch11-size-adjust-files/penpal-font-adjust-fallback-no-adjust.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch11-size-adjust-files/penpal-font-adjust-fallback-no-adjust.PNG


--------------------------------------------------------------------------------
/ch11-size-adjust-files/penpal-font-adjust-fallback.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch11-size-adjust-files/penpal-font-adjust-fallback.PNG


--------------------------------------------------------------------------------
/ch11-size-adjust-files/penpal-font-adjust-no-adjust.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch11-size-adjust-files/penpal-font-adjust-no-adjust.PNG


--------------------------------------------------------------------------------
/ch11-size-adjust-files/penpal-font-adjust.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch11-size-adjust-files/penpal-font-adjust.PNG


--------------------------------------------------------------------------------
/ch11-size-adjust-files/penpal-font-adjust.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"
 2 |      xmlns:xlink="http://www.w3.org/1999/xlink"
 3 |      width="4.3in" height="4.3in" viewBox="0 0 400 400">
 4 |     <title>Dear Pen Pal</title>
 5 |     <style type="text/css">
 6 | @font-face {                                               <!--1-->
 7 |     font-family: "hand-writing"; 
 8 |     font-weight: normal;
 9 |     font-style: italic;
10 |     src: /* local("Morado Marker"), local("morado-marker"), */
11 |          url("../Fonts/morado marker.woff") format("woff"),
12 |          url("../Fonts/morado marker.ttf") format("truetype");
13 |     /* Morado by Peter Wiegel
14 |        Downloaded from: http://www.dafont.com/morado.font 
15 |     */
16 | }
17 | @font-face {
18 |     font-family: hand-writing; 
19 |     src: local("CoolStory"), local("CoolStory Regular"),
20 |          url("../Fonts/coolstory regular.woff") format("woff"),
21 |          url("../Fonts/coolstory regular.ttf") format("truetype");
22 |     /* CoolStory by Peter Olexa 
23 |        Downloaded from: http://www.dafont.com/coolstory.font 
24 |     */
25 | }
26 | svg {
27 |     background-color: lightSkyBlue;
28 |     border: solid thin;
29 |     margin: 10px;
30 | 
31 |     font-family: "hand-writing", cursive;
32 |     font-size: 36px;
33 |     font-size-adjust: 0.50;                                <!--2-->
34 |         
35 | }
36 |     </style>
37 |     <defs>
38 |         <rect id="paper" width="300" height="350" rx="3"/>
39 |     </defs>
40 |     <g transform="translate(-5,50) rotate(-20) skewY(5)">
41 |         <use xlink:href="#paper" transform="translate(-10,15)"
42 |              fill="black" fill-opacity="0.3"/>
43 |         <use xlink:href="#paper" fill="linen" stroke="bisque"/>
44 |         <g transform="translate(0,20)">
45 |             <text font-style="italic" 
46 |                   x="30" y="50" >Dear Pen Pal,</text>      <!--3-->
47 |             <text x="10" y="100" textLength="245"
48 |                    >Today, I received a</text>             <!--4-->
49 |             <text x="10" y="150" textLength="260"
50 |                    >new letter from my</text>
51 |             <text x="10" y="200" textLength="200"
52 |                    >pen pal.  Hooray!</text>
53 |             <text font-style="italic" 
54 |                   x="100" y="250" >Sincerely,</text>
55 |             <text x="200" y="300" font-size="larger">Me</text>
56 |         </g>
57 |     </g>
58 | </svg>


--------------------------------------------------------------------------------
/ch11-size-adjust-files/penpal-fonts-fallback-comparison.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch11-size-adjust-files/penpal-fonts-fallback-comparison.PNG


--------------------------------------------------------------------------------
/ch11-size-adjust-files/penpal-fonts-fallback-comparison.xcf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch11-size-adjust-files/penpal-fonts-fallback-comparison.xcf


--------------------------------------------------------------------------------
/ch11-size-adjust-files/penpal-fonts-fallback.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch11-size-adjust-files/penpal-fonts-fallback.PNG


--------------------------------------------------------------------------------
/ch12-foreignObject-files/foreignObject-labels-hover-effects.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch12-foreignObject-files/foreignObject-labels-hover-effects.PNG


--------------------------------------------------------------------------------
/ch12-foreignObject-files/foreignObject-labels-hover-effects.svg:
--------------------------------------------------------------------------------
  1 | <svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"
  2 |      width="4in" height="6.5in" viewBox="0 0 400 650" >
  3 |     <title>Interactive ForeignObjects describing SVG Shapes</title>
  4 |     <style type="text/css">
  5 |         @namespace html "http://www.w3.org/1999/xhtml";  <!--1-->
  6 |         .shape {
  7 |             fill: deepSkyBlue;                   <!--2-->
  8 |             stroke: blueViolet;
  9 |             stroke-width: 3px;          
 10 |             stroke-linecap: round;
 11 |         }
 12 |         .backdrop {
 13 |             fill: #CED;
 14 |         }
 15 |         text {
 16 |             font-size: medium;
 17 |             font-family: serif;
 18 |         }
 19 |         text[role="heading"] { 
 20 |             font: bold 64px sans-serif;        
 21 |             text-decoration: underline overline;  
 22 |         
 23 |             fill: url(#blue-shine) darkBlue;        
 24 |         }
 25 |         html|* {
 26 |             box-sizing: border-box;              <!--3-->
 27 |         }
 28 |         html {
 29 |             height: 100%;                        <!--4-->
 30 |             width: 100%;
 31 |             background-color: white;
 32 |             border: 2px solid lightGray;
 33 |             border-radius: 5px;
 34 |             overflow: auto;                      <!--5-->
 35 |         }
 36 |         p {
 37 |             font-family: sans-serif;             <!--6-->
 38 |             width: 100%;
 39 |             height: 100%;
 40 |             margin: 0;
 41 |             padding: 0.1em 0.2em;
 42 |         }
 43 |         g:hover html, html:focus {
 44 |             border-color: crimson;
 45 |         }
 46 |         g:hover .shape {
 47 |             stroke: crimson;
 48 |         }
 49 |         g:has(:focus) .shape {
 50 |             stroke: crimson;
 51 |         }
 52 |         :focus {
 53 |             outline: none;
 54 |         }
 55 |     </style>
 56 |     <linearGradient id="blue-shine" y2="100%">
 57 |         <stop offset="0.1" stop-color="darkBlue" />
 58 |         <stop offset="0.3" stop-color="deepSkyBlue" />
 59 |         <stop offset="0.5" stop-color="dodgerBlue" />
 60 |         <stop offset="0.7" stop-color="darkBlue" />
 61 |     </linearGradient>
 62 |     <rect width="100%" height="100%" class="backdrop" />
 63 |     <g>
 64 |         <line x1="10" y1="10" x2="90" y2="40" class="shape" />
 65 |         <text x="120" y="30" >Line</text>
 66 |         <foreignObject x="10" y="50" width="180" height="90"> <!--5-->
 67 |             <html xmlns="http://www.w3.org/1999/xhtml" 
 68 |                   tabindex="0">                               <!--6-->
 69 |                 <p>The <code>&lt;line&gt;</code> element draws
 70 |                     a straight line defined by its start and 
 71 |                     end points.</p>                           <!--7-->
 72 |             </html>
 73 |         </foreignObject>
 74 |     </g>
 75 |     <g transform="translate(200,0)">
 76 |         <rect x="10" y="10" width="80" height="30" rx="5" 
 77 |               class="shape" />
 78 |         <text x="120" y="30" >Rectangle</text>
 79 |         <foreignObject x="10" y="50" width="180" height="90"> <!--8-->
 80 |             <html xmlns="http://www.w3.org/1999/xhtml" 
 81 |                   tabindex="0">
 82 |                 <p>The <code>&lt;rect&gt;</code> element draws
 83 |                     a rectangle, optionally with rounded
 84 |                     corners.</p>            
 85 |             </html>
 86 |         </foreignObject>
 87 |     </g>
 88 |     <g transform="translate(0,150)">
 89 |         <circle cx="50" cy="25" r="20" class="shape" />
 90 |         <text x="120" y="30" >Circle</text>
 91 |         <foreignObject x="10" y="50" width="180" height="90">
 92 |             <html xmlns="http://www.w3.org/1999/xhtml" 
 93 |                   tabindex="0">
 94 |                 <p>The <code>&lt;circle&gt;</code> element draws
 95 |                     a circle defined by its center-point and
 96 |                     radius.</p>            
 97 |             </html>
 98 |         </foreignObject>
 99 |     </g>
100 |     <g transform="translate(200,150)">
101 |         <ellipse cx="50" cy="25" rx="40" ry="20" class="shape" />
102 |         <text x="120" y="30" >Ellipse</text>
103 |         <foreignObject x="10" y="50" width="180" height="90">
104 |             <html xmlns="http://www.w3.org/1999/xhtml" 
105 |                   tabindex="0">
106 |                 <p>The <code>&lt;ellipse&gt;</code> element draws
107 |                     an ellipse, which is like a stretched circle
108 |                     or a rectangle with rounded corners that meet
109 |                     in the middle.</p>            
110 |             </html>
111 |         </foreignObject>
112 |     </g>
113 |     <g transform="translate(0,300)">
114 |         <polygon points="10,10 50,40 90,10 50,25" class="shape" />
115 |         <text x="120" y="30" >Polygon</text>
116 |         <foreignObject x="10" y="50" width="180" height="90">
117 |             <html xmlns="http://www.w3.org/1999/xhtml" 
118 |                   tabindex="0">
119 |                 <p>The <code>&lt;polygon&gt;</code> element draws
120 |                     a custom shape by connecting a series of 
121 |                     points.</p>            
122 |             </html>
123 |         </foreignObject>
124 |     </g>
125 |     <g transform="translate(200,300)">
126 |         <polyline points="10,10 50,40 90,10 50,25" 
127 |                   class="shape" style="fill: none" />
128 |         <text x="120" y="30" >Polyline</text>
129 |         <foreignObject x="10" y="50" width="180" height="90">
130 |             <html xmlns="http://www.w3.org/1999/xhtml" 
131 |                   tabindex="0">
132 |                 <p>The <code>&lt;polyline&gt;</code> element 
133 |                     also connects a series of points,
134 |                     but does not insert a final stroke from the
135 |                     last point to the first.</p>            
136 |             </html>
137 |         </foreignObject>
138 |     </g>
139 |     <g transform="translate(0,450)">
140 |         <path d="M10,10 C15,50 85,50 90,10 L50,25 Z" class="shape" />
141 |         <text x="50" y="75" text-anchor="middle">Path</text>
142 |         <foreignObject x="125" y="0" width="265" height="90">
143 |             <html xmlns="http://www.w3.org/1999/xhtml" 
144 |                   tabindex="0">
145 |                 <p>The <code>&lt;path&gt;</code> element 
146 |                     can be used to draw any of the above,
147 |                     or to create a custom shape with a mixture
148 |                     of lines, Bézier curves, and arcs.</p>            
149 |             </html>
150 |         </foreignObject>
151 |     </g>
152 |     <text x="50%" text-anchor="middle" transform="translate(0,625)"
153 |           textLength="400" lengthAdjust="spacingAndGlyphs"
154 |           xml:space="preserve" style="whitespace:preserve"
155 |           role="heading"> SVG Shapes </text>
156 | </svg>


--------------------------------------------------------------------------------
/ch12-foreignObject-files/foreignObject-labels.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreillymedia/SVG_Text_Layout/58d970f3d73359c543eeb05bf7d79c008b64826a/ch12-foreignObject-files/foreignObject-labels.PNG


--------------------------------------------------------------------------------
/ch12-foreignObject-files/foreignObject-labels.svg:
--------------------------------------------------------------------------------
  1 | <svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"
  2 |      width="4in" height="6.5in" viewBox="0 0 400 650" >
  3 |     <title>ForeignObjects describing SVG Shapes</title>
  4 |     <style type="text/css">
  5 |         @namespace html "http://www.w3.org/1999/xhtml";  <!--1-->
  6 |         .shape {
  7 |             fill: deepSkyBlue;                   <!--2-->
  8 |             stroke: blueViolet;
  9 |             stroke-width: 3px;          
 10 |             stroke-linecap: round;
 11 |         }
 12 |         .backdrop {
 13 |             fill: #CED;
 14 |         }
 15 |         text {
 16 |             font-size: medium;
 17 |             font-family: serif;
 18 |         }
 19 |         text[role="heading"] { 
 20 |             font: bold 64px sans-serif;        
 21 |             text-decoration: underline overline;  
 22 |             white-space: pre;
 23 |             fill: url(#blue-shine) darkBlue;        
 24 |         }
 25 |         html|* {
 26 |             box-sizing: border-box;              <!--3-->
 27 |         }
 28 |         html {
 29 |             height: 100%;                        <!--4-->
 30 |             width: 100%;
 31 |             background-color: white;
 32 |             border: 2px solid lightGray;
 33 |             border-radius: 5px;
 34 |             overflow: auto;                      <!--5-->
 35 |         }
 36 |         p {
 37 |             font-family: sans-serif;             <!--6-->
 38 |             width: 100%;
 39 |             height: 100%;
 40 |             margin: 0;
 41 |             padding: 0.1em 0.2em;
 42 |         }
 43 |     </style>
 44 |     <linearGradient id="blue-shine" y2="100%">
 45 |         <stop offset="0.1" stop-color="darkBlue" />
 46 |         <stop offset="0.3" stop-color="deepSkyBlue" />
 47 |         <stop offset="0.5" stop-color="dodgerBlue" />
 48 |         <stop offset="0.7" stop-color="darkBlue" />
 49 |     </linearGradient>
 50 |     <rect width="100%" height="100%" class="backdrop" />
 51 |     <g>
 52 |         <line x1="10" y1="10" x2="90" y2="40" class="shape" />
 53 |         <text x="120" y="30" >Line</text>
 54 |         <foreignObject x="10" y="50" width="180" height="90"> <!--5-->
 55 |             <html xmlns="http://www.w3.org/1999/xhtml" 
 56 |                   tabindex="0">                               <!--6-->
 57 |                 <p>The <code>&lt;line&gt;</code> element draws
 58 |                     a straight line defined by its start and 
 59 |                     end points.</p>                           <!--7-->
 60 |             </html>
 61 |         </foreignObject>
 62 |     </g>
 63 |     <g transform="translate(200,0)">
 64 |         <rect x="10" y="10" width="80" height="30" rx="5" 
 65 |               class="shape" />
 66 |         <text x="120" y="30" >Rectangle</text>
 67 |         <foreignObject x="10" y="50" width="180" height="90"> <!--8-->
 68 |             <html xmlns="http://www.w3.org/1999/xhtml" 
 69 |                   tabindex="0">
 70 |                 <p>The <code>&lt;rect&gt;</code> element draws
 71 |                     a rectangle, optionally with rounded
 72 |                     corners.</p>            
 73 |             </html>
 74 |         </foreignObject>
 75 |     </g>
 76 |     <g transform="translate(0,150)">
 77 |         <circle cx="50" cy="25" r="20" class="shape" />
 78 |         <text x="120" y="30" >Circle</text>
 79 |         <foreignObject x="10" y="50" width="180" height="90">
 80 |             <html xmlns="http://www.w3.org/1999/xhtml" 
 81 |                   tabindex="0">
 82 |                 <p>The <code>&lt;circle&gt;</code> element draws
 83 |                     a circle defined by its center-point and
 84 |                     radius.</p>            
 85 |             </html>
 86 |         </foreignObject>
 87 |     </g>
 88 |     <g transform="translate(200,150)">
 89 |         <ellipse cx="50" cy="25" rx="40" ry="20" class="shape" />
 90 |         <text x="120" y="30" >Ellipse</text>
 91 |         <foreignObject x="10" y="50" width="180" height="90">
 92 |             <html xmlns="http://www.w3.org/1999/xhtml" 
 93 |                   tabindex="0">
 94 |                 <p>The <code>&lt;ellipse&gt;</code> element draws
 95 |                     an ellipse, which is like a stretched circle
 96 |                     or a rectangle with rounded corners that meet
 97 |                     in the middle.</p>            
 98 |             </html>
 99 |         </foreignObject>
100 |     </g>
101 |     <g transform="translate(0,300)">
102 |         <polygon points="10,10 50,40 90,10 50,25" class="shape" />
103 |         <text x="120" y="30" >Polygon</text>
104 |         <foreignObject x="10" y="50" width="180" height="90">
105 |             <html xmlns="http://www.w3.org/1999/xhtml" 
106 |                   tabindex="0">
107 |                 <p>The <code>&lt;polygon&gt;</code> element draws
108 |                     a custom shape by connecting a series of 
109 |                     points.</p>            
110 |             </html>
111 |         </foreignObject>
112 |     </g>
113 |     <g transform="translate(200,300)">
114 |         <polyline points="10,10 50,40 90,10 50,25" 
115 |                   class="shape" style="fill: none" />
116 |         <text x="120" y="30" >Polyline</text>
117 |         <foreignObject x="10" y="50" width="180" height="90">
118 |             <html xmlns="http://www.w3.org/1999/xhtml" 
119 |                   tabindex="0">
120 |                 <p>The <code>&lt;polyline&gt;</code> element 
121 |                     also connects a series of points,
122 |                     but does not insert a final stroke from the
123 |                     last point to the first.</p>            
124 |             </html>
125 |         </foreignObject>
126 |     </g>
127 |     <g transform="translate(0,450)">
128 |         <path d="M10,10 C15,50 85,50 90,10 L50,25 Z" class="shape" />
129 |         <text x="50" y="75" text-anchor="middle">Path</text>
130 |         <foreignObject x="125" y="0" width="265" height="90">
131 |             <html xmlns="http://www.w3.org/1999/xhtml" 
132 |                   tabindex="0">
133 |                 <p>The <code>&lt;path&gt;</code> element 
134 |                     can be used to draw any of the above,
135 |                     or to create a custom shape with a mixture
136 |                     of lines, Bézier curves, and arcs.</p>            
137 |             </html>
138 |         </foreignObject>
139 |     </g>
140 |     <text x="50%" text-anchor="middle" transform="translate(0,625)"
141 |           textLength="400" lengthAdjust="spacingAndGlyphs"
142 |           xml:space="preserve"
143 |           role="heading"> SVG Shapes </text>
144 | </svg>


--------------------------------------------------------------------------------
/ch12-foreignObject-files/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>ch12 Extending Your Toolbox — Supplementary Material: SVG Text Layout</title>
 5 |     <link rel="stylesheet" href="../index.css" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   </head>
 8 |   <body>
 9 | <header>
10 |   <h1><a href="../"><cite>SVG Text Layout</cite></a></h1>
11 |   <p>Example code for the O&rsquo;Reilly Media book</p>
12 |   <p>by Amelia Bellamy-Royds &amp; Kurt Cagle</p>
13 | </header>
14 | <main>
15 |   <h1>Extending Your Toolbox</h1>
16 |   <p>Chapter 12 introduces the SVG <code>&lt;foreignObject&gt;</code> element, and shows how it can be used to include CSS-formatted HTML text within an SVG image.</p>
17 |   <p>
18 |   The links below will open the live example files or high-res PNG or JPEG screenshots in a new browser tab.  Alternatively, <a href="https://github.com/oreillymedia/SVG_Text_Layout">you can download the entire collection as a zip archive or fork it as a GitHub repository</a>.  Be sure to read the <a href="http://shop.oreilly.com/category/customer-service/faq-examples.do">O&rsquo;Reilly Media policy on the use of example code</a>.
19 |   </p>
20 | <ul>
21 |   <li>Example 12-1 &amp; Figure 12-1 (using <code>&lt;foreignObject&gt;</code> to creating scrolling, wrapping text blocks): 
22 |     <ul>
23 |       <li><a target="_blank" href="foreignObject-labels.svg">SVG file</a></li>
24 |       <li><a target="_blank" href="foreignObject-labels.PNG">screenshot</a></li>
25 |   </ul></li>
26 |   <li>Figure 12-1 (adding hover effects): 
27 |     <ul>
28 |       <li><a target="_blank" href="foreignObject-labels-hover-effects.svg">SVG file</a></li>
29 |       <li><a target="_blank" href="foreignObject-labels-hover-effects.PNG">partial screenshot</a></li>
30 |   </ul></li>
31 | </ul>
32 |   <p>Return to the <a href="../">main table of contents</a>.</p>
33 | </main>
34 | <footer>
35 |   <p>Don&rsquo;t have a copy of <cite>SVG Text Layout</cite> already? 
36 |   </p>
37 |   <p>
38 |     Order a print book or <abbr title="Digital Rights Management">DRM</abbr>-free e-book <a href="http://shop.oreilly.com/product/0636920043072.do">from O&rsquo;Reilly Media</a>, or access it through your Safari Books Online subscription.</p>
39 | </footer>
40 |   </body>
41 | </html>


--------------------------------------------------------------------------------
/index.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   background-color: #ffd;
  3 |   background: linear-gradient(-45deg, #ffd, #fea, #ffd 140vw);
  4 |   min-height: 100%;
  5 | }
  6 | body {
  7 |   margin: auto;
  8 |   padding: 0;
  9 | }
 10 | header, footer, main {
 11 |   display: block;
 12 |   padding: 0.5em 1em;
 13 | }
 14 | @media (max-width: 25em) {
 15 |   header, footer, main {
 16 |     padding: 0.3em;
 17 |   }
 18 |   main > ul {
 19 |     padding-left: 1em;
 20 |   }
 21 | }
 22 | header, footer {
 23 |   font-family: Georgia, serif;
 24 |   font-style: italic;
 25 |   font-size: 1.2rem;
 26 |   color: #216;
 27 | }
 28 | header p, footer p {
 29 |   margin: 0.2em auto;
 30 |   line-height: 1.2;
 31 | }
 32 | header h1 {
 33 |   margin: 0.5em 0;
 34 |   text-shadow: 1.5px 1px #b8a;
 35 | }
 36 | footer {
 37 |   border-top: solid thin currentColor;
 38 | }
 39 | 
 40 | main {
 41 |   font-family: Tahoma, sans-serif;
 42 |   font-size: 1.2rem;
 43 |   line-height: 1.2;
 44 |   color: #302;
 45 | }
 46 | main h1 {
 47 |   text-shadow: 1.5px 1px #e86;
 48 | }
 49 | main > *, footer {
 50 |   max-width: 40rem;
 51 |   margin: 1rem auto;
 52 | }
 53 | li {
 54 |   margin-bottom: 1em;
 55 |   margin-left: 0.5em;
 56 |   list-style-image: radial-gradient(closest-side, 
 57 |     #606, #302 98%, transparent 100%);
 58 | }
 59 | li ul {
 60 |   padding-left: 1.5em;
 61 | }
 62 | li li {
 63 |   margin: 0.1em;
 64 |   list-style-image: radial-gradient(closest-side, 
 65 |     #b8a, #606 98%, transparent 100%);
 66 | }
 67 | 
 68 | :link, :link * {
 69 |   color: #129;
 70 |   text-decoration-style: dotted;
 71 | }
 72 | :visited {
 73 |   color: #606;
 74 | }
 75 | header :link, header :visited {
 76 |   color: inherit;
 77 |   text-decoration: none;
 78 | }
 79 | code {
 80 |   font-family: DejaVu Sans Mono, monospace;
 81 | }
 82 | 
 83 | @media (min-width: 52em) {
 84 |   main > ul { 
 85 |     max-width: 100%;
 86 |     box-sizing: border-box;
 87 |     margin: 1em 0;
 88 |     -moz-column-width: 25em;
 89 |     -webkit-column-width: 25em;
 90 |     column-width: 25em;
 91 |     -moz-column-gap: 2em;
 92 |     -webkit-column-gap: 2em;
 93 |     column-gap: 2em;
 94 |   }
 95 |   li {
 96 |     page-break-inside: avoid; /* used for columns by Firefox */
 97 |     -webkit-column-break-inside: avoid;
 98 |     break-inside: avoid;
 99 |   }
100 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>SVG Text Layout: Supplementary Material</title>
 5 |     <link rel="stylesheet" href="index.css" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   </head>
 8 |   <body>
 9 | <header>
10 |   <h1><cite>SVG Text Layout</cite></h1>
11 |   <p>Example code for the O&rsquo;Reilly Media book</p>
12 |   <p>by Amelia Bellamy-Royds &amp; Kurt Cagle</p>
13 | </header>
14 | <main>
15 |   <h1>Overview</h1>
16 |   <p>
17 |   <a href="http://shop.oreilly.com/product/0636920043072.do"><cite>SVG Text Layout</cite></a> takes an in-depth look at how complex text layouts can be created with SVG markup and styles.  The many examples demonstrate the concepts with stand-alone SVG graphics or inline SVG code in HTML pages.
18 |   </p>
19 |   <p>The authors have made all the example code and screenshots available as a reference repository.  These files are covered by the <a href="http://shop.oreilly.com/category/customer-service/faq-examples.do">O&rsquo;Reilly Media policy on the use of example code</a>.  Short version: you are free to use the examples in moderation; credit is appreciated but not required.  However, please don't integrate a large portion of the example set within a product or documentation. 
20 |   </p>
21 |   <p>
22 |   The chapter links in the following outline will take you to an index of the examples and figures as SVG files you can view live in your browser.  Alternatively, <a href="https://github.com/oreillymedia/SVG_Text_Layout">you can download the entire collection as a zip archive or fork it as a GitHub repository</a>.
23 |   </p>
24 | 
25 | <ul>
26 | <li>
27 | <p><a href="ch01-text-theory-files/">Chapter 1, Understanding Text Layout</a> reviews the basics of laying out text in word processors and websites, and introduces much of the technical terminology used to describe text.</p>
28 | </li>
29 | <li>
30 | <p><a href="ch02-text-basics-files/">Chapter 2, SVG Text Basics</a> introduces the SVG <code>&lt;text&gt;</code> element and the basic attributes for positioning simple text labels within a graphic, including the particular issues of sizing text within a scalable coordinate system.</p>
31 | </li>
32 | <li>
33 | <p><a href="ch03-fill-stroke-files/">Chapter 3, Colorful Language</a> briefly covers SVG’s <code>fill</code> and <code>stroke</code> properties for controlling the visual appearance of text.</p>
34 | </li>
35 | <li>
36 | <p><a href="ch04-position-tspan-files/">Chapter 4, Multiline SVG Text</a> gets into more complex text layouts, using formatted poetry as examples.</p>
37 | </li>
38 | <li>
39 | <p><a href="ch05-position-char-files/">Chapter 5, Off-Kilter Characters</a> explores SVG’s ability to control the position and orientation of individual text characters.</p>
40 | </li>
41 | <li>
42 | <p><a href="ch06-text-anchor-files/">Chapter 6, Casting Anchor</a> introduces the <code>text-anchor</code> property and discusses how it affects the alignment of text.</p>
43 | </li>
44 | <li>
45 | <p><a href="ch07-rtl-vertical-files/">Chapter 7, Anchoring in International Waters</a> considers the particular issues of multidirectional text, including right-to-left horizontal text and vertical text.</p>
46 | </li>
47 | <li>
48 | <p><a href="ch08-baselines-files/">Chapter 8, Lining Up</a> introduces the properties that control the vertical alignment of horizontal text and the horizontal alignment of vertical text.</p>
49 | </li>
50 | <li>
51 | <p><a href="ch09-textPath-files/">Chapter 9, Beyond Straight Lines</a> looks at the <code>&lt;textPath&gt;</code> element and how it can be used to create curved or complex text layouts.</p>
52 | </li>
53 | <li>
54 | <p><a href="ch10-fonts-files/">Chapter 10, Fonts, Families, Faces</a> explores fonts and their impact on SVG text, including the use of the <code>@font-face</code> rule to incorporate web fonts in your SVG graphics online.</p>
55 | </li>
56 | <li>
57 | <p><a href="ch11-size-adjust-files/">Chapter 11, The Perfect Fit</a> looks at the <code>textLength</code> attribute and <code>font-size-adjust</code> property, which can be used to standardize text layout when you don’t have full control over the fonts used; the chapter also describes decorative uses for <code>textLength</code>.</p>
58 | </li>
59 | <li>
60 | <p><a href="ch12-foreignObject-files/">Chapter 12, Extending Your Toolbox</a> introduces the SVG <code>&lt;foreignObject&gt;</code> element, and shows how it can be used to include CSS-formatted HTML text within an SVG image.</p>
61 | </li>
62 | </ul>
63 | </ul>
64 | </main>
65 | <footer>
66 |   <p>Don&rsquo;t have a copy of <cite>SVG Text Layout</cite> already? 
67 |   </p>
68 |   <p>
69 |     Order a print book or <abbr title="Digital Rights Management">DRM</abbr>-free e-book <a href="http://shop.oreilly.com/product/0636920043072.do">from O&rsquo;Reilly Media</a>, or access it through your Safari Books Online subscription.</p>
70 | </footer>
71 |   </body>
72 | </html>
73 | 


--------------------------------------------------------------------------------