canvas-text-and-cjk.html
11.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<?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>