--- /dev/null
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html xmlns:v="urn:schemas-microsoft-com:vml">
+ <head>
+ <meta http-equiv="Content-Language" content="ja">
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta http-equiv="Content-Style-Type" content="text/css">
+ <meta http-equiv="Content-Script-Type" content="text/javascript">
+ <meta http-equiv="imagetoolbar" content="no">
+ <meta http-equiv="X-UA-Compatible" content="IE=6">
+ <title>Vector Speach Balloon Test</title>
+ </head>
+ <style type="text/css">
+ v\:* {
+ behavior: url(#default#VML);
+ display: block;
+ }
+
+ .ActiveX-Enabled .detectActiveX {
+ display: none;
+ }
+
+ .preview-wrapper {
+ float: left;
+ height: 600px;
+ }
+ .preview {
+ width: 400px;
+ border:1px solid #ccc;
+ }
+ </style>
+
+ <body>
+ <h1>Vector Speach Balloon Test</h1>
+ <form name="param" action="#" onsubmit="test.redraw();">
+ <label for="width">WIDTH:</label><input type="text" name="width" value="100" onchange="test.redraw();" onkeypress="test.redraw();">px
+ <label for="height">HEIGHT:</label><input type="text" name="height" value="100" onchange="test.redraw();" onkeypress="test.redraw();">px
+ <label for="angle">ANGLE:</label><input type="text" name ="angle" value="100" onchange="test.redraw();" onkeypress="test.redraw();">°
+ </form>
+
+ <div style="overflow: auto;">
+ <div class="preview-wrapper">
+ <h2>SVG</h2>
+ <div class="preview" id="svg_wrap">
+ <svg xmlns="http://www.w3.org/2000/svg" height="400" width="400" id="svg_preview">
+ <path id="path" fill="white" stroke="black" stroke-width="1.5" d="" />
+ </svg>
+ </div>
+ <p id="svg_src"></p>
+ <p id="svg_size"></p>
+ </div>
+
+ <div class="preview-wrapper">
+ <h2>VML</h2>
+ <div class="preview">
+ <div id="vml_preview"></div>
+ </div>
+ <p class="detectActiveX">ActiveX disaled!</p>
+ <textarea id="vml_src" style="width:400px;height:6em;"></textarea>
+ <p id="vml_size"></p>
+ </div>
+ </div>
+
+ <!--
+ ae angleellipseto 6* 中心 (x,y), サイズ (w,h), 開始角、終了角。これらのパラメータを使って記述する楕円のセグメントを描画する。セグメントの開始点へ現在点から直線が描画される。
+ al angleellipse 6* セグメントの開始点への黙示的な moveto があることを除き、angleellipseto と同じである。
+ at arcto 8* left, top, right, bottom, 開始点 (x,y), 終了点 (x,y)。最初4つの値は楕円の境界ボックスを定義する。最後4つは2本の半径ベクトルを定義する。描画されるのは、開始半径ベクトルで定義される角で開始し、終了ベクトルで提議される角で終了する楕円のセグメントである。弧の開始点へ現在点から直線が描画される。弧はつねに反時計回り方向に描画される。
+ ar arc 8* left, top, right, bottom, 開始点 (x,y), 終了点 (x,y)。arcto と同じであるが、弧の開始点への黙示的な moveto により新しいサブパスが開始される。
+ -->
+ <div style="clear: both;"></div>
+ <h2>注意</h2>
+ <p>小数点以下を切り捨てると、図形のかたちが大きく変わってしまう。小数点以下1～2桁でまるめるくらいだと変わらない。</p>
+ <p>ie8でVMLはスタンダードモードでは動作しない。</p>
+ <p>多分、nLiteでベクター画像のサポートを切るとieでvmlが表示できない。</p>
+ <p>svgやxmlはページのDomReady時(img読み込み前)に、対応ブラウザならjsで差し替える感じかな。imgの読み込みをどこまで抑止できるか？？</p>
+ <p>vmlは座標を無視して隙間を詰めてしまう。仕方ないので、その親にmarginを設定。tailX,tailYを見て適宜に補正する。(11/08/30)</p>
+ <p>Vectorサポートの調査の方法。svgもしくはvmlを描画した後に、SVG_WRAP.offsetHeight || SVG_WRAP.heightを見る、という直球な感じでできた。チェック方法がいまいちwebで見つからない。。。(11/09/04)</p>
+
+ <!--[if lt IE 9]>
+ <script language="JavaScript">
+ (function(){
+ //http://allabout.co.jp/gm/gc/24117/2/
+ //window.onloadを待たずにDOM処理を開始する
+ var b = document.body || (function(){document.write('<body>');return document.body;})(),
+ x = (function(){
+ try {var t = new ActiveXObject('DXImageTransform.Microsoft.gradient');}catch(e){}
+ return t ? 'ActiveX-Enabled' : null;
+ })();
+ if( x && !b.className.match(x)){
+ b.className += ( b.className.length === 0 ? '' : ' ') +x;
+ }
+ })();
+ </script>
+ <![endif]-->
+
+ <script type="text/javascript" src="main.js"></script>
+ </body>
+</html>
--- /dev/null
+/*\r
+ * Vector Speach Balloon Test\r
+ * \r
+ * main.js\r
+ * \r
+ * version 0.1.0\r
+ * __________\r
+ * / \\r
+ * / \\r
+ * |,startX,Y |\r
+ * tailX,Y - < |\r
+ * |'endX,Y |\r
+ * \ /\r
+ * \__________/\r
+ * \r
+ * \r
+ */\r
+\r
+var test = (function(){\r
+ var PARAM = document.forms[ 0],\r
+ WIDTH = PARAM[ 'width'],\r
+ HEIGHT = PARAM[ 'height'],\r
+ ANGLE = PARAM[ 'angle'],\r
+ SVG_WRAP = document.getElementById( 'svg_wrap'),\r
+ SVG_PATH = document.getElementById( 'path'),\r
+ SVG_SRC = document.getElementById( 'svg_src'),\r
+ SVG_SIZE = document.getElementById( 'svg_size');\r
+ VML_PATH = document.getElementById( 'vml_preview'),\r
+ VML_SRC = document.getElementById( 'vml_src'),\r
+ VML_SIZE = document.getElementById( 'vml_size');\r
+ TAIL_WIDTH = 6,\r
+ TAIL_HEIGHT = 10,\r
+ PADDING_TOP = TAIL_HEIGHT,\r
+ PADDING_LEFT = TAIL_HEIGHT,\r
+ ACCURACY = 1; // 有効少数桁\r
+ \r
+ function draw(){\r
+ var w = parseFloat( WIDTH.value),\r
+ h = parseFloat( HEIGHT.value),\r
+ a = parseFloat( ANGLE.value);\r
+ \r
+ if( !w || !h || w < 1 || h < 1){\r
+ return;\r
+ }\r
+ WIDTH.value = ''+w;\r
+ HEIGHT.value = ''+h;\r
+ \r
+ var rx = w /2,\r
+ ry = h /2,\r
+ deg0 = a -355 +355,\r
+ deg1, deg2,\r
+ rad0 = deg0 * Math.PI / 180,\r
+ rad1,rad2,\r
+ startX, startY, endX, endY,\r
+ _startX, _startY, _endX, _endY,\r
+ d, _d, l,\r
+ tailX = rx +( rx +TAIL_HEIGHT) * Math.cos( rad0),\r
+ tailY = ry +( ry +TAIL_HEIGHT) * Math.sin( rad0);\r
+ \r
+ /*\r
+ * tailの太さをTAIL_WIDTHに一致させるため、0.1づつ角度を変えて太さを計算\r
+ */\r
+ for( var i=0;;i+=0.1){\r
+ deg1 = a -355 +355 +i;\r
+ deg2 = a -355 +355 -i;\r
+ rad1 = deg1 * Math.PI / 180;\r
+ rad2 = deg2 * Math.PI / 180;\r
+ \r
+ _startX = rx +Math.cos( rad1) *rx;\r
+ _startY = ry +Math.sin( rad1) *ry,\r
+ _endX = rx +Math.cos( rad2) *rx,\r
+ _endY = ry +Math.sin( rad2) *ry, //円弧上のY位置＝円中心Y＋sin(角度×PI÷180)×円半径\r
+ \r
+ l = Math.abs(\r
+ Math.sqrt(\r
+ Math.pow( ( _startX -_endX), 2) + Math.pow( ( _startY -_endY), 2)\r
+ )\r
+ );\r
+ _d = Math.abs( l -TAIL_WIDTH);\r
+ if( i !== 0 && d < _d){\r
+ /*\r
+ * TAIL_WIDTHとの差が増分になった段階でループの終了\r
+ */\r
+ break;\r
+ }\r
+ d = _d;\r
+ startX = _startX;\r
+ startY = _startY;\r
+ endX = _endX;\r
+ endY = _endY;\r
+ } \r
+ drawSVG( tailX, tailY, startX, startY, rx, ry, endX, endY);\r
+ \r
+ drawVML(\r
+ tailX *10, tailY *10,\r
+ endX *10, endY *10,\r
+ rx *10, ry *10,\r
+ startX *10, startY *10,\r
+ w *10, h *10\r
+ );\r
+ }\r
+ \r
+ function drawSVG( tailX, tailY, startX, startY, rx, ry, endX, endY){\r
+ var l = ',',\r
+ draw = [\r
+ 'M' +cround( tailX + PADDING_LEFT) +l +cround( tailY +PADDING_TOP),\r
+ 'L' + cround( startX +PADDING_LEFT) + l + cround( startY +PADDING_TOP),\r
+ 'A' + rx + l + ry,\r
+ '0 1 1', // flag\r
+ cround( endX +PADDING_LEFT) + l + cround( endY +PADDING_TOP),\r
+ 'z'\r
+ ].join( ' ');\r
+ \r
+ SVG_PATH.setAttribute( "d", draw);\r
+ SVG_SRC.innerHTML = draw;\r
+ SVG_SIZE.innerHTML = SVG_WRAP.offsetHeight || SVG_WRAP.height;\r
+ }\r
+ \r
+ function drawVML( tailX, tailY, startX, startY, rx, ry, endX, endY, w, h){\r
+ var l = ',',\r
+ round = Math.round,\r
+ path = [\r
+ '<v:shape style="width:', w /10, 'px;height:', h /10, 'px;" ',\r
+ 'coordsize="', w, l, h,\r
+ '" coordorigin="0,0" path="',\r
+ ' ar ', 0, l, 0, l, w, l, h, l,\r
+ round( startX), l, round( startY), l,\r
+ round( endX), l, round( endY),\r
+ ' l ', round( tailX), l, round( tailY),\r
+ ' x e" strokecolor="black" fillcolor="white" strokeweight="1.3" />'\r
+ ].join( '');\r
+ \r
+ VML_PATH.innerHTML = path;\r
+ VML_PATH.style.marginTop = ( ( tailY < 0) ? Math.floor( ( 60 +tailY) /10) : 10) +'px';\r
+ VML_PATH.style.marginLeft = ( ( tailX < 0) ? Math.floor( ( 60 +tailX) /10) : 10) +'px';\r
+ \r
+ VML_SRC.value = path;\r
+ VML_SIZE.innerHTML = VML_PATH.offsetHeight || VML_PATH.height;\r
+ }\r
+ \r
+ function cround( v, r){\r
+ r = r || ACCURACY;\r
+ return Math.round(v*Math.pow(10.0,r))/Math.pow(10.0,r);\r
+ }\r
+ \r
+ return {\r
+ redraw: function(){\r
+ draw();\r
+ return false;\r
+ }\r
+ }\r
+})();\r
+\r
+window.onload = test.redraw;\r
--- /dev/null
+@charset "utf-8";\r
+\r
+/* \r
+--------------------------------------------------------------------------------------*/\r
+ * html body {\r
+ _text-align: center; /* ie5.5 */\r
+ }\r
+ \r
+ h1, h2, .author {\r
+ text-align: center;\r
+ } \r
+ \r
+ #panelContainer {\r
+ margin: 0 auto;\r
+ _text-align: left; /* ie5.5+6 */\r
+ \r
+ }\r
+ #footer {\r
+ padding-top: 1em;\r
+ border-top: 1px solid #666;\r
+ color: #666;\r
+ text-align: center;\r
+ }\r
+ \r
+ a img {\r
+ border: 0; \r
+ } \r
+\r
+/* Panel\r
+--------------------------------------------------------------------------------------*/\r
+ .panel-wrapper {\r
+ margin: 10px 0;\r
+ position: relative;\r
+ }\r
+ .panel {\r
+ border: 2px solid #333;\r
+ overflow: hidden;\r
+ position: relative;\r
+ top: 0;\r
+ left: 0;\r
+ }\r
+ .panel img,\r
+ .panel .speach {\r
+ position: absolute;\r
+ margin: 0;\r
+ }\r
+ \r
+/* Panel > speach\r
+--------------------------------------------------------------------------------------*/\r
+ .speach {\r
+ text-align: center;\r
+ display: table;\r
+ }\r
+ .speach span {\r
+ display: table-cell;\r
+ vertical-align: middle;\r
+ padding: 16.66%;\r
+ }\r
+ \r
+ /* fix for ie */ \r
+ .speach table,\r
+ .speach tbody,\r
+ .speach tr,\r
+ .speach td {\r
+ width: 100%;\r
+ height: 100%;\r
+ border: 0;\r
+ padding: 0;\r
+ margin: 0;\r
+ text-align: center;\r
+ vertical-align: middle;\r
+ }\r
+ .speach td {\r
+ padding: 16.66%;\r
+ }\r
+ \r
+\r
+/* Panel > tooltip contain Image's Title & Author\r
+--------------------------------------------------------------------------------------*/\r
+ .tooltip-container {\r
+ font-size: 12px;\r
+ position: absolute;\r
+ top: 0;\r
+ left: 0;\r
+ *width: 200%; /* ie7 */\r
+ _width: 200%; /* ie5.5+6 */\r
+ }\r
+ .tooltip {\r
+ position: absolute;\r
+ color: #999;\r
+ background-color: rgba( 255, 255, 255, 0.8);\r
+ border: 1px solid #999;\r
+ padding: 1em 2em;\r
+ border-radius: 10px;\r
+ -moz-border-radius: 10px;\r
+ -opera-border-radius: 10px;\r
+ -webkit-border-radius: 10px;\r
+ box-shadow: 2px 2px 1px #999;\r
+ -moz-box-shadow: 2px 2px 1px #999;\r
+ -opera-box-shadow: 2px 2px 1px #999;\r
+ -webkit-box-shadow: 2px 2px 1px #999;\r
+ }\r
+ .image-shadow {\r
+ position: absolute;\r
+ margin: 0;\r
+ }\r
+ \r
+ /* fix for ie */\r
+ .tooltip {\r
+ *background-color: #fff;\r
+ _background-color: #fff; \r
+ }\r
+ html>/**/body .tooltip { \r
+ background-color/*\**/: #fff\9; /* ie8(ie8 mode) */\r
+ }\r
+ \r
+ /* hover */\r
+ .tooltip-container a:hover, \r
+ .tooltip-container:hover {\r
+ z-index: 9999;\r
+ _zoom: 1; /* ie5.5+6 */\r
+ }\r
+ .tooltip-container a:hover .image-shadow,\r
+ .tooltip-container:hover .image-shadow {\r
+ border: 2px solid #666;\r
+ }\r
+ .tooltip-container a:hover .tooltip, \r
+ .tooltip-container:hover .tooltip {\r
+ background-color: #ffc;\r
+ border-color: #333;\r
+ color: #333;\r
+ box-shadow: 2px 2px 3px #666;\r
+ -moz-box-shadow: 2px 2px 3px #666;\r
+ -opera-box-shadow: 2px 2px 3px #666;\r
+ -webkit-box-shadow: 2px 2px 3px #666;\r
+ }\r
+\r
+ /* fix for ie */\r
+ .tooltip-container a {\r
+ text-decoration: none; /* ie6 */\r
+ color: #333; /* ie6 */ \r
+ } \r
+ \r
+ .tooltip-container table,\r
+ .tooltip-container tbody,\r
+ .tooltip-container tr,\r
+ .tooltip-container td {\r
+ width: 100%;\r
+ height: 100%;\r
+ border: 0;\r
+ padding: 0;\r
+ margin: 0;\r
+ position: relative; /* ie5.5でなぜかtooltipがhoverで消えるのを防ぐ */\r
+ } \r
--- /dev/null
+<?xml version="1.0" encoding="UTF-8" ?>\r
+<?xml-stylesheet type="text/xsl" href="pettanr.xsl"?>\r
+\r
+<!-- <series> -->\r
+<comic title="testコミック"\r
+ episode="第一話 testの巻"\r
+ author="pettan復活チーム"\r
+ w="400"\r
+ published="2011/08/08 00:00:00"\r
+ updated="2011/08/09 12:12:12"\r
+>\r
+\r
+ <panel h="200" bgcolor="#ccc">\r
+ <img url="uploaded/1483.gif" x="20" y="40" w="267" h="292" name="ペン次郎・フム" author="yas" site="http://www.pen-chan.jp/"/>\r
+ <balloon type="0" tail="5" w="150" h="140" x="240" y="-10" size="16" bold="1">こんちにわ</balloon>\r
+ </panel>\r
+\r
+ <panel h="300" bgcolor="#fcc">\r
+ <img url="uploaded/2313.gif" x="300" y="40" w="200" h="153" name="うさたろう：睡眠中" author="yuji" site="yuji.com"/>\r
+ <img url="uploaded/1486.gif" x="200" y="150" w="138" h="183" name="ペン次郎・ラジャ" author="yas" site="http://www.pen-chan.jp/"/>\r
+ <img url="uploaded/1486.gif" x="-20" y="30" w="138" h="183" name="ペン次郎・ラジャ～～～～～～～～～～～～～～～" author="yas" site="http://www.pen-chan.jp/"/>\r
+ <balloon type="1" tail="1" w="200" h="100" x="20" y="20">こんばんわ</balloon>\r
+ <balloon type="0" tail="2" w="150" h="100" x="80" y="180" size="20" bold="1">フギャー</balloon>\r
+ </panel>\r
+ \r
+ <panel h="100" bgcolor="#fcc">\r
+ <balloon type="1" tail="1" w="200" h="100" x="20" y="20">こんばんわぁっぁｌｌっぁぁぁぁぁｌ</balloon>\r
+ <balloon type="0" tail="2" w="150" h="100" x="80" y="180" size="20" bold="1">フギャーぁぁぁぁぁぁぁっぁぁぁぁ</balloon>\r
+ </panel>\r
+</comic>\r
+\r
+<!-- </series> -->
\ No newline at end of file
--- /dev/null
+<?xml version="1.0" encoding="UTF-8"?>\r
+<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" \r
+ xmlns="http://www.w3.org/1999/xhtml"> \r
+ <xsl:output \r
+ omit-xml-declaration="no" \r
+ encoding="utf-8" \r
+ method="html" \r
+ version="1.0" \r
+ doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN" \r
+ doctype-system="http://www.w3.org/TR/html4/loose.dtd" \r
+ indent="yes" /> \r
+ <xsl:template match="/">\r
+ <xsl:apply-templates/>\r
+ </xsl:template>\r
+\r
+<xsl:template match="comic">\r
+ <html>\r
+ <head>\r
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8" />\r
+ <meta http-equiv="Content-Style-Type" content="text/css" />\r
+ <meta http-equiv="imagetoolbar" content="no" />\r
+ \r
+ <title>\r
+ <xsl:if test="@subtitle">\r
+ <xsl:value-of select="concat(@episode,' | ')"/>\r
+ </xsl:if>\r
+ <xsl:value-of select="@title" />\r
+ <xsl:if test="@author">\r
+ <xsl:value-of select="concat(' | ',@author)"/>\r
+ </xsl:if>\r
+ </title>\r
+ \r
+ <link href="pettanr.css" rel="stylesheet" type="text/css" />\r
+ \r
+ </head>\r
+ <body>\r
+ <h1><xsl:value-of select="@title" /></h1>\r
+ <h2><xsl:value-of select="@episode" /></h2>\r
+ <p class='author'>author:<xsl:value-of select="@author" /></p>\r
+ \r
+ <div id="panelContainer">\r
+ <xsl:attribute name="style">\r
+ <xsl:value-of select="concat('width:',@w,'px;')"/>\r
+ </xsl:attribute>\r
+ \r
+ <xsl:apply-templates/>\r
+ </div> \r
+ \r
+ <div id="footer">\r
+ (c)<xsl:value-of select="/comic/@author" /> , flash publishing system 'pettan' is powered by pettan_dev.\r
+ </div>\r
+ </body>\r
+ </html>\r
+</xsl:template>\r
+\r
+ <xsl:template match="panel">\r
+ <div class="panel-wrapper">\r
+ <xsl:for-each select=".">\r
+ <div class="panel">\r
+ <xsl:variable name="height" select="concat('height:',@h,'px;')" />\r
+ <xsl:variable name="bgcolor" select="concat('background-color:',@bgcolor,';')" />\r
+ <xsl:attribute name="style">\r
+ <xsl:value-of select="concat($height,$bgcolor)"/>\r
+ </xsl:attribute>\r
+ <xsl:apply-templates/>\r
+ </div>\r
+ </xsl:for-each>\r
+ <xsl:for-each select="./img">\r
+ <xsl:if test="@name">\r
+ \r
+ <div class="tooltip-container">\r
+ <xsl:comment><![CDATA[[if lte IE 6]><a href="#"><table><tr><td><![endif]]]></xsl:comment>\r
+ <img src="4x4.gif" class="image-shadow"><!-- 当初divで書いていたら、ie5.5～8で正しくレンダリングできない。なぜかDomが狂う、、、xsl:attribute name="style"が頭にきたせい? -->\r
+ <xsl:attribute name="width">\r
+ <xsl:value-of select="@w"/>\r
+ </xsl:attribute>\r
+ <xsl:attribute name="height">\r
+ <xsl:value-of select="@h"/>\r
+ </xsl:attribute>\r
+ <xsl:attribute name="style">\r
+ <xsl:value-of select="concat('left:',@x,'px;','top:',@y,'px;')"/>\r
+ </xsl:attribute>\r
+ </img>\r
+ <dl class="tooltip">\r
+ <xsl:attribute name="style">\r
+ <xsl:value-of select="concat('margin-left:',position(),'9px;left:',/comic/@w,'px;','top:',@y,'px;')"/><!-- 要素が完全に重なることを防ぐためにposition()で要素のindexを取ってmargin-leftしている -->\r
+ </xsl:attribute>\r
+ <dt>作品名</dt>\r
+ <dd><xsl:value-of select="@name" /></dd>\r
+ <dt>作者</dt>\r
+ <dd><xsl:value-of select="@author" /></dd>\r
+ <dt>サイト</dt>\r
+ <dd><xsl:value-of select="@site" /></dd>\r
+ </dl>\r
+ <xsl:comment><![CDATA[[if lte IE 6]></td></tr></table></a><![endif]]]></xsl:comment>\r
+ </div>\r
+ \r
+ </xsl:if>\r
+ </xsl:for-each>\r
+ </div>\r
+ </xsl:template>\r
+\r
+ <xsl:template match="img">\r
+ <xsl:for-each select=".">\r
+ <img>\r
+ <xsl:attribute name="src">\r
+ <xsl:value-of select="@url"/>\r
+ </xsl:attribute>\r
+ <xsl:attribute name="width">\r
+ <xsl:value-of select="@w"/>\r
+ </xsl:attribute>\r
+ <xsl:attribute name="height">\r
+ <xsl:value-of select="@h"/>\r
+ </xsl:attribute>\r
+ <xsl:variable name="left" select="concat('left:',@x,'px;')" /> \r
+ <xsl:variable name="top" select="concat('top:',@y,'px;')" /> \r
+ <xsl:attribute name="style">\r
+ <xsl:value-of select="concat($left,$top)"/>\r
+ </xsl:attribute>\r
+ </img>\r
+ </xsl:for-each> \r
+ </xsl:template>\r
+\r
+ <xsl:template match="balloon">\r
+ <xsl:for-each select=".">\r
+ <img>\r
+ <xsl:variable name="type">\r
+ <xsl:if test="contains(@type,'0')">fukidasi/mfuki</xsl:if>\r
+ <xsl:if test="contains(@type,'1')">fukidasi/omoiFuki</xsl:if>\r
+ </xsl:variable>\r
+ <xsl:attribute name="src">\r
+ <xsl:value-of select="concat($type,@tail,'.gif')"/>\r
+ </xsl:attribute>\r
+ <xsl:attribute name="width">\r
+ <xsl:value-of select="@w"/>\r
+ </xsl:attribute>\r
+ <xsl:attribute name="height">\r
+ <xsl:value-of select="@h"/>\r
+ </xsl:attribute>\r
+ <xsl:variable name="left" select="concat('left:',@x,'px;')" /> \r
+ <xsl:variable name="top" select="concat('top:',@y,'px;')" />\r
+ <xsl:attribute name="style">\r
+ <xsl:value-of select="concat($top,$left)"/>\r
+ </xsl:attribute>\r
+ </img>\r
+ \r
+ <div class="speach">\r
+ <xsl:variable name="width" select="concat('width:',@w,'px;')" /> \r
+ <xsl:variable name="height" select="concat('height:',@h,'px;')" />\r
+ <xsl:variable name="left2" select="concat('left:',@x,'px;')" /> \r
+ <xsl:variable name="top2" select="concat('top:',@y,'px;')" /> \r
+ <xsl:variable name="fontsize">\r
+ <xsl:if test="@size">\r
+ <xsl:value-of select="concat('font-size:',@size,'px;')"/>\r
+ </xsl:if>\r
+ </xsl:variable>\r
+ <xsl:variable name="fontbold">\r
+ <xsl:if test="@bold">font-weight:bold;</xsl:if>\r
+ </xsl:variable>\r
+ <xsl:attribute name="style">\r
+ <xsl:value-of select="concat($width,$height,$top2,$left2,$fontsize,$fontbold)"/>\r
+ </xsl:attribute>\r
+ <xsl:comment><![CDATA[[if lte IE 7]><table><tr><td><![endif]]]></xsl:comment>\r
+ <span>\r
+ <xsl:apply-templates/>\r
+ </span>\r
+ <xsl:comment><![CDATA[[if lte IE 7]></td></tr></table><![endif]]]></xsl:comment>\r
+ </div>\r
+ </xsl:for-each> \r
+ </xsl:template>\r
+\r
+</xsl:stylesheet>
\ No newline at end of file
OSDN Git Service
