Monday, March 10, 2008

HTML5 postMessage()

postMessage() is allow javascript to communicate cross domain. This is very interest feature. There is a simple demo in http://ejohn.org/blog/cross-window-messaging/.

With this feature, single sign on and web service can be done in the client. Hopefully, this feature is not going to open new chapter of security issue.

Use CSS to create vertical Text

IE got more simple solution by setting style attribute "writing mode".


<style>
.vt {
writing-mode: tb-rl;
filter: flipv fliph;
}
</style>

<div class="vt">Vertical Text</div>


For the rest of browsers, need to use SVG.

<embed class="svgex" src="vertical_text.svg" type="image/svg+xml" frameborder="no" width="30" height="90" />


For svg,

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<script type="text/javascript">
<![CDATA[
//this will create htmljavascriptfunctionname in html document and link it to changeText
top.htmljavascriptfunctionname = changeText;
function changeText(txt){
targetText=document.getElementById("thetext");
var newText = document.createTextNode(txt);
targetText.replaceChild(newText,targetText.childNodes[0]);
}
// ]]>
</script>
<text id="thetext" transform="rotate(270, 90, 0)" font-size="12" x="3" y="-60" font-family="Verdana">Vertical Text</text>
</svg>

The svg code is modified from http://www.thescripts.com/forum/thread721811.html.
I just make it work, but I think the width/height will change base on content.