home *** CD-ROM | disk | FTP | other *** search
/ Chip 2004 September / Chip_2004-09_cd1.bin / chplus / interval / clanek06.htm < prev    next >
Encoding:
Extensible Markup Language  |  2004-08-03  |  15.3 KB  |  201 lines
  1. <?xml version='1.0' encoding='windows-1250'?>
  2. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
  3. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='cs' lang='cs'>
  4. <head>
  5. <meta http-equiv='Content-Type' content='text/html; charset=windows-1250' />
  6. <meta http-equiv='Content-language' content='cs' />
  7. <meta http-equiv='Cache-control' content='no-cache' />
  8. <meta http-equiv='Pragma' content='no-cache' />
  9. <meta http-equiv='Expires' content='-1' />
  10. <meta name='robots' content='index,follow' />
  11. <meta name='googlebot' content='index,follow,snippet,noarchive' />
  12. <meta name='description' content='Interval.cz - Internetov² magazφn o webdesignu, v²voji webov²ch aplikacφ a e-komerci. VÜe podstatnΘ o technologiφch XHTML, HTML, CSS, DHTML, JavaScript, XML, .NET, ASP, PHP, Java, J2ME, SQL, WAP...' />
  13. <meta name='keywords' content='Interval' />
  14. <meta name='ICBM' content='49.1915, 16.626' />
  15. <meta name='DC.Title' content='Interval.cz' />
  16. <meta name='DC.Identifier' content='http://interval.cz' />
  17. <meta name='DC.Language' content='cs' />
  18. <meta http-equiv='pics-label' content='(pics-1.1 "http://www.icra.org/ratingsv02.html" comment "ICRAonline EN v2.0" l gen true for "http://interval.cz" r (nz 1 vz 1 lz 1 oz 1 cz 1) "http://www.rsac.org/ratingsv01.html" l gen true for "http://interval.cz" r (n 0 s 0 v 0 l 0))' />
  19. <meta http-equiv='imagetoolbar' content='no' />
  20. <meta http-equiv='MSThemeCompatible' content='no' />
  21. <meta name='MSSmartTagsPreventParsing' content='true' />
  22. <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
  23. <link rel='alternate' type='application/rss+xml' title='RSS Interval.cz' href='http://interval.cz/__rss/rss.asp' />
  24. <link rel='home' href='http://interval.cz' />
  25. <link rel='search' href='http://interval.cz/search_ex.asp' />
  26. <link rel='stylesheet' type='text/css' media='all' href='__services/styles/html4.css' />
  27. <link rel='stylesheet' type='text/css' media='all' href='__services/styles/basic_all.css' />
  28. <link rel='stylesheet' type='text/css' media='all' href='__services/styles/homepage_all.css' />
  29. <link rel='stylesheet' type='text/css' media='all' href='__services/styles/articles_all.css' />
  30. <link rel='stylesheet' type='text/css' media='print' href='__services/styles/articles_print.css' />
  31. <title>Interval.cz - webdesign a e-komerce denn∞</title>
  32. </head>
  33. <body class='interval interval-articles'>
  34. <div id='page-header'><div id='interval-logo'><h1 title='Interval.cz - denn∞ o tvorb∞ webu a e-komerci (logo & index link)'><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz'>Interval.cz<span></span></a></h1></div><div id='advertising-page-header'></div><div class='page-maker'> </div></div>
  35. <div id='page-topmenu'><h2 class='textversion'>Navigace</h2><div id='page-mainmenu'><h3 class='textversion'>Hlavnφ menu</h3><ul><li class='first selected'><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz'>Titulnφ strana</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz?idcategory=14'>Webdesign</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz?idcategory=15'>V²voj aplikacφ</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz?idcategory=18'>E-komerce</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz?idcategory=17'>Nßstroje</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz?idcategory=16'>Magazφn</a></li><li class='right selected'><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.inshop.cz'>Knihkupectvφ</a></li><li class='right'><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interforum.interval.cz'>Interforum</a></li></ul></div><div id='page-mainmenu-maker'> </div></div>
  36. <div id='page-body'><div id='page-left'><div id='article'>
  37.  
  38.  
  39. <h2>Kurz SVG - text</h2>
  40. <p id='prepend'>Bez text∙ se neobejde ani XML jazyk pro grafiku a kreslenφ. Naopak, dß se dokonce °φci, ₧e nativnφ spojenφ grafiky a textovΘho obsahu, kter² je zpracovßvßn stejn²mi mechanismy jako grafika, je jednou z nejv∞tÜφch p°ednostφ Scalable Vector Graphic.</p>
  41.  
  42. <p>Mo₧nosti typografickΘho formßtovßnφ jsou v SVG velmi ÜirokΘ, vΦetn∞ nap°φklad umφst∞nφ textu na k°ivku nebo zßpisu japonsk²ch znak∙. Na druhΘ stran∞ SVG 1.1 nenφ p°φliÜ vhodnΘ pro zpracovßnφ velkΘho mno₧stvφ textu, to by m∞la vy°eÜit a₧ specifikace SVG 1.2. Zcela urΦit∞ ale jeÜt∞ chvφli potrvß, ne₧ se objevφ adekvßtnφ podpora v prohlφ₧eΦφch.</p>
  43. <p>V tomto Φlßnku probereme textov² prvek dosti struΦn∞, uvidφte ovÜem p°i praktickΘm nasazenφ SVG, ₧e i takov² struΦn² popis pokr²vß v∞tÜinu b∞₧n²ch pot°eb.</p>
  44.  
  45. <h3>K≤dovßnφ textu</h3>
  46. <p>Pro jinΘ ne₧ anglickΘ texty v°ele doporuΦuji k≤dovßnφ UTF-8, kterΘ by m∞ly um∞t vÜechny SVG prohlφ₧eΦe a nem∞li byste mφt problΘmy ani s editovßnφm takov²ch soubor∙. V²born∞ je zvlßdß nap°φklad pod MacOS editor BBEdit6+ nebo Linuxov² KWrite z KDE3+. HlaviΦka souboru by pak m∞la vypadat takto:</p>
  47.  
  48. <div class='sample'>
  49. <?xml version="1.0" encoding="utf-8"?>
  50. </div>
  51.  
  52. <h3>Element <code>text</code></h3>
  53. <p>Zßkladnφm prvkem pro vklßdßnφ textu je element <code>text</code>. Pro formßtovßnφ se pou₧φvajφ atributy z normy CSS a takΘ mnoho dalÜφch, kterΘ zatφm pomineme.</p>
  54.  
  55. <div class='sample'>
  56. <text x="250" y="150"
  57. <br />      font-family="Helvetica" font-size="55"
  58. <br />      fill="blue" >
  59. <br />  pokus
  60. <br /></text>
  61. </div>
  62.  
  63. <p>Atributy elementu <code>text</code>:</p>
  64.  
  65. <div class='list'>
  66. <ul>
  67. <li><code>x</code>, <code>y</code> - poloha textu, m∞°eno k ·Φa°φ prvnφho znaku °et∞zce (·Φa°φ je zßkladnφ linka na kterΘ "sedφ" pφsmena)</li>
  68. <li><code>font-family</code> - tento atribut nastavuje pou₧itΘ pφsmo podle pravidel obvykl²ch v CSS</li>
  69. <li><code>font-style</code> - normal, italic...</li>
  70. <li><code>font-variant</code> - normal, small-caps...</li>
  71. <li><code>font-weight</code> - "tuΦnost" pφsma</li>
  72. <li><code>font-stretch</code> - vodorovnß deformace pφsma</li>
  73. <li><code>font-size</code> - velikost pφsma</li>
  74. <li><code>kerning</code> - mezery mezi pφsmeny, bere se z definice pφsma (hodnota "auto") nebo se nastavφ na n∞jakou konstantnφ hodnotu</li>
  75. <li><code>letter-spacing</code> - tato hodnota se p°iΦφtß k automatickΘmu kerningu</li>
  76. <li><code>word-spacing</code> - mezery mezi slovy</li>
  77. <li><code>text-decoration</code> - underline, overline, line-through, blink, none</li>
  78. </ul>
  79. </div>
  80.  
  81. <p>Ka₧d² textov² element zp∙sobφ vykreslenφ jednoho textovΘho °et∞zce. Je t°eba zd∙raznit zßsadnφ odliÜnost od HTML - v SVG verze 1.1 neexistuje automatickΘ p°elΘvßnφ textu v rßmci vφce °ßdek. Efektu odstavce s vφce °ßdky se dosahuje tak, ₧e se p°edem urΦφ, kterß slova se vejdou na kter² °ßdek, a potom se slova z jednoho °ßdku uzav°ou zvlßÜ¥ do elementu <code>tspan</code> vno°enΘho v bloku <code>text</code>, kter² tak supluje textov² rßmeΦek. Ka₧d² <code>tspan</code> se musφ ruΦn∞ odsadit pomocφ atribut∙ "x", "y", "dx" a "dy". Ned∞ste se, grafickΘ editory toto provedou zcela automaticky, bez nutnosti manußlnφch zßsah∙.</p>
  82.  
  83. <div class='sample'>
  84. <?xml version="1.0" standalone="no"?>
  85. <br /><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  86. <br />  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  87. <br /><svg width="10cm" height="3cm" viewBox="0 0 1000 300"
  88. <br />     xmlns="http://www.w3.org/2000/svg" version="1.1">
  89. <br />   <desc>Pouziti 'tspan' s atributy 'dx' a 'dy'
  90. <br />         pro zobrazeni textoveho odstavce</desc>
  91. <br />   <g font-family="Helvetica" font-size="45" >
  92. <br />     <text x="200" y="150" fill="blue" >
  93. <br />        Ale to je text
  94. <br />        <tspan dx="2em" dy="-50" font-weight="bold" fill="red" >
  95. <br />           na vice
  96. <br />        </tspan>
  97. <br />        <tspan dy="100">
  98. <br />            radek!
  99. <br />        </tspan>
  100. <br />     </text>
  101. <br />   </g>
  102. <br />   <!-- obrys platna -->
  103. <br />   <rect x="1" y="1" width="998" height="298"
  104. <br />         fill="none" stroke="blue" stroke-width="2" />
  105. <br /></svg>
  106. </div>
  107.  
  108. <div class='image'>
  109. <img src='podklady/hejral/870/041.png' alt='Zobrazenφ odstavcovΘho textu' title='Zobrazenφ odstavcovΘho textu' />
  110. <br /><span class='comment'>Zobrazenφ odstavcovΘho textu (<a href='podklady/hejral/870/041.svg'>originßlnφ SVG, cca 1 kB</a>)</span>
  111. </div>
  112.  
  113. <h3>Element <code>tspan</code></h3>
  114. <p>Element <code>tspan</code> umo₧≥uje p°i°azenφ specifick²ch typografick²ch vlastnostφ ka₧dΘmu jednotlivΘmu znaku. K tomu vyu₧φvß nßsledujφcφ atributy:</p>
  115.  
  116. <div class='list'>
  117. <dl>
  118. <dt><code>dx</code> = (posun)+</dt>
  119. <dd>Atribut udßvß dodateΦn² (relativnφ) posun znak∙ uvnit° aktußlnφho textovΘho prvku. M∙₧ete zde uvΘst i vφce hodnot ne₧ jen jednu. Ka₧dß dalÜφ (x.) hodnota odpovφdß ruΦnφmu kerningu (odsazenφ) mezi pφsmenem na pozici (x) a (x-1).</dd>
  120. <dt><samp>dy</samp> = (posun)+</dt>
  121. <dd>Tento atribut je p°esn∞ analogick² k chovßnφ atributu "dx", jenom posouvß znaky nahoru Φi dol∙ oproti jejich standardnφmu ·Φa°φ. M∙₧ete takto vytvo°it nap°φklad hornφ Φi dolnφ indexy a podobn∞.</dd>
  122. <dt><samp>rotate</samp> = (·hel)+</dt>
  123. <dd>DodateΦnΘ pootoΦenφ ka₧dΘho znaku v aktußlnφm textovΘm prvku. Op∞t m∙₧e obsahovat vφce hodnot, pak analogicky (n.) hodnota pootoΦφ (n.) znak.</dd>
  124. </dl>
  125. </div>
  126.  
  127. <p>Nßsledujφcφ k≤d zv∞tÜφ mezipφsmennΘ mezery ve slov∞ "Latin" a slovo "Hebrew" zobrazφ s p°evrßcen²m po°adφm pφsmen:</p>
  128.  
  129. <div class='sample'>
  130. <tspan x="5" dx="0 2 2 2 2 5 0 0 0 5 22 -12 -11 -8.5 -8.5 -12">
  131. <br />  Latin and Hebrew
  132. <br /></tspan>
  133. <br />
  134. <br /><!-- SVG - vφce trik∙ ze ₧ivota -->
  135. <br /><tspan x="5" dy="15 0 0 0 3 3 15" rotate="0 0 0 0 25 75 0 90">
  136. <br />  Really cool!
  137. <br /></tspan>
  138. </div>
  139.  
  140. <div class='image'>
  141. <img src='podklady/hejral/870/042.png' alt='Zobrazenφ specißlnφch formßtovacφch prvk∙ SVG textu' title='Zobrazenφ specißlnφch formßtovacφch prvk∙ SVG textu' />
  142. <br /><span class='comment'>Zobrazenφ specißlnφch formßtovacφch prvk∙ SVG textu (<a href='podklady/hejral/870/042.svg'>originßlnφ SVG, cca 1 kB</a>)</span>
  143. </div>
  144.  
  145.  
  146.  
  147. <div id='article-author'>
  148. <a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/autor.asp?author=187'>Hejral, Martin</a> (20. 7. 2004)
  149.  
  150. </div>
  151.  
  152.  
  153. </div></div>
  154. <div id='page-right'><h2 class='textversion'>Prav² sloupek</h2>
  155. <div id='search'><h3 class='textversion'>Vyhledßvßnφ</h3><form method='get' action='http://interval.cz/search.asp'><div><input type='text' name='hledej' class='text' /><input type='submit' class='submit' value='Najdi!' /></div></form><div><a href='http://interval.cz/search_ex.asp'>RozÜφ°enΘ vyhledßvßnφ</a></div></div>
  156.  
  157.  
  158.  
  159. <div class='page-right-box book'>
  160.     <h3>Kni₧nφ novinka</h3>
  161.     <div class='page-right-box-in'>
  162.         <div class='book-top'>
  163.             <h4><a href='http://interval.cz/__redirect/redirect.asp?what=interval_booknews&url=http://interval.inshop.cz/inshop/scripts/detail.asp?ItemID=269'>Optimalizace pro vyhledßvaΦe - SEO</a></h4>
  164.         </div>
  165.     </div>
  166.     <div class='image'>
  167.         <img src='podklady/knihy/image.jpg' alt='obßlka' title='obßlka' /></a>
  168.     </div>
  169.     <div class='book-bottom'>Cena: <span class='book-price-old'>169 KΦ</span> <span class='book-price-new'>152 KΦ</span></div>
  170. </div>
  171.  
  172.  
  173.  
  174. <div class='page-right-box reading'>
  175.     <h3>NejΦten∞jÜφ</h3>
  176.     <div class='page-right-box-in'>
  177.         <ul>
  178. <li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3476'>Kurz SVG - vypl≥ovßnφ I</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3479'>PPWizard - pokroΦilß makra, podmφnky a standardnφ definice</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3478'>Transformace dat z databßze pomocφ XSL v .NET jednoduÜe</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3481'>Strßnkovßnφ v ovlßdacφm prvku DataGrid bez pou₧itφ PostBack</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3477'>Zpracovßnφ databßzov²ch dat p°es XSLT v ASP</a></li>
  179.         </ul>
  180.     </div>
  181. </div>
  182.  
  183.  
  184.  
  185. <div class='page-right-box cauldron'>
  186.     <h3>Diskuznφ kotel</h3>
  187.     <div class='page-right-box-in'>
  188.         <ul>
  189. <li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3473' title='(25 komentß°∙)'>Sedφm na konßri a Φtu Computerworld</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3468' title='(23 komentß°∙)'>PPWizard - tvo°φme a spravujeme WWW strßnky</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3474' title='(22 komentß°∙)'>PφÜeme pro web - o sφle slov</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3464' title='(15 komentß°∙)'>Kurz SVG - grafickß primitiva</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3472' title='(10 komentß°∙)'>Cryptography v .NET - Symmetric a Asymmetric encryption</a></li>
  190.         </ul>
  191.     </div>
  192. </div>
  193.  
  194.  
  195.  
  196. <div class='page-right-box emailserv'><h3>Email servis</h3><div class='page-right-box-in'><form action='prihlaseni.asp' method='post'><div class='shell'><input class='text' type='text' name='adresa' /></div><div class='shell'><input class='radio' type='radio' value='1' name='co' checked='checked' />T²dennφ p°ehled Φlßnk∙</div><div class='shell'><input class='radio' type='radio' value='2' name='co' />HELP konference</div><div class='shell'><input class='submit' type='submit' value='P°ihlßsit' /></div></form></div></div>
  197. </div>
  198. <div class='page-maker'> </div><div class='page-maker-white'> </div></div>
  199. <div id='page-foot'><div id='page-foot-menu'><a href='http://interval.cz/reklama.asp'>Inzerce na Interval.cz</a> | <a href='http://interval.cz/redakce.asp'>Redakce Interval.cz</a> | <a href='http://interval.cz/autori.asp'>Hledßme novΘ autory</a></div><div id='issn'>ISSN 1212-8651</div><div id='page-foot-zoner'>© Zoner software, s.r.o., vÜechna prßva vyhrazena, tento server dodr₧uje <a href='http://interval.cz/privacy.asp'>prßvnφ p°edpisy</a>o ochran∞ osobnφch ·daj∙.</div></div>
  200. </body>
  201. </html>