You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
213 lines
12 KiB
213 lines
12 KiB
<?xml version="1.0"?>
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<style type="text/css" media="all">
|
|
@import "/QA/2006/01/blogstyle.css";
|
|
</style>
|
|
<meta name="keywords" content='api, cjk, html, html5, i18n, implementation, wg, working group' />
|
|
<meta name="description" content="How to handle vertical layouts (for example CJK) with Canvas Text API. I give some references to have a snapshot of the constraints and issues." />
|
|
<meta name="revision" content="$Id: canvas-text-and-cjk.html,v 1.40 2011/12/16 03:02:51 gerald Exp $" />
|
|
<link rel="alternate" type="application/atom+xml" title="Atom" href="http://www.w3.org/QA/atom.xml" />
|
|
<link rel="alternate" type="application/rss+xml" title="RSS 1.0" href="http://www.w3.org/QA/news.rss" />
|
|
<title>Vertical Layouts for Canvas Text (CJK) - W3C Blog</title>
|
|
|
|
<link rel="start" href="http://www.w3.org/QA/" title="Home" />
|
|
<link rel="prev" href="http://www.w3.org/QA/2008/05/using_rdfa_to_add_information.html" title="How to add RDF information to a page using RDFa?" />
|
|
<link rel="next" href="http://www.w3.org/QA/2008/05/utf8-web-growth.html" title="utf-8 Growth On The Web" />
|
|
|
|
<!--
|
|
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
|
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
|
|
xmlns:dc="http://purl.org/dc/elements/1.1/">
|
|
<rdf:Description
|
|
rdf:about="http://www.w3.org/QA/2008/05/canvas-text-and-cjk.html"
|
|
trackback:ping="http://www.w3.org/QA/sununga/mt-tb.cgi/165"
|
|
dc:title="Vertical Layouts for Canvas Text (CJK)"
|
|
dc:identifier="http://www.w3.org/QA/2008/05/canvas-text-and-cjk.html"
|
|
dc:subject="HTML"
|
|
dc:description="How to handle vertical layouts (for example CJK) with Canvas Text API. I give some references to have a snapshot of the constraints and issues."
|
|
dc:creator="Karl Dubost"
|
|
dc:date="2008-05-02T03:35:10+00:00" />
|
|
</rdf:RDF>
|
|
-->
|
|
|
|
<!-- <script type="text/javascript" src="http://www.w3.org/QA/mt.js"></script>-->
|
|
|
|
</head>
|
|
<body class="layout-one-column">
|
|
<div id="banner">
|
|
<h1 id="title">
|
|
<a href="http://www.w3.org/"><img height="48" alt="W3C" id="logo" src="http://www.w3.org/Icons/WWW/w3c_home_nb" /></a>
|
|
W3C Blog
|
|
</h1>
|
|
</div>
|
|
|
|
<ul class="navbar" id="menu">
|
|
<li><strong><a href="/QA/" title="W3C Blog Home">[ W3C Blog ]</a></strong></li>
|
|
<li><a href="/QA/Library/" title="Documents and Publications on Web and Quality">Documents</a></li>
|
|
<li><a href="/QA/Tools/" accesskey="3" title="Validators and other Tools">Tools</a></li>
|
|
<li><a href="/2007/12/qa-blog-help/index#feedback">Feedback</a></li>
|
|
</ul>
|
|
<div id="searchbox">
|
|
<form method="get" action="http://www.google.com/custom" enctype="application/x-www-form-urlencoded">
|
|
<p id="formbox"><input type="text" size="15" class="textfield" name="q" accesskey="E" maxlength="255" /> <input type="submit" class="submitfield" value="Search" id="goButton" name="sa" accesskey="G" /> <input type="hidden" name="cof" value="T:black;LW:72;ALC:#ff3300;L:http://www.w3.org/Icons/w3c_home;LC:#000099;LH:48;BGC:white;AH:left;VLC:#660066;GL:0;AWFID:0b9847e42caf283e;" /><input type="hidden" id="searchW3C" name="sitesearch" checked="checked" value="www.w3.org/QA" /><input type="hidden" name="domains" value="www.w3.org/QA" /></p>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
<div id="main"><!-- This DIV encapsulates everything in this page - necessary for the positioning -->
|
|
|
|
<p class="content-nav">
|
|
<a href="http://www.w3.org/QA/2008/05/using_rdfa_to_add_information.html">« How to add RDF information to a page using RDFa?</a> |
|
|
<a href="http://www.w3.org/QA/">Main</a>
|
|
| <a href="http://www.w3.org/QA/2008/05/utf8-web-growth.html">utf-8 Growth On The Web »</a>
|
|
</p>
|
|
|
|
<h2 class="entry-header">Vertical Layouts for Canvas Text (CJK)</h2>
|
|
<div class="entry-body">
|
|
<p>I have noticed a <a href="http://krijnhoetmer.nl/irc-logs/whatwg/20080501#l-530">discussion</a> (I have cut some parts for readability) about <strong>vertical layout for text</strong> from the participants of the HTML WG. </p>
|
|
|
|
<blockquote>
|
|
<p><Hixie> ok for canvas text my proposal is:</p>
|
|
|
|
<p><Hixie> drawHString(x, y, maxWidth, textAlign, s); and drawHString(x, y, maxHeight, textAlign, s);</p>
|
|
|
|
<p><Hixie> drawVString(...) for the second one</p>
|
|
|
|
<p><Lachy> what's the difference between them? drawVString for vertical stings where the letters are stacked on top of each other, and not just rotated 90 deg? </p>
|
|
|
|
<p><Philip`> Hixie: They look complex and hard to use :-p</p>
|
|
|
|
<p><Philip`> compared to e.g. translate(x,y);drawString(s)</p>
|
|
|
|
<p><Hixie> lachy: drawVString() would be for vertical text (e.g. some CJK)</p>
|
|
|
|
<p><Hixie> one is lack of support for vertical text :-)</p>
|
|
</blockquote>
|
|
|
|
<p>In printed media, it is handled quite well for a long time. Japanese books have some complex layouts mixing western and japanese characters. </p>
|
|
|
|
<p><img src="http://www.la-grange.net/2007/07/23-japanese-typography.jpg" alt="Japanese Typography" title="" /></p>
|
|
|
|
<p>It happens not only in CJK (Chinese Japanese Korean) texts. Think about a neon sign of an hotel with the letters written vertically.</p>
|
|
|
|
<p>Felix Sasaki is my colleague at W3C/Keio and has worked with the <a href="http://www.w3.org/2007/02/japanese-layout/" title="Japanese Layout Task Force">Japanese Layout Task Force</a>. He was sitting next to me when I was reading the logs of the discussion, so I just asked him some references. He sent me a link to <a href="http://www.w3.org/TR/2008/WD-jlreq-20080411/#subheading1_3" title="Requirements of Japanese Text Layout">1.3 Directional Factors in Japanese Text Layout</a> from the <span class="title">Requirements of Japanese Text Layout</span>. He also reminded me about XSL 1.1: <a href="http://www.w3.org/TR/xsl/#glyph-orientation-vertical" title="Extensible Stylesheet Language (XSL) Version 1.1">7.29.3 "glyph-orientation-vertical" </a>.</p>
|
|
|
|
<p>Wikipedia has a page on the topic of <a href="http://en.wikipedia.org/wiki/Horizontal_and_vertical_writing_in_East_Asian_scripts">Horizontal and vertical writing in East Asian scripts</a> and Unicode a note on <a href="http://www.unicode.org/notes/tn22/" title="UTN #22: Robust Vertical Text Layout">Robust Vertical Text Layout</a>.</p>
|
|
|
|
<p>All of that should help to define the API for Canvas Text.</p>
|
|
|
|
</div>
|
|
<div id="more" class="entry-more">
|
|
|
|
|
|
</div>
|
|
<p class="postinfo">Filed by <a href="http://www.w3.org/People/karl/">Karl Dubost</a> on May 2, 2008 3:35 AM in <a href="http://www.w3.org/QA/archive/technology/html/">HTML</a>, <a href="http://www.w3.org/QA/archive/web_spotting/reference/">Reference</a><br />
|
|
<span class="separator">|</span> <a class="permalink" href="http://www.w3.org/QA/2008/05/canvas-text-and-cjk.html">Permalink</a>
|
|
| <a href="http://www.w3.org/QA/2008/05/canvas-text-and-cjk.html#comments">Comments (1)</a>
|
|
| <a href="http://www.w3.org/QA/2008/05/canvas-text-and-cjk.html#trackback">TrackBacks (0)</a>
|
|
</p>
|
|
|
|
|
|
|
|
<h3 class="comments-header" id="comments">Comments</h3>
|
|
<div class="comment" id="comment-138415">
|
|
<p class="comment-meta" id="c138415">
|
|
<span class="comment-meta-author"><strong>Ian Hickson </strong></span>
|
|
<span class="comment-meta-date"><a href="#c138415">#</a> 2008-05-02</span>
|
|
</p>
|
|
<div class="comment-bulk">
|
|
<p>Yup, I was reading most of the above (as well as CSS3 text and XSL:FO, and studying actual graphics and charts on japanese sites) when doing my research for this. Thanks for the link to jlreq btw, didnt' know about that one.</p>
|
|
|
|
<p>Note that we're not trying to do full typography here, we're trying to do an immediate mode graphics API. The needs are different from the needs of book publishers. :-)</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="comments-open" id="comments-open">
|
|
<h3 class="comments-open-header">Leave a comment</h3>
|
|
|
|
<div class="comments-open-moderated">
|
|
<p>
|
|
Note: this blog is intended to foster <strong>polite
|
|
on-topic discussions</strong>. Comments failing these
|
|
requirements and spam will not get published. Please,
|
|
enter your real name and email address. Every
|
|
individual comment is reviewed by the W3C staff.
|
|
This may take some time, thank you for your patience.
|
|
</p>
|
|
<p>
|
|
You can use the following HTML markup (a href, b, i,
|
|
br/, p, strong, em, ul, ol, li, blockquote, pre)
|
|
and/or <a href="http://daringfireball.net/projects/markdown/syntax">Markdown syntax</a>.</p>
|
|
</div>
|
|
|
|
<div id="comments-open-data">
|
|
<form method="post" action="http://www.w3.org/QA/sununga/beach.pl" id="comments-form">
|
|
<h4>Your comment</h4>
|
|
<div id="comments-open-text">
|
|
<textarea id="comment-text" name="text" rows="20" cols="100"></textarea><br />
|
|
<label for="comment-text">Write your comment text here. Remember, keep the discussion on topic and courteous.</label>
|
|
</div>
|
|
|
|
<h4>About you</h4>
|
|
<div id="comment-form-name">
|
|
<input type="hidden" name="static" value="1" />
|
|
<input type="hidden" name="entry_id" value="175" />
|
|
<input type="hidden" name="__lang" value="en" />
|
|
<label for="comment-author">Your Name</label>
|
|
<input id="comment-author" name="author" size="30" value="" />
|
|
</div>
|
|
<div id="comment-form-email">
|
|
<label for="comment-email">Your Email Address</label>
|
|
<input id="comment-email" name="email" size="30" value="" />
|
|
</div>
|
|
|
|
<div id="comments-open-footer">
|
|
<input type="submit" accesskey="s" name="post" id="comment-submit" value="Submit" />
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<p id="gentime">This page was last generated on $Date: 2011/12/16 03:02:51 $</p>
|
|
|
|
</div><!-- End of "main" DIV. -->
|
|
|
|
<address>
|
|
|
|
This blog is written by W3C staff and working group participants,<br />
|
|
and maintained by <a href="/People/CMercier/">Coralie Mercier</a>.<br />
|
|
Authorized parties may <a href="/QA/new">log in</a> to create a new entry.<br/>
|
|
<span id="poweredby">Powered by Movable Type, magpierss and a lot of Web Technology</span>
|
|
</address>
|
|
|
|
|
|
|
|
<p class="copyright">
|
|
<a rel="Copyright" href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1994-2011
|
|
<a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a>®
|
|
(<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>,
|
|
<a href="http://www.ercim.eu/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
|
|
<a href="http://www.keio.ac.jp/">Keio</a>),
|
|
All Rights Reserved.
|
|
W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
|
|
<a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>,
|
|
<a rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a>
|
|
and <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-software">software licensing</a>
|
|
rules apply. Your interactions with this site are in accordance
|
|
with our <a href="http://www.w3.org/Consortium/Legal/privacy-statement#Public">public</a> and
|
|
<a href="http://www.w3.org/Consortium/Legal/privacy-statement#Members">Member</a> privacy
|
|
statements.
|
|
</p>
|
|
|
|
</body>
|
|
</html>
|