-
Notifications
You must be signed in to change notification settings - Fork 0
/
TR.html
1217 lines (1092 loc) · 82.2 KB
/
TR.html
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
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html lang="en" dir="ltr"><head>
<!-- foo -->
<meta charset="UTF-8">
<title>Input Method Editor API</title>
<style>
body {
counter-reset: figcaption;
counter-reset: example;
}
figcaption {
font-weight: bold;
}
figcaption:before {
font-weight: bold;
content: "Figure " counter(figcaption) ": ";
counter-increment: figcaption;
}
var {
font-weight: bold;
color: green;
padding-left: 2px;
padding-right: 4px;
}
.tocline {
padding-top: 2px;
}
.ed_mailto:before {
content: "<";
}
.ed_mailto:after {
content: ">";
}
pre.example::before {
content: "Example " counter(example) " " !important;
counter-increment: example;
}
</style>
<style type="text/css">
/*****************************************************************
* ReSpec CSS
* Robin Berjon (robin at berjon dot com)
* v0.05 - 2009-07-31
*****************************************************************/
/* --- INLINES --- */
em.rfc2119 {
text-transform: lowercase;
font-variant: small-caps;
font-style: normal;
color: #900;
}
h1 acronym, h2 acronym, h3 acronym, h4 acronym, h5 acronym, h6 acronym, a acronym,
h1 abbr, h2 abbr, h3 abbr, h4 abbr, h5 abbr, h6 abbr, a abbr {
border: none;
}
dfn {
font-weight: bold;
}
a.internalDFN {
color: inherit;
border-bottom: 1px solid #99c;
text-decoration: none;
}
a.externalDFN {
color: inherit;
border-bottom: 1px dotted #ccc;
text-decoration: none;
}
a.bibref {
text-decoration: none;
}
code {
color: #ff4500;
}
/* --- WEB IDL --- */
pre.idl {
border-top: 1px solid #90b8de;
border-bottom: 1px solid #90b8de;
padding: 1em;
line-height: 120%;
}
pre.idl::before {
content: "WebIDL";
display: block;
width: 150px;
background: #90b8de;
color: #fff;
font-family: initial;
padding: 3px;
font-weight: bold;
margin: -1em 0 1em -1em;
}
.idlType {
color: #ff4500;
font-weight: bold;
text-decoration: none;
}
/*.idlModule*/
/*.idlModuleID*/
/*.idlInterface*/
.idlInterfaceID {
font-weight: bold;
color: #005a9c;
}
.idlSuperclass {
font-style: italic;
color: #005a9c;
}
/*.idlAttribute*/
.idlAttrType, .idlFieldType {
color: #005a9c;
}
.idlAttrName, .idlFieldName {
color: #ff4500;
}
.idlAttrName a, .idlFieldName a {
color: #ff4500;
border-bottom: 1px dotted #ff4500;
text-decoration: none;
}
/*.idlMethod*/
.idlMethType {
color: #005a9c;
}
.idlMethName {
color: #ff4500;
}
.idlMethName a {
color: #ff4500;
border-bottom: 1px dotted #ff4500;
text-decoration: none;
}
/*.idlParam*/
.idlParamType {
color: #005a9c;
}
.idlParamName {
font-style: italic;
}
.extAttr {
color: #666;
}
/*.idlConst*/
.idlConstType {
color: #005a9c;
}
.idlConstName {
color: #ff4500;
}
.idlConstName a {
color: #ff4500;
border-bottom: 1px dotted #ff4500;
text-decoration: none;
}
/*.idlException*/
.idlExceptionID {
font-weight: bold;
color: #c00;
}
.idlTypedefID, .idlTypedefType {
color: #005a9c;
}
.idlRaises, .idlRaises a.idlType, .idlRaises a.idlType code, .excName a, .excName a code {
color: #c00;
font-weight: normal;
}
.excName a {
font-family: monospace;
}
.idlRaises a.idlType, .excName a.idlType {
border-bottom: 1px dotted #c00;
}
.excGetSetTrue, .excGetSetFalse, .prmNullTrue, .prmNullFalse, .prmOptTrue, .prmOptFalse {
width: 45px;
text-align: center;
}
.excGetSetTrue, .prmNullTrue, .prmOptTrue { color: #0c0; }
.excGetSetFalse, .prmNullFalse, .prmOptFalse { color: #c00; }
.idlImplements a {
font-weight: bold;
}
dl.attributes, dl.methods, dl.constants, dl.fields {
margin-left: 2em;
}
.attributes dt, .methods dt, .constants dt, .fields dt {
font-weight: normal;
}
.attributes dt code, .methods dt code, .constants dt code, .fields dt code {
font-weight: bold;
color: #000;
font-family: monospace;
}
.attributes dt code, .fields dt code {
background: #ffffd2;
}
.attributes dt .idlAttrType code, .fields dt .idlFieldType code {
color: #005a9c;
background: transparent;
font-family: inherit;
font-weight: normal;
font-style: italic;
}
.methods dt code {
background: #d9e6f8;
}
.constants dt code {
background: #ddffd2;
}
.attributes dd, .methods dd, .constants dd, .fields dd {
margin-bottom: 1em;
}
table.parameters, table.exceptions {
border-spacing: 0;
border-collapse: collapse;
margin: 0.5em 0;
width: 100%;
}
table.parameters { border-bottom: 1px solid #90b8de; }
table.exceptions { border-bottom: 1px solid #deb890; }
.parameters th, .exceptions th {
color: #fff;
padding: 3px 5px;
text-align: left;
font-family: initial;
font-weight: normal;
text-shadow: #666 1px 1px 0;
}
.parameters th { background: #90b8de; }
.exceptions th { background: #deb890; }
.parameters td, .exceptions td {
padding: 3px 10px;
border-top: 1px solid #ddd;
vertical-align: top;
}
.parameters tr:first-child td, .exceptions tr:first-child td {
border-top: none;
}
.parameters td.prmName, .exceptions td.excName, .exceptions td.excCodeName {
width: 100px;
}
.parameters td.prmType {
width: 120px;
}
table.exceptions table {
border-spacing: 0;
border-collapse: collapse;
width: 100%;
}
/* --- TOC --- */
.toc a {
text-decoration: none;
}
a .secno {
color: #000;
}
/* --- TABLE --- */
table.simple {
border-spacing: 0;
border-collapse: collapse;
border-bottom: 3px solid #005a9c;
}
.simple th {
background: #005a9c;
color: #fff;
padding: 3px 5px;
text-align: left;
}
.simple th[scope="row"] {
background: inherit;
color: inherit;
border-top: 1px solid #ddd;
}
.simple td {
padding: 3px 10px;
border-top: 1px solid #ddd;
}
.simple tr:nth-child(even) {
background: #f0f6ff;
}
/* --- DL --- */
.section dd > p:first-child {
margin-top: 0;
}
.section dd > p:last-child {
margin-bottom: 0;
}
.section dd {
margin-bottom: 1em;
}
.section dl.attrs dd, .section dl.eldef dd {
margin-bottom: 0;
}
/* --- EXAMPLES --- */
pre.example {
border-top: 1px solid #ff4500;
border-bottom: 1px solid #ff4500;
padding: 1em;
margin-top: 1em;
}
pre.example::before {
content: "Example";
display: block;
width: 150px;
background: #ff4500;
color: #fff;
font-family: initial;
padding: 3px;
font-weight: bold;
margin: -1em 0 1em -1em;
}
/* --- EDITORIAL NOTES --- */
.issue {
padding: 1em;
margin: 1em 0em 0em;
border: 1px solid #f00;
background: #ffc;
}
.issue::before {
content: "Issue";
display: block;
width: 150px;
margin: -1.5em 0 0.5em 0;
font-weight: bold;
border: 1px solid #f00;
background: #fff;
padding: 3px 1em;
}
.note {
margin: 1em 0em 0em;
padding: 1em;
border: 2px solid #cff6d9;
background: #e2fff0;
}
.note::before {
content: "Note";
display: block;
width: 150px;
margin: -1.5em 0 0.5em 0;
font-weight: bold;
border: 1px solid #cff6d9;
background: #fff;
padding: 3px 1em;
}
/* --- Best Practices --- */
div.practice {
border: solid #bebebe 1px;
margin: 2em 1em 1em 2em;
}
span.practicelab {
margin: 1.5em 0.5em 1em 1em;
font-weight: bold;
font-style: italic;
}
span.practicelab { background: #dfffff; }
span.practicelab {
position: relative;
padding: 0 0.5em;
top: -1.5em;
}
p.practicedesc {
margin: 1.5em 0.5em 1em 1em;
}
@media screen {
p.practicedesc {
position: relative;
top: -2em;
padding: 0;
margin: 1.5em 0.5em -1em 1em;
}
/* --- SYNTAX HIGHLIGHTING --- */
pre.sh_sourceCode {
background-color: white;
color: black;
font-style: normal;
font-weight: normal;
}
pre.sh_sourceCode .sh_keyword { color: #005a9c; font-weight: bold; } /* language keywords */
pre.sh_sourceCode .sh_type { color: #666; } /* basic types */
pre.sh_sourceCode .sh_usertype { color: teal; } /* user defined types */
pre.sh_sourceCode .sh_string { color: red; font-family: monospace; } /* strings and chars */
pre.sh_sourceCode .sh_regexp { color: orange; font-family: monospace; } /* regular expressions */
pre.sh_sourceCode .sh_specialchar { color: #ffc0cb; font-family: monospace; } /* e.g., \n, \t, \\ */
pre.sh_sourceCode .sh_comment { color: #A52A2A; font-style: italic; } /* comments */
pre.sh_sourceCode .sh_number { color: purple; } /* literal numbers */
pre.sh_sourceCode .sh_preproc { color: #00008B; font-weight: bold; } /* e.g., #include, import */
pre.sh_sourceCode .sh_symbol { color: blue; } /* e.g., *, + */
pre.sh_sourceCode .sh_function { color: black; font-weight: bold; } /* function calls and declarations */
pre.sh_sourceCode .sh_cbracket { color: red; } /* block brackets (e.g., {, }) */
pre.sh_sourceCode .sh_todo { font-weight: bold; background-color: #00FFFF; } /* TODO and FIXME */
/* Predefined variables and functions (for instance glsl) */
pre.sh_sourceCode .sh_predef_var { color: #00008B; }
pre.sh_sourceCode .sh_predef_func { color: #00008B; font-weight: bold; }
/* for OOP */
pre.sh_sourceCode .sh_classname { color: teal; }
/* line numbers (not yet implemented) */
pre.sh_sourceCode .sh_linenum { display: none; }
/* Internet related */
pre.sh_sourceCode .sh_url { color: blue; text-decoration: underline; font-family: monospace; }
/* for ChangeLog and Log files */
pre.sh_sourceCode .sh_date { color: blue; font-weight: bold; }
pre.sh_sourceCode .sh_time, pre.sh_sourceCode .sh_file { color: #00008B; font-weight: bold; }
pre.sh_sourceCode .sh_ip, pre.sh_sourceCode .sh_name { color: #006400; }
/* for Prolog, Perl... */
pre.sh_sourceCode .sh_variable { color: #006400; }
/* for LaTeX */
pre.sh_sourceCode .sh_italics { color: #006400; font-style: italic; }
pre.sh_sourceCode .sh_bold { color: #006400; font-weight: bold; }
pre.sh_sourceCode .sh_underline { color: #006400; text-decoration: underline; }
pre.sh_sourceCode .sh_fixed { color: green; font-family: monospace; }
pre.sh_sourceCode .sh_argument { color: #006400; }
pre.sh_sourceCode .sh_optionalargument { color: purple; }
pre.sh_sourceCode .sh_math { color: orange; }
pre.sh_sourceCode .sh_bibtex { color: blue; }
/* for diffs */
pre.sh_sourceCode .sh_oldfile { color: orange; }
pre.sh_sourceCode .sh_newfile { color: #006400; }
pre.sh_sourceCode .sh_difflines { color: blue; }
/* for css */
pre.sh_sourceCode .sh_selector { color: purple; }
pre.sh_sourceCode .sh_property { color: blue; }
pre.sh_sourceCode .sh_value { color: #006400; font-style: italic; }
/* other */
pre.sh_sourceCode .sh_section { color: black; font-weight: bold; }
pre.sh_sourceCode .sh_paren { color: red; }
pre.sh_sourceCode .sh_attribute { color: #006400; }
</style><link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet" type="text/css" charset="utf-8"></head>
<body style="display: inherit; "><div class="head"><p><a href="http://www.w3.org/"><img width="72" height="48" src="http://www.w3.org/Icons/w3c_home" alt="W3C"></a></p><h1 class="title" id="title">Input Method Editor API</h1><h2 id="w3c-working-draft-24-may-2012">W3C Working Draft 24 May 2012</h2><dl><dt>This version:</dt><dd><a href="http://www.w3.org/TR/2012/WD-ime-api-20120524/">http://www.w3.org/TR/2012/WD-ime-api-20120524/</a></dd><dt>Latest published version:</dt><dd><a href="http://www.w3.org/TR/ime-api/">http://www.w3.org/TR/ime-api/</a></dd><dt>Latest editor's draft:</dt><dd><a href="http://dvcs.w3.org/hg/ime-api/raw-file/default/Overview.html">http://dvcs.w3.org/hg/ime-api/raw-file/default/Overview.html</a></dd><dt>Editors:</dt><dd><span>Hironori Bono (坊野 博典)</span>, Google <span class="ed_mailto"><a href="mailto:hbono@google.com">hbono@google.com</a></span> </dd>
<dd><span>Kenji Baheux</span>, Google <span class="ed_mailto"><a href="mailto:kenjibaheux@google.com">kenjibaheux@google.com</a></span> </dd>
</dl><p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2012 <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<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> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p><hr></div>
<div id="abstract" class="introductory section"><h2>Abstract</h2>
<p>This specification defines an "IME API" that provides Web applications
with scripted access to an IME (<a href="#IME">input-method editor</a>)
associated with a hosting user agent. This IME API includes:</p>
<ul>
<li>An <a href="#idl-def-InputMethodContext" class="idlType"><code>InputMethodContext</code></a> interface, which provides methods to
retrieve detailed data from an in-progress IME
<a href="#ime-composition">composition</a>,
and to update that data.</li>
<li>A <a href="#idl-def-Composition" class="idlType"><code>Composition</code></a> dictionary, which represents read-only attributes
about the current
<a href="#ime-composition">composition</a>,
such as the actual text being input, its length, and its target
<a href="#ime-clause">clause</a>.
<p class="issue">need to define what a <i>clause</i> is</p></li>
</ul>
<p>This API is designed to be used in conjunction with DOM events and
elements on the Web platform, notably: composition events and the
<a href="http://dev.w3.org/html5/2dcontext/">Canvas 2D Context API</a>
[<cite><a class="bibref" rel="biblioentry" href="#bib-CANVAS-2D">CANVAS-2D</a></cite>].</p>
</div><div id="sotd" class="introductory section"><h2>Status of This Document</h2><p><em>This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the <a href="http://www.w3.org/TR/">W3C technical reports index</a> at http://www.w3.org/TR/.</em></p>
<p>
This document is a proposal that is being made available for public
review in order to solicit feedback, particularly from
implementors, with a goal of potential cross-browser implementation
and standardization.
</p>
<p>This document was published by the <a href="http://www.w3.org/2008/webapps/">Web Applications Working Group</a> as a First Public Working Draft. This document is intended to become a W3C Recommendation. If you wish to make comments regarding this document, please send them to <a href="mailto:public-webapps@w3.org">public-webapps@w3.org</a> (<a href="mailto:public-webapps-request@w3.org?subject=subscribe">subscribe</a>, <a href="http://lists.w3.org/Archives/Public/public-webapps/">archives</a>). All feedback is welcome.</p><p>Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.</p><p>This document was produced by a group operating under the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>. W3C maintains a <a href="http://www.w3.org/2004/01/pp-impl/42538/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>.</p></div><div id="toc" class="section"><h2 class="introductory">Table of Contents</h2><ul class="toc"><li class="tocline"><a href="#introduction" class="tocxref"><span class="secno">1. </span>Introduction</a></li><li class="tocline"><a href="#background" class="tocxref"><span class="secno">2. </span>Background: What’s an Input Method Editor?</a><ul class="toc"><li class="tocline"><a href="#composer-section" class="tocxref"><span class="secno">2.1 </span>Composer</a><ul class="toc"><li class="tocline"><a href="#phonetic-composer-section" class="tocxref"><span class="secno">2.1.1 </span>Phonetic composer</a></li><li class="tocline"><a href="#radical-composer-section" class="tocxref"><span class="secno">2.1.2 </span>Radical composer</a></li></ul></li><li class="tocline"><a href="#converter-section" class="tocxref"><span class="secno">2.2 </span>Converter</a></li></ul></li><li class="tocline"><a href="#conformance" class="tocxref"><span class="secno">3. </span>Conformance</a></li><li class="tocline"><a href="#terminology" class="tocxref"><span class="secno">4. </span>Terminology and algorithms</a></li><li class="tocline"><a href="#the-getinputcontext---method" class="tocxref"><span class="secno">5. </span>The getInputContext() method</a><ul class="toc"><li class="tocline"></li></ul></li><li class="tocline"><a href="#composition-dictionary" class="tocxref"><span class="secno">6. </span>The Composition Dictionary</a><ul class="toc"><li class="tocline"></li></ul></li><li class="tocline"><a href="#inputmethodcontext-interface" class="tocxref"><span class="secno">7. </span>The InputMethodContext Interface</a><ul class="toc"><li class="tocline"></li><li class="tocline"></li></ul></li><li class="tocline"><a href="#best-practices" class="tocxref"><span class="secno">8. </span>Best practices</a><ul class="toc"><li class="tocline"><a href="#javascript-imes" class="tocxref"><span class="secno">8.1 </span>JavaScript IMEs</a><ul class="toc"><li class="tocline"><a href="#composing-text" class="tocxref"><span class="secno">8.1.1 </span>Composing text</a></li><li class="tocline"><a href="#consuming-events" class="tocxref"><span class="secno">8.1.2 </span>Consuming events</a></li><li class="tocline"><a href="#enabling-disabling-js-imes" class="tocxref"><span class="secno">8.1.3 </span>Enabling or Disabling JavaScript IMEs</a></li><li class="tocline"><a href="#candidate-window-section" class="tocxref"><span class="secno">8.1.4 </span>Candidate window</a></li></ul></li><li class="tocline"><a href="#ime-aware-webapps" class="tocxref"><span class="secno">8.2 </span>IME-aware Web applications</a><ul class="toc"><li class="tocline"><a href="#using-js-imes" class="tocxref"><span class="secno">8.2.1 </span>Using JavaScript IMEs</a></li><li class="tocline"><a href="#using-system-imes" class="tocxref"><span class="secno">8.2.2 </span>Using system IMEs</a></li><li class="tocline"><a href="#does-not-use-imes" class="tocxref"><span class="secno">8.2.3 </span>Does not use IMEs</a></li></ul></li></ul></li><li class="tocline"><a href="#references" class="tocxref"><span class="secno">A. </span>References</a><ul class="toc"><li class="tocline"><a href="#normative-references" class="tocxref"><span class="secno">A.1 </span>Normative references</a></li><li class="tocline"><a href="#informative-references" class="tocxref"><span class="secno">A.2 </span>Informative references</a></li></ul></li></ul></div>
<div class="informative section" id="introduction">
<!--OddPage--><h2><span class="secno">1. </span>Introduction</h2><p><em>This section is non-normative.</em></p>
<p>Even though existing Web-platform APIs allow developers to implement very
complicated Web applications, such as visual chat applications, using
technologies such as SVG or the <code><canvas></code> element and API,
developers have difficulties when implementing Web applications that
control <a href="#IME">input-method editors</a>. To provide the
ability for hosting user agents to expose Web applications to the
<a href="#ime-composition">composition text</a>
being composed in an associated IME,
<a href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html">the DOM Level 3 Events specification</a>
[<cite><a class="bibref" rel="biblioentry" href="#bib-DOM-LEVEL-3-EVENTS">DOM-LEVEL-3-EVENTS</a></cite>]
introduces <i>composition events</i>. Using composition events, Web
applications can retrieve
<a href="#ime-composition">composition text</a>
from an IME.</p>
<p>However, Web applications can still run into difficulties when
they manipulate IMEs on non-editable elements such as the
<code><canvas></code> element; those difficulties include the fact
that a Web application cannot do the following:</p>
<ul>
<li>indicate to the user whether the Web application renders
composition text by itself, or needs to ask user agents to render it</li>
<li>determine the place where user agents render composition text</li>
<li>detect whether the user agent renders
<a href="#candidate-window">candidate windows</a>
by themselves</li>
<li>determine the place where user agents render
<a href="#candidate-window">candidate windows</a></li>
</ul>
<p>The Web platform has a number of existing APIs useful for
implementing a custom IME in JavaScript. For example, the Web Storage
API can store an IME dictionary, and the WebSocket and XMLHttpRequest APIs
allow sending a server request that performs a lookup in an IME dictionary,
and so on. In fact, Web-application developers are already developing and
deploying JavaScript-based IMEs that use these APIs. However, it is
currently difficult to make those JavaScript-based IMEs work on all user
agents, because they often rely on APIs specific to the hosting user agent,
such as browser extension APIs.</p>
<p>To solve these IME-related problems, this specification introduces
an IME API that allows Web applications to read and write composition
data made available by user agents. Moreover, this specification introduces
interfaces for
<a href="#ime-composition">compositions</a>,
so Web applications can read detailed composition
data and update it. A <a href="#idl-def-Composition" class="idlType"><code>Composition</code></a> object provides a reference
to an ongoing IME
<a href="#ime-composition">composition</a>,
so Web applications can retrieve the composition text and attributes.</p>
<p>The use of those APIs allows Web applications the ability to set the
position of a <a href="#composition-window">composition window</a>
and to retrieve the text and attributes of the ongoing
<a href="#ime-composition">composition</a>.</p>
<p>Consider the following examples. The first example shows the
source for a Web application that renders composition text by itself
and uses the
<a href="#candidate-window">candidate window</a>
provided by an IME.</p>
<pre class="example sh_javascript sh_sourceCode" id="ex-candidate-window"><span class="sh_symbol"><!</span>DOCTYPE html<span class="sh_symbol">></span>
<span class="sh_symbol"><</span>html<span class="sh_symbol">></span>
<span class="sh_symbol"><</span>head<span class="sh_symbol">></span>
<span class="sh_symbol"><</span>script language<span class="sh_symbol">=</span><span class="sh_string">"javascript"</span> type<span class="sh_symbol">=</span><span class="sh_string">"text/javascript"</span><span class="sh_symbol">></span>
<span class="sh_keyword">function</span> <span class="sh_function">init</span><span class="sh_symbol">()</span> <span class="sh_cbracket">{</span>
window<span class="sh_symbol">.</span>inputmethodmanager<span class="sh_symbol">.</span><span class="sh_function">setOpenState</span><span class="sh_symbol">(</span><span class="sh_keyword">true</span><span class="sh_symbol">);</span>
<span class="sh_keyword">var</span> node <span class="sh_symbol">=</span> document<span class="sh_symbol">.</span><span class="sh_function">getElementById</span><span class="sh_symbol">(</span><span class="sh_string">'canvas0'</span><span class="sh_symbol">);</span>
node<span class="sh_symbol">.</span><span class="sh_function">getInputContext</span><span class="sh_symbol">().</span><span class="sh_function">setEnable</span><span class="sh_symbol">(</span><span class="sh_keyword">true</span><span class="sh_symbol">);</span>
node<span class="sh_symbol">.</span><span class="sh_function">addEventListener</span><span class="sh_symbol">(</span><span class="sh_string">'compositionstart'</span><span class="sh_symbol">,</span> onCompositionStart<span class="sh_symbol">,</span> <span class="sh_keyword">false</span><span class="sh_symbol">);</span>
node<span class="sh_symbol">.</span><span class="sh_function">addEventListener</span><span class="sh_symbol">(</span><span class="sh_string">'compositionupdate'</span><span class="sh_symbol">,</span> onCompositionUpdate<span class="sh_symbol">,</span> <span class="sh_keyword">false</span><span class="sh_symbol">);</span>
node<span class="sh_symbol">.</span><span class="sh_function">addEventListener</span><span class="sh_symbol">(</span><span class="sh_string">'compositionend'</span><span class="sh_symbol">,</span> onCompositionEnd<span class="sh_symbol">,</span> <span class="sh_keyword">false</span><span class="sh_symbol">);</span>
<span class="sh_cbracket">}</span>
<span class="sh_keyword">function</span> <span class="sh_function">onCompositionStart</span><span class="sh_symbol">(</span>event<span class="sh_symbol">)</span> <span class="sh_cbracket">{</span>
<span class="sh_cbracket">}</span>
<span class="sh_keyword">function</span> <span class="sh_function">onCompositionUpdate</span><span class="sh_symbol">(</span>event<span class="sh_symbol">)</span> <span class="sh_cbracket">{</span>
<span class="sh_keyword">var</span> x <span class="sh_symbol">=</span> <span class="sh_number">0</span><span class="sh_symbol">;</span>
<span class="sh_keyword">var</span> y <span class="sh_symbol">=</span> <span class="sh_number">0</span><span class="sh_symbol">;</span>
<span class="sh_keyword">var</span> canvas <span class="sh_symbol">=</span> document<span class="sh_symbol">.</span><span class="sh_function">getElementById</span><span class="sh_symbol">(</span><span class="sh_string">'canvas0'</span><span class="sh_symbol">);</span>
<span class="sh_keyword">var</span> context <span class="sh_symbol">=</span> canvas<span class="sh_symbol">.</span><span class="sh_function">getContext</span><span class="sh_symbol">(</span><span class="sh_string">'2d'</span><span class="sh_symbol">);</span>
<span class="sh_keyword">var</span> inputContext <span class="sh_symbol">=</span> canvas<span class="sh_symbol">.</span><span class="sh_function">getInputContext</span><span class="sh_symbol">();</span>
<span class="sh_keyword">var</span> composition <span class="sh_symbol">=</span> inputContext<span class="sh_symbol">.</span>composition<span class="sh_symbol">;</span>
<span class="sh_comment">// Render a caret.</span>
<span class="sh_comment">// NOTE: this just renders a caret rectangle in black for</span>
<span class="sh_comment">// simplicity.</span>
<span class="sh_keyword">if</span> <span class="sh_symbol">(</span>composition<span class="sh_symbol">.</span>caret<span class="sh_symbol">.</span>start <span class="sh_symbol">>=</span> <span class="sh_number">0</span><span class="sh_symbol">)</span> <span class="sh_cbracket">{</span>
<span class="sh_keyword">var</span> start <span class="sh_symbol">=</span> context<span class="sh_symbol">.</span><span class="sh_function">measureText</span><span class="sh_symbol">(</span>
composition<span class="sh_symbol">.</span>text<span class="sh_symbol">.</span><span class="sh_function">substring</span><span class="sh_symbol">(</span><span class="sh_number">0</span><span class="sh_symbol">,</span> composition<span class="sh_symbol">.</span>caret<span class="sh_symbol">.</span>start<span class="sh_symbol">));</span>
<span class="sh_keyword">var</span> end <span class="sh_symbol">=</span> context<span class="sh_symbol">.</span><span class="sh_function">measureText</span><span class="sh_symbol">(</span>
composition<span class="sh_symbol">.</span>text<span class="sh_symbol">.</span><span class="sh_function">substring</span><span class="sh_symbol">(</span><span class="sh_number">0</span><span class="sh_symbol">,</span> composition<span class="sh_symbol">.</span>caret<span class="sh_symbol">.</span>end<span class="sh_symbol">));</span>
context<span class="sh_symbol">.</span>fillStyle <span class="sh_symbol">=</span> ’black’<span class="sh_symbol">;</span>
context<span class="sh_symbol">.</span><span class="sh_function">fillRect</span><span class="sh_symbol">(</span>start<span class="sh_symbol">.</span>width<span class="sh_symbol">,</span> y<span class="sh_symbol">,</span> end<span class="sh_symbol">.</span>width<span class="sh_symbol">,</span> y <span class="sh_symbol">+</span> <span class="sh_number">10</span><span class="sh_symbol">);</span>
<span class="sh_cbracket">}</span>
<span class="sh_comment">// Render the clauses in the composition.</span>
<span class="sh_keyword">for</span> <span class="sh_symbol">(</span><span class="sh_keyword">var</span> i <span class="sh_symbol">=</span> <span class="sh_number">0</span><span class="sh_symbol">;</span> i <span class="sh_symbol"><</span> composition<span class="sh_symbol">.</span>clauses<span class="sh_symbol">.</span>length<span class="sh_symbol">;</span> <span class="sh_symbol">++</span>i<span class="sh_symbol">)</span> <span class="sh_cbracket">{</span>
<span class="sh_keyword">var</span> text <span class="sh_symbol">=</span> composition<span class="sh_symbol">.</span>clauses<span class="sh_symbol">[</span>i<span class="sh_symbol">].</span>text<span class="sh_symbol">;</span>
<span class="sh_keyword">var</span> metrics <span class="sh_symbol">=</span> context<span class="sh_symbol">.</span><span class="sh_function">measureText</span><span class="sh_symbol">(</span>text<span class="sh_symbol">);</span>
<span class="sh_comment">// Draw the text of this clause.</span>
context<span class="sh_symbol">.</span>fillStyle <span class="sh_symbol">=</span> composition<span class="sh_symbol">.</span>clauses<span class="sh_symbol">[</span>i<span class="sh_symbol">].</span>textColor<span class="sh_symbol">;</span>
context<span class="sh_symbol">.</span><span class="sh_function">fillText</span><span class="sh_symbol">(</span>text<span class="sh_symbol">,</span> x<span class="sh_symbol">,</span> y<span class="sh_symbol">);</span>
<span class="sh_comment">// Draw an underline under the text. For simplicity, this code</span>
<span class="sh_comment">// draws a bold underline for selected clauses or a thin</span>
<span class="sh_comment">// underline for non-selected ones.</span>
<span class="sh_keyword">if</span> <span class="sh_symbol">(</span>composition<span class="sh_symbol">.</span>clauses<span class="sh_symbol">[</span>i<span class="sh_symbol">].</span>selected<span class="sh_symbol">)</span> <span class="sh_cbracket">{</span>
context<span class="sh_symbol">.</span><span class="sh_function">fillRect</span><span class="sh_symbol">(</span>x<span class="sh_symbol">,</span> y<span class="sh_symbol">,</span> x <span class="sh_symbol">+</span> metrics<span class="sh_symbol">.</span>width<span class="sh_symbol">,</span> y <span class="sh_symbol">+</span> <span class="sh_number">2</span><span class="sh_symbol">);</span>
<span class="sh_cbracket">}</span> <span class="sh_keyword">else</span> <span class="sh_cbracket">{</span>
context<span class="sh_symbol">.</span><span class="sh_function">fillRect</span><span class="sh_symbol">(</span>x<span class="sh_symbol">,</span> y<span class="sh_symbol">,</span> x <span class="sh_symbol">+</span> metrics<span class="sh_symbol">.</span>width<span class="sh_symbol">,</span> y <span class="sh_symbol">+</span> <span class="sh_number">1</span><span class="sh_symbol">);</span>
<span class="sh_cbracket">}</span>
x <span class="sh_symbol">+=</span> metrics<span class="sh_symbol">.</span>width<span class="sh_symbol">;</span>
<span class="sh_cbracket">}</span>
<span class="sh_comment">// Move the candidate window outside of the composition text.</span>
window<span class="sh_symbol">.</span>inputmethodmanager<span class="sh_symbol">.</span><span class="sh_function">moveCandidateWindow</span><span class="sh_symbol">(</span><span class="sh_number">0</span><span class="sh_symbol">,</span> y<span class="sh_symbol">,</span> x<span class="sh_symbol">,</span> y <span class="sh_symbol">+</span> <span class="sh_number">10</span><span class="sh_symbol">);</span>
<span class="sh_cbracket">}</span>
<span class="sh_keyword">function</span> <span class="sh_function">onCompositionEnd</span><span class="sh_symbol">(</span>event<span class="sh_symbol">)</span> <span class="sh_cbracket">{</span>
<span class="sh_cbracket">}</span>
<span class="sh_symbol"></</span>script<span class="sh_symbol">></span>
<span class="sh_symbol"></</span>head<span class="sh_symbol">></span>
<span class="sh_symbol"><</span>body<span class="sh_symbol">></span>
<span class="sh_symbol"><</span>canvas id<span class="sh_symbol">=</span>”canvas0” width<span class="sh_symbol">=</span>”<span class="sh_number">640</span>” height<span class="sh_symbol">=</span>”<span class="sh_number">480</span>”<span class="sh_symbol">></</span>canvas<span class="sh_symbol">></span>
<span class="sh_symbol"></</span>body<span class="sh_symbol">></span>
<span class="sh_symbol"></</span>html<span class="sh_symbol">></span></pre>
<p>The next example shows the source for a simple IME that composes
Japanese Hiragana characters from key strokes.</p>
<p class="note">This is just a sample and not suitable for real use.</p>
<pre class="example sh_javascript sh_sourceCode" id="ex-hiragana-keystrokes"><span class="sh_symbol"><!</span>DOCTYPE html<span class="sh_symbol">></span>
<span class="sh_symbol"><</span>html<span class="sh_symbol">></span>
<span class="sh_symbol"><</span>head<span class="sh_symbol">></span>
<span class="sh_symbol"><</span>title<span class="sh_symbol">></</span>title<span class="sh_symbol">></span>
<span class="sh_symbol"><</span>script language<span class="sh_symbol">=</span><span class="sh_string">"javascript"</span> type<span class="sh_symbol">=</span><span class="sh_string">"text/javascript"</span><span class="sh_symbol">></span>
<span class="sh_keyword">var</span> imeActivated <span class="sh_symbol">=</span> <span class="sh_keyword">false</span><span class="sh_symbol">;</span>
<span class="sh_keyword">var</span> imeRomajiInput <span class="sh_symbol">=</span> <span class="sh_string">''</span><span class="sh_symbol">;</span>
<span class="sh_keyword">var</span> imeRomajiTable <span class="sh_symbol">=</span> <span class="sh_cbracket">{</span>
<span class="sh_string">'A'</span><span class="sh_symbol">:</span> <span class="sh_string">'</span><span class="sh_specialchar">\u</span><span class="sh_string">3042'</span><span class="sh_symbol">,</span> <span class="sh_string">'I'</span><span class="sh_symbol">:</span> <span class="sh_string">'</span><span class="sh_specialchar">\u</span><span class="sh_string">3044'</span><span class="sh_symbol">,</span> <span class="sh_string">'U'</span><span class="sh_symbol">:</span> <span class="sh_string">'</span><span class="sh_specialchar">\u</span><span class="sh_string">3046'</span><span class="sh_symbol">,</span> <span class="sh_string">'E'</span><span class="sh_symbol">:</span> <span class="sh_string">'</span><span class="sh_specialchar">\u</span><span class="sh_string">3048'</span><span class="sh_symbol">,</span> <span class="sh_string">'O'</span><span class="sh_symbol">:</span> <span class="sh_string">'</span><span class="sh_specialchar">\u</span><span class="sh_string">304A'</span><span class="sh_symbol">,</span>
<span class="sh_comment">/* suppressed */</span>
<span class="sh_cbracket">}</span><span class="sh_symbol">;</span>
<span class="sh_keyword">function</span> <span class="sh_function">init</span><span class="sh_symbol">()</span> <span class="sh_cbracket">{</span>
<span class="sh_comment">// Disable the system IME associated with this window.</span>
window<span class="sh_symbol">.</span>inputmethodmanager<span class="sh_symbol">.</span><span class="sh_function">setOpenState</span><span class="sh_symbol">(</span><span class="sh_keyword">false</span><span class="sh_symbol">);</span>
<span class="sh_comment">// Listens the keyboard events.</span>
<span class="sh_keyword">var</span> node <span class="sh_symbol">=</span> document<span class="sh_symbol">.</span><span class="sh_function">getElementById</span><span class="sh_symbol">(</span><span class="sh_string">'input0'</span><span class="sh_symbol">);</span>
node<span class="sh_symbol">.</span><span class="sh_function">addEventListener</span><span class="sh_symbol">(</span><span class="sh_string">'keydown'</span><span class="sh_symbol">,</span> onKeyDown<span class="sh_symbol">,</span> <span class="sh_keyword">false</span><span class="sh_symbol">);</span>
node<span class="sh_symbol">.</span><span class="sh_function">addEventListener</span><span class="sh_symbol">(</span><span class="sh_string">'keyup'</span><span class="sh_symbol">,</span> onKeyUp<span class="sh_symbol">,</span> <span class="sh_keyword">false</span><span class="sh_symbol">);</span>
<span class="sh_cbracket">}</span>
<span class="sh_keyword">function</span> <span class="sh_function">onKeyDown</span><span class="sh_symbol">(</span>event<span class="sh_symbol">)</span> <span class="sh_cbracket">{</span>
<span class="sh_comment">// Toggle the input mode when pressing a shift key.</span>
<span class="sh_keyword">if</span> <span class="sh_symbol">(</span>event<span class="sh_symbol">.</span>key <span class="sh_symbol">==</span> <span class="sh_string">'Shift'</span><span class="sh_symbol">)</span> <span class="sh_cbracket">{</span>
imeActivated <span class="sh_symbol">=</span> <span class="sh_symbol">!</span>imeActivated<span class="sh_symbol">;</span>
imeRomajiInput <span class="sh_symbol">=</span> <span class="sh_string">''</span><span class="sh_symbol">;</span>
<span class="sh_cbracket">}</span>
<span class="sh_comment">// Exit if this IME is not activated.</span>
<span class="sh_keyword">if</span> <span class="sh_symbol">(!</span>imeActivated<span class="sh_symbol">)</span>
<span class="sh_keyword">return</span> <span class="sh_keyword">true</span><span class="sh_symbol">;</span>
<span class="sh_keyword">var</span> imeComposition <span class="sh_symbol">=</span> <span class="sh_keyword">new</span> Composition<span class="sh_symbol">;</span>
<span class="sh_keyword">var</span> imeConfirm <span class="sh_symbol">=</span> <span class="sh_keyword">false</span><span class="sh_symbol">;</span>
<span class="sh_keyword">if</span> <span class="sh_symbol">(</span>event<span class="sh_symbol">.</span>keyCode <span class="sh_symbol"><</span> <span class="sh_number">0x20</span><span class="sh_symbol">)</span> <span class="sh_cbracket">{</span>
event<span class="sh_symbol">.</span><span class="sh_function">preventDefault</span><span class="sh_symbol">();</span>
<span class="sh_keyword">return</span> <span class="sh_keyword">true</span><span class="sh_symbol">;</span>
<span class="sh_cbracket">}</span>
<span class="sh_comment">// Convert the input key strokes to a Japanese character.</span>
imeRomajiInput <span class="sh_symbol">+=</span> <span class="sh_predef_func">String</span><span class="sh_symbol">.</span><span class="sh_function">fromCharCode</span><span class="sh_symbol">(</span>event<span class="sh_symbol">.</span>keyCode<span class="sh_symbol">);</span>
<span class="sh_keyword">if</span> <span class="sh_symbol">(</span>imeRomajiTable<span class="sh_symbol">[</span>imeRomajiInput<span class="sh_symbol">])</span> <span class="sh_cbracket">{</span>
imeComposition<span class="sh_symbol">.</span>text <span class="sh_symbol">=</span> imeRomajiTable<span class="sh_symbol">[</span>imeRomajiInput<span class="sh_symbol">];</span>
imeConfirm <span class="sh_symbol">=</span> <span class="sh_keyword">true</span><span class="sh_symbol">;</span>
imeRomajiInput <span class="sh_symbol">=</span> <span class="sh_string">''</span><span class="sh_symbol">;</span>
<span class="sh_cbracket">}</span> <span class="sh_keyword">else</span> <span class="sh_cbracket">{</span>
imeComposition<span class="sh_symbol">.</span>text <span class="sh_symbol">=</span> imeRomajiInput<span class="sh_symbol">;</span>
<span class="sh_cbracket">}</span>
<span class="sh_comment">// Fill the Composition object.</span>
imeComposition<span class="sh_symbol">.</span>caret<span class="sh_symbol">.</span>start <span class="sh_symbol">=</span> imeComposition<span class="sh_symbol">.</span>text<span class="sh_symbol">.</span>length<span class="sh_symbol">;</span>
imeComposition<span class="sh_symbol">.</span>caret<span class="sh_symbol">.</span>length <span class="sh_symbol">=</span> <span class="sh_number">1</span><span class="sh_symbol">;</span>
imeComposition<span class="sh_symbol">.</span>clauses<span class="sh_symbol">[</span><span class="sh_number">0</span><span class="sh_symbol">]</span> <span class="sh_symbol">=</span> <span class="sh_keyword">new</span> CompositionClause<span class="sh_symbol">;</span>
imeComposition<span class="sh_symbol">.</span>clauses<span class="sh_symbol">[</span><span class="sh_number">0</span><span class="sh_symbol">].</span>text <span class="sh_symbol">=</span> imeComposition<span class="sh_symbol">.</span>text<span class="sh_symbol">;</span>
imeComposition<span class="sh_symbol">.</span>clauses<span class="sh_symbol">[</span><span class="sh_number">0</span><span class="sh_symbol">].</span>start <span class="sh_symbol">=</span> <span class="sh_number">0</span><span class="sh_symbol">;</span>
imeComposition<span class="sh_symbol">.</span>clauses<span class="sh_symbol">[</span><span class="sh_number">0</span><span class="sh_symbol">].</span>selected <span class="sh_symbol">=</span> <span class="sh_keyword">true</span><span class="sh_symbol">;</span>
imeComposition<span class="sh_symbol">.</span>clauses<span class="sh_symbol">[</span><span class="sh_number">0</span><span class="sh_symbol">].</span>textColor <span class="sh_symbol">=</span> <span class="sh_string">'currentColor'</span><span class="sh_symbol">;</span>
imeComposition<span class="sh_symbol">.</span>clauses<span class="sh_symbol">[</span><span class="sh_number">0</span><span class="sh_symbol">].</span>backgroundColor <span class="sh_symbol">=</span> <span class="sh_string">'transparent'</span><span class="sh_symbol">;</span>
imeComposition<span class="sh_symbol">.</span>clauses<span class="sh_symbol">[</span><span class="sh_number">0</span><span class="sh_symbol">].</span>lineStyle <span class="sh_symbol">=</span> <span class="sh_string">'solid'</span><span class="sh_symbol">;</span>
imeComposition<span class="sh_symbol">.</span>clauses<span class="sh_symbol">[</span><span class="sh_number">0</span><span class="sh_symbol">].</span>lineColor <span class="sh_symbol">=</span> <span class="sh_string">'black'</span><span class="sh_symbol">;</span>
<span class="sh_comment">// Send the Composition object to the user agent.</span>
<span class="sh_keyword">var</span> context <span class="sh_symbol">=</span> event<span class="sh_symbol">.</span>target<span class="sh_symbol">.</span><span class="sh_function">getInputContext</span><span class="sh_symbol">();</span>
context<span class="sh_symbol">.</span><span class="sh_function">setComposition</span><span class="sh_symbol">(</span>imeComposition<span class="sh_symbol">);</span>
<span class="sh_keyword">if</span> <span class="sh_symbol">(</span>imeConfirm<span class="sh_symbol">)</span>
context<span class="sh_symbol">.</span><span class="sh_function">confirmComposition</span><span class="sh_symbol">();</span>
<span class="sh_comment">// Disable the default action to prevent this key from being</span>
<span class="sh_comment">// inserted.</span>
event<span class="sh_symbol">.</span><span class="sh_function">preventDefault</span><span class="sh_symbol">();</span>
<span class="sh_keyword">return</span> <span class="sh_keyword">false</span><span class="sh_symbol">;</span>
<span class="sh_cbracket">}</span>
<span class="sh_keyword">function</span> <span class="sh_function">onKeyUp</span><span class="sh_symbol">(</span>event<span class="sh_symbol">)</span> <span class="sh_cbracket">{</span>
<span class="sh_cbracket">}</span>
<span class="sh_symbol"></</span>script<span class="sh_symbol">></span>
<span class="sh_symbol"></</span>head<span class="sh_symbol">></span>
<span class="sh_symbol"><</span>body onload<span class="sh_symbol">=</span><span class="sh_string">"init();"</span><span class="sh_symbol">></span>
<span class="sh_symbol"><</span>textarea id<span class="sh_symbol">=</span><span class="sh_string">"input0"</span> cols<span class="sh_symbol">=</span><span class="sh_string">"80"</span> rows<span class="sh_symbol">=</span><span class="sh_string">"10"</span><span class="sh_symbol">></</span>textarea<span class="sh_symbol">></span>
<span class="sh_symbol"></</span>body<span class="sh_symbol">></span>
<span class="sh_symbol"></</span>html<span class="sh_symbol">></span></pre>
</div>
<div class="informative section" id="background">
<!--OddPage--><h2><span class="secno">2. </span>Background: What’s an Input Method Editor?</h2><p><em>This section is non-normative.</em></p>
<p>An <dfn id="IME">IME</dfn> (input-method editor) is an application
that allows a standard keyboard (such as a US-101 keyboard) to be used to
type characters and symbols that are not directly represented on the
keyboard itself. In China, Japan, and Korea, IMEs are used ubiquitously to
enable standard keyboards to be employed to type the very large number
of characters required for writing in Chinese, Japanese, and Korean.</p>
<p>An IME consists of two modules; a <a href="#composer">composer</a>
and a <a href="#converter">converter</a>.</p>
<p>A <dfn id="composer">composer</dfn> is a context-free parser that
composes non-ASCII characters (including phonetic characters) from
keystrokes.</p>
<p>A <dfn id="converter">converter</dfn> is a context-sensitive parser that looks up a
dictionary to convert phonetic characters to a set of ideographic
characters.</p>
<p>An <dfn id="ime-clause">IME clause</dfn> is a grammatical word produced in an IME.</p>
<p>An <dfn id="ime-selected-clause">IME selected clause</dfn> is an <a href="ime-clause">IME clause</a> being composed by an IME.</p>
<p>An <dfn id="ime-composition">IME composition</dfn>
is an instance of text produced in an IME. For IMEs that can produce multiple words, an IME composition consists of multiple IME clauses. For IMEs that produce only one word, an IME composition is equal to an IME clause.</p>
<p>When an IME receives keystrokes, it sends the keystrokes to a
composer and receives phonetic characters matching to the keystrokes. When
an IME receives phonetic characters from a composer, it sends the phonetic
characters to a converter and receives the list of ideographic characters
matching to the phonetic characters. The following figure shows the
basic structure of an IME.</p>
<figure id="fig-ime-structure">
<p><img height="199" src="images/image10.png" width="615"></p>
<figcaption>Basic structure of an IME</figcaption>
</figure>
<div id="composer-section" class="section">
<h3><span class="secno">2.1 </span>Composer</h3>
<p>A composer consists of two types of composers: a
<a href="#phonetic-composer">phonetic composer</a>
and a
<a href="#radical-composer">radical composer</a>.</p>
<p>A <dfn id="phonetic-composer">phonetic composer</dfn> composes a phonetic
character from its ASCII representation.</p>
<p>A <dfn id="radical-composer">radical composer</dfn> composes a
phonetic character from <a href="#phonetic-radical">phonetic radicals</a>.</p>
<p>A <dfn id="phonetic-radical">phonetic radical</dfn> is a character component of a Latin character, a Chinese character, or a Korean character. A Latin character consists of an ASCII character and accent marks, e.g. a character 'á' consists of an ASCII character 'a' and an accent mark '´'. A Chinese character consists of Chinese character components that refer to its semantic origins, e.g. a Chinese character '略' consists of two components '田' and '各'. A Korean character consists of Korean character components that represent consonants or vowels, e.g. a Korean character '가' consists of a consonant 'ㄱ' and a vowel 'ㅏ'.</p>
<p>A <dfn id="composition-window">composition window</dfn> is a window that shows ASCII characters being composed by <a href="#phonetic-composer">phonetic composers</a> or <a href="#phonetic-radical">phonetic radicals</a> being composed by <a href="#radical-composer">radical composers</a>.</p>
<p>An IME usually shows the text
being composed by a composer with its own style to distinguish it from the
existing text. Even though most of composers output phonetic characters,
some composers (such as Bopomofo composers) output a placeholder character
instead of phonetic characters while composing text.</p>
<p class="issue">need to define <i>composition window</i></p>
<p class="issue">probably should define <i>radical</i></p>
<p class="issue">probably should define <i>clause</i> here too</p>
<div id="phonetic-composer-section" class="section">
<h4><span class="secno">2.1.1 </span>Phonetic composer</h4>
<p>Phonetic composers are not only used for typing Simplified
Chinese and Japanese, but also used for typing non-ASCII characters (such
as mathematical symbols, Yi, Amharic, etc.) with a US-101 keyboard. Each of
these languages has a mapping table from its character to a sequence of
ASCII characters representing its pronunciation: e.g.,
'か' to 'ka' in Japanese, and;
'卡' to 'ka' in Simplified Chinese. This
mapping table is called as Romaji for Japanese and Pinyin for Simplified
Chinese, respectively. A phonetic composer uses these mapping tables to
compose a phonetic character from a sequence of ASCII characters produced
by a US keyboard.</p>
<p>A phonetic composer for Simplified Chinese outputs the input
ASCII characters as its composition text.</p>
<figure id="fig-ascii-composition-text">
<p><img height="180" src="images/image11.png" width="352"></p>
<figcaption>Composition text (Simplified Chinese)</figcaption>
</figure>
<p>On the other hand, a phonetic composer for Japanese outputs
phonetic characters when the input ASCII characters have matching phonetic
characters.</p>
<figure id="fig-kana-composition-text">
<p><img height="180" src="images/image13.png" width="352"></p>
<figcaption>Composition text (Japanese)</figcaption>
</figure>
<p>A phonetic composer for mathematical symbols outputs a
composed mathematical symbol and shows the source keystrokes to its own
window, which is an example of a composition window.</p>
<figure id="fig-composition-window">
<p><img height="214" src="images/image14.png" width="435"></p>
<figcaption>Composition text (Latex input)</figcaption>
</figure>
</div>
<div id="radical-composer-section" class="section">
<h4><span class="secno">2.1.2 </span>Radical composer</h4>
<p>Radical composers are mainly used for typing Traditional
Chinese and Korean with phonetic keyboards. Each phonetic keyboard of these
languages can produce phonetic radicals: e.g., typing 'r'
produces 'ㄱ' on a Korean keyboard; typing
'o' produces '人' on a Traditional-Chinese
(or Bopomofo) keyboard, etc. A radical composer composes a phonetic
character from phonetic radicals given by these keyboards: e.g., typing
'ㄱ' (r) and 'ㅏ' (k) produces '가' on a Korean keyboard;
typing '人' (o), '弓' (n), and
'火' (f) produces '你' on a
Traditional-Chinese keyboard, etc.</p>
<p>A radical composer for Korean outputs the phonetic radicals as
its composition text.</p>
<figure id="fig-radical-composer-korean">
<p><img height="180" src="images/image15.png" width="352"></p>
<figcaption>Radical composer (Korean)</figcaption>
</figure>
<p>A radical composer for Traditional Chinese outputs a
placeholder character (U+3000) and shows the phonetic radicals being
composed to its own window. This window is an example of a composition
window.</p>
<figure id="fig-radical-composer-chinese">
<p><img height="180" src="images/image02.png" width="352"></p>
<figcaption>Radical composer (Traditional Chinese)</figcaption>
</figure>
<p>Some platforms (such as Mac and Linux) use radical composers
for typing accented characters used in European countries. For example,
typing ' ¨ ' (option+u) and 'a' (a) produces
'ä' on US keyboards of Mac.</p>
<figure id="fig-radical-composer-mac">
<p><img height="177" src="images/image01.png" width="479"></p>
<figcaption>Radical composer (Mac)</figcaption>
</figure>
</div>
</div>
<div id="converter-section" class="section">
<h3><span class="secno">2.2 </span>Converter</h3>
<p>A converter is a context-sensitive parser used for replacing
the outputs of a composer to ideographic characters on Chinese, Japanese,
and Korean.</p>
<p class="note">Korean does not use ideographic characters so often.</p>
<p>Because Chinese, Japanese, and Korean have many homonyms, each sequence of phonetic
characters usually matches many ideographic characters: e.g., a Japanese
phonetic character 'か' matches Japanese ideographic characters
'化', '科', '課',
etc.; Pinyin characters 'ka' matches Simplified-Chinese
ideographic characters '卡', '喀',
'咯', etc.; Bopomofo characters
'人弓' matches Traditional-Chinese ideographic
characters '乞', '亿',
'亇', etc.</p>
<p>A converter looks up a dictionary and shows a
list of candidates of possible ideographic characters so a user can choose
one. This list is known as a <dfn id="candidate-list">candidate list</dfn>.
A candidate list is known as a <dfn id="candidate-window">candidate window</dfn>
when it has its own window.</p>
<p>Some Japanese IMEs show annotations in its <a href="#candidate-window">candidate window</a>
for a character that is not so easy to distinguish from other characters
(such as full-width alphabets, full-width Katakanas, and half-width
Katakanas, etc.), as shown in the following figure.</p>
<figure id="fig-candidate-window-japanese">
<p><img height="342" src="images/image05.png" width="393"></p>
<figcaption>Candidate window (Japanese)</figcaption>
</figure>
<p>The next figure shows a <a href="#candidate-window">candidate window</a> of a Simplified-Chinese IME.</p>
<figure id="fig-candidate-window-simplified-chinese">
<p><img height="308" src="images/image04.png" width="390"></p>
<figcaption>Candidate window (Simplified Chinese)</figcaption>
</figure>
<p>And the next figure shows a <a href="#candidate-window">candidate window</a> of a Traditional-Chinese IME.</p>
<figure id="fig-candidate-window-traditional-chinese">
<p><img height="180" src="images/image06.png" width="352"></p>
<figcaption>Candidate window (Traditional Chinese)</figcaption>
</figure>
<p>A converter often integrates an <dfn id="MRU">MRU</dfn> (Most-Recently Used) list.
Even though there are many ideographic characters for each phonetic
character (or phonetic radical), a user does not usually use all these
ideographic characters. A converter uses an <a href="MRU">MRU list</a> to filter out
ideographic characters not used so often from a
<a href="#candidate-list">candidate list</a>.
A converter
sometimes integrates a grammar parser. A converter that integrates a
grammar parser splits the given phonetic characters into grammatical
clauses and converts only one clause at once. When a sequence of phonetic
characters consists of n clauses and the i-th clause has m<subi</sub> candidates,
the total number of the candidates for the input characters become (m<sub>1</sub> ×
m<sub>2</sub> × … × m<sub>n</sub>). To reduce the number of candidates owned by a
converter, a converter usually processes one clause at once. This clause is
called as a <dfn id="selected-clause">selected clause</dfn>.</p>
<p>An IME usually renders a <a href="#selected-clause">selected clause</a> with
a special style to distinguish it from other clauses, as shown in
the following figure.</p>
<figure id="fig-selected-clause">
<p><img height="346" src="images/image08.png" width="394"></p>
<figcaption>Selected clause (Japanese)</figcaption>
</figure>
<p>When a converter converts two or more clauses, it chooses
candidates for the selected clause so it becomes grammatically consistent
with the surrounding clauses: e.g., Japanese converters usually output
'危機一髪' (not
'危機一発') for Japanese phonetic
characters 'ききいっぱつ'
because '危機一発' is grammatically
incorrect.</p>
</div>
</div>
<div id="conformance" class="section"><!--OddPage--><h2><span class="secno">3. </span>Conformance</h2><p>As well as sections marked as non-normative, all authoring guidelines, diagrams, examples, and notes in this specification are non-normative. Everything else in this specification is normative.</p>
<p>The key words <em class="rfc2119" title="must">must</em>, <em class="rfc2119" title="must not">must not</em>, <em class="rfc2119" title="required">required</em>, <em class="rfc2119" title="should">should</em>, <em class="rfc2119" title="should not">should not</em>, <em class="rfc2119" title="recommended">recommended</em>, <em class="rfc2119" title="may">may</em>, and <em class="rfc2119" title="optional">optional</em> in this specification are to be interpreted as described in [<cite><a class="bibref" rel="biblioentry" href="#bib-RFC2119">RFC2119</a></cite>].</p>
<p><i>More to be written.</i></p>
</div>
<div id="terminology" class="section">
<!--OddPage--><h2><span class="secno">4. </span>Terminology and algorithms</h2>
<p><i>To be written.</i></p>
</div>
<div id="the-getinputcontext---method" class="section">
<!--OddPage--><h2><span class="secno">5. </span>The getInputContext() method</h2>
<p>For each element, a user agent can choose an IME for the element.
To control the IME attached to an element, it is a good idea to add a
method to the HTMLElement interface.</p>
<p class="issue">If the
<code>getInputContext()</code>
method cannot be added to the HTMLElement
interface, it should be moved to the <a href="#idl-def-InputMethodContext" class="idlType"><code>InputMethodContext</code></a> interface.</p>
<pre class="idl"><span class="idlInterface" id="idl-def-HTMLElement">partial interface <span class="idlInterfaceID">HTMLElement</span>
<span class="idlMethod"> <span class="idlMethType"><a>InputMethodContext</a></span> <span class="idlMethName"><a href="#widl-HTMLElement-getInputContext-Object">getInputContext</a></span> ();</span>
};</span>
</pre><div id="methods" class="section"><h3><span class="secno">5.1 </span>Methods</h3><dl class="methods"><dt id="widl-HTMLElement-getInputContext-Object"><code>getInputContext</code></dt><dd>Returns an InputMethodContext interface associated with this element. By
default, a user agent returns an InputMethodContext interface representing
the system IME. To change the behavior of the IME associated with an
element, authors must first obtain an InputMethodContext interface by
calling the getInputContext() method of the HTMLElement interface.
<div><em>No parameters.</em></div><div><em>No exceptions.</em></div><div><em>Return type: </em><code><a>InputMethodContext</a></code></div></dd></dl></div>
</div>
<div id="composition-dictionary" class="section">
<!--OddPage--><h2><span class="secno">6. </span>The Composition Dictionary</h2>
<p>This dictionary represents an ongoing IME composition. It provides
an attribute representing the text being composed by an IME. It also
provides a method to retrieve attributes of the specified character in the
composition text.</p>
<pre class="idl"><span class="idlInterface" id="idl-def-Composition">dictionary <span class="idlInterfaceID">Composition</span> {
<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>Node</a></span> <span class="idlAttrName"><a href="#widl-Composition-text">text</a></span>;</span>