-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
1028 lines (491 loc) · 38.6 KB
/
index.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">
<head>
<meta charset="utf-8">
<title>Mongolian Layout Requirements</title>
<script src="https://www.w3.org/Tools/respec/respec-w3c" class="remove" defer></script>
<script class="remove">
var respecConfig = {
// specification status (e.g. WD, LCWD, WG-NOTE, etc.). If in doubt use ED.
specStatus: "ED",
//publishDate: "2020-06-16",
//previousPublishDate: "2014-12-16",
//previousMaturity: "FPWD",
noRecTrack: true,
shortName: "mlreq",
copyrightStart: "2018",
edDraftURI: "https://w3c.github.io/mlreq/",
// if this is a LCWD, uncomment and set the end of its review period
// lcEnd: "2009-08-05",
// editors, add as many as you like
// only "name" is required
authors: [
{ name: "Nasun-urt" },
{ name: "Hu Chitu" }
],
editors: [
{ name: "Richard Ishida", mailto: "ishida@w3.org", company: "W3C", w3cid: 3439 }
],
group: "i18n",
github: "w3c/mlreq",
};
</script>
<link rel="stylesheet" href="local.css">
</head>
<body>
<div id="abstract">
<p>This document describes or points to requirements for the layout and presentation of text in languages that use the Traditional Mongolian script. The target audience is developers of Web standards and technologies, such as HTML, CSS, Mobile Web, Digital Publications, and Unicode, as well as implementers of web browsers, ebook readers, and other applications that need to render Mongolian text.</p>
</div>
<div id="sotd">
<p>This document describes the basic requirements for Mongolian script layout and text support on the Web and in eBooks. These requirements provide information for Web technologies such as CSS, HTML and digital publications about how to support users of Mongolian script languages. Currently the document focuses on the Traditional Mongolian script as used for Mongolian. The information here is developed in conjunction with a <a href="https://www.w3.org/TR/mong-gap/">document that summarises gaps</a> in support on the Web for Mongolian.</p>
<p>The editor's draft of this document is being developed by the <a href="https://w3c.github.io/mlreq/">Mongolian Layout Task Force</a>, part of the W3C <a href="https://www.w3.org/International/ig/">Internationalization Interest Group</a>. It is published by the <a href="https://www.w3.org/International/core/">Internationalization Working Group</a>. The end target for this document is a Working Group Note.</p>
<p>To make it easier to track comments, please raise separate issues or emails for each comment, and point to the section you are commenting on using a URL.</p>
</div>
<div id="linkWarning">
<p>Some links on this page point to repositories or pages to which information will be added over time. Initially, the link may produce no results, but as issues, tests, etc. are created they will show up.</p>
<p>Links that have a gray color led to no content the last time this document was updated. They are still live, however, since relevant content could be added at any time. When the document is updated, links that now point to results will have their live colour restored.</p>
</div>
<section id="h_introduction">
<h2>Introduction</h2>
<section id="h_acknowledgements">
<h3>Contributors</h3>
<p>The original text of this document was prepared by Nasun-urt and Hu Chitu. Richard Ishida reorganised the material and added the script overview.</p>
<p data-lang="en">See also the <a href="https://github.com/w3c/mlreq/graphs/contributors">GitHub contributors list</a> for the Mongolian Language Enablement project, and the <a href="https://github.com/w3c/mlreq/issues?q=is%3Aopen+is%3Aissue">discussions related to Traditional Mongolian script</a>.</p>
</section>
<section id="h_about_this_document">
<h3>About this document</h3>
<p>The aim of this document is to describe the basic requirements for Traditional Mongolian script layout and text support on the Web and in eBooks. These requirements provide information for Web technologies such as CSS, HTML and digital publications, and for application developers, about how to support users of the Mongolian script. The document currently focuses on texts using the Mongolian language.</p>
<p>The main purpose of this document is to provide standardization and guiding rules for the display and application of traditional Mongolian script in the web. However, the more complex layout requirements such as paper layout are not included in this document. Thus, this document includes the most basic rules of display of page and characters of the traditional Mongolian script, aiming at formulating the corresponding standards of web display and application of Mongolian script for the web application vendors to follow this standard of display and application of Mongolian script in the web.</p>
<section id="terminology">
<h4>Terminology</h4>
<p>The following terms and definitions apply to this standard.</p>
<dl>
<dt>Composition</dt>
<dd>The composition in the W3C Standard Format includes Mongolian characters, punctuation marks, and other marks related to the script.</dd>
<dt>Mongolian Space</dt>
<dd>Two spaces are used in Mongolian, <span class="codepoint" translate="no"><span class="uname">U+0020 SPACE</span></span> and the Mongolian space <span class="codepoint" translate="no"><span class="uname">U+202F NARROW NO-BREAK SPACE</span></span>.</dd>
<dt>Mongolian Symbols</dt>
<dd>This refers to various symbols used in Mongolian text. In formulating the Mongolian coding standard, some of the codes is used in the coding area of the Mongolian standard, while the rest are symbols used in the scripts of other ethnic groups, due to the fact that some symbols are borrowed from other ethnic groups. </dd>
<dt>Baseline</dt>
<dd>Baseline in Mongolian is called “Nirogo”. Mongolian writing is generally aligned to the baseline. </dd>
<dt>Writing Direction</dt>
<dd>It refers to the default direction of writing. For example, English writing direction is horizontal from top to bottom, while the Mongolian writing is vertical from left to right. </dd>
<dt>Text Width</dt>
<dd>Text width indicates the distance from the word at the left start to the word at the right end in a line in Mongolian, in the equivalent of the height of the horizontal English or Chinese text writing. </dd>
<dt>Text Height</dt>
<dd>Text height refers to the height of a Mongolian word, in equivalent of the width of the horizontal English or Chinese text writing. </dd>
<dt>Text Spacing</dt>
<dd>Text spacing refers to the gap between the Mongolian words.</dd>
<dt>Leftline and Rightline</dt>
<dd>As the Mongolian writing is vertical, the right line, the left line and the line through is equivalent to the underline and overline in the horizontal English or Chinese text writing. </dd>
</dl>
</section>
</section>
<section id="h_gap_analysis">
<h3>Gap analysis</h3>
<p>This document is pointed to by a separate document, <a href="https://www.w3.org/TR/mong-gap/"><cite>Mongolian Gap Analysis</cite></a>, which describes gaps in support for Mongolian on the Web, and prioritises and describes the impact of those gaps on the user.</p>
<p>Wherever an unsupported feature is indentified through the gap analysis process, the requirements for that feature need to be documented. The gap reports will typically point back to this document for more information.</p>
<p>As gaps in support for Thai are captured, the gaps can be brought to the attention of the relevant spec developer or the browser implementator community. The progress of such work is tracked in the <a href="https://github.com/orgs/w3c/projects/95/views/1?filterQuery=label%3As%3Among">Gap Analysis Pipeline</a>.</p>
<p>This document should contain no reference to a particular technology. For example, it should not say "CSS does/doesn't do such and such", and it should not describe how a technology, such as CSS, should implement the requirements. It is technology agnostic, so that it will be evergreen, and it simply describes how the script works. The gap analysis document is the appropriate place for all kinds of technology-specific information.</p>
</section>
<section id="h_info_requests">
<h3>Other related resources</h3>
<p>To complement any content authored specifically for this document, the sections in the document also point to related, external information, tests, GitHub discussions, etc.</p>
<p>The document <a href="https://www.w3.org/TR/typography/"><cite>Language enablement index</cite></a> points to this document and others, and provides a central location for developers and implementers to find information related to various scripts.</p>
<p>The <abbr title="World Wide Web Consortium">W3C</abbr> also has a repository with discussion threads related to the Mongolian script, including requests from developers to the user community for information about how scripts/languages work, and a notification system that tracks issues in <abbr title="World Wide Web Consortium">W3C</abbr> working groups related to the Mongolian script. See a list of <a target="_blank" href="https://github.com/w3c/mlreq/issues?q=is%3Aissue+is%3Aopen+label%3Aquestion+">unresolved questions</a> for Mongolian experts. Each section below points to related discussions. See also the <a href="https://w3c.github.io/mlreq/home">repository home page</a>.</p>
</section>
</section>
<section id="h_script_overview">
<h2>Mongolian Script Overview</h2>
<p>The Mongolian script is an <a class="termref" href="https://w3.org/TR/i18n-glossary/#alphabet">alphabet</a>, ie. a writing system in which both consonants and vowels are indicated.</p>
<p>Modern Mongolian can be written using a subset of the letters available in the Mongolian Unicode block. The remainder are used for writing Todo, Sibe, and Manchu, or for writing foriegn words, especially in Tibetan and Sanskrit.</p>
<p>Mongolian text runs top to bottom in vertical lines and (unusually) the lines flow <em>left to right</em>.</p>
<p>The script is <a class="termref" href="https://w3.org/TR/i18n-glossary/#cursive">cursive</a>, ie. letters in a word are joined. All letters join both on the left and right.</p>
<p>Words are separated by spaces, but also <em>contain</em> narrow spaces that precede suffixes and may produce shaping differences to the surrounding letters. These are part of the word, and the parts on either side should not be separated.</p>
<p class="addToConsonants">Modern Mongolian uses 16 basic consonant letters and 11 more for representing foreign sounds.</p>
In the Traditional Mongolian alphabet vowels are written using 8 vowel letters, including one for foreign sounds.
<p class="addToVowels">Mongolian has separate code points for each sound in Mongolian, but many of these look indistinguishable from each other when rendered. This creates difficulties for novices to reproduce Mongolian text without access to the source..</p>
<p><a class="termref" href="https://r12a.github.io/scripts/mong/mn#diglossia">Vowel reduction</a> is a significant feature of Mongolian. Non-initial short vowels are reduced to vestiges or to zero, and non-initial long vowels in the orthography are reduced to short vowel length.</p>
<p><a class="termref" href="https://r12a.github.io/scripts/mong/mn#harmony">Vowel harmony</a> is another key feature, grouping vowels in a way that indicates a front or back position for the tongue root (ATR).</p>
<p>The script is monocameral.</p>
<p>There is a set of Mongolian digits.</p>
</section>
<section>
<h2 id="h_text_direction">Text direction</h2>
<section id="h_writing_mode">
<h3>Writing mode</h3>
<p>The Mongolian writing direction is shown in <a href="#fig_writing_direction"></a>.</p>
<figure id="fig_writing_direction">
<p><img src="images/writing_direction.png" alt=" "></p>
<figcaption>Mongolian writing direction.</figcaption>
</figure>
</section>
</section>
<section class="h_graphemes">
<h2>Typographic units</h2>
<section class="h_segmentation">
<h3>Grapheme/word segmentation & selection</h3>
<section id="mongolian_space">
<h4>Display rules for Mongolian space</h4>
<p>Mongolian word suffixes are separated from the preceding word using <span class="codepoint" translate="no"><span class="uname">U+202F NARROW NO-BREAK SPACE</span></span>, rather than <span class="codepoint" translate="no"><span class="uname">U+0020 SPACE</span></span>. For example, the code points that make up the suffix “<span lang="mn"> ᠤᠨ</span>” are: 0x202F 0x1824 0x1828.</p>
<figure id="fig_punctuation_text_alignment2">
<p><img src="images/mongolian_space.png"></p>
<figcaption>The difference between the common space and Mongolian space.</figcaption>
</figure>
<p><span class="codepoint" translate="no"><span class="uname">U+202F NARROW NO-BREAK SPACE</span></span> and a following suffix cannot appear at the beginning of a line. For example, <a href="#fig_correct_mongolian_space"></a> shows the correct approach and <a href="#fig_incorrect_mongolian_space"></a> shows an incorrect approach.</p>
<div style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-end;">
<figure id="fig_correct_mongolian_space">
<p><img src="images/correct_mongolian_space.png"></p>
<figcaption>Correct processing.</figcaption>
</figure>
<figure id="fig_incorrect_mongolian_space">
<p><img src="images/incorrect_mongolian_space.png"></p>
<figcaption>Incorrect processing.</figcaption>
</figure>
</div>
</section>
<section id="selection_rules">
<h4>Selection rules</h4>
<p>Inline selected text must overlap the Mongolian baseline, as shown in <a href="#fig_selection_single_line"></a>. Multi-line selection must follow the writing direction of the Mongolian script, i.e., text direction from top to bottom and from left to right, as shown in <a href="#fig_selection_multiline"></a>.</p>
<figure id="fig_selection_single_line">
<p><img src="images/selection_single_line.png" alt=" "></p>
<figcaption>The effect of choosing a single-line text.</figcaption>
</figure>
<figure id="fig_selection_multiline">
<p><img src="images/selection_multiline.png" alt=" "></p>
<figcaption>The effect of choosing multi-line text.</figcaption>
</figure>
</section>
<section id="cursor_movement">
<h4>Cursor movement rules</h4>
<p>Striking cursor movement keys on the keyboard, including “←”, “→”, “↑”, “↓”, “Page Up”, “Page Down”, “Home” and “End”, should produce movement that follows the writing direction of the Mongolian script from top to bottom and from left to right. For example, the cursor moves to the left after striking the “←” key; the cursor moves to the right when striking the “→” key. The cursor moves down after striking the “↓” key. When the cursor reaches the bottom of the current line, and the key “↓” is pressed again, the cursor will move right and to the top of the next line, as shown in <a href="#fig_cursor_movement"></a>. In the case of the “↑” key, the opposite occurs.</p>
<figure id="fig_cursor_movement">
<p><img src="images/cursor_movement.png" alt=" "></p>
<figcaption>Illustration of cursor movement.</figcaption>
</figure>
</section>
<section id="mouse_pointer">
<h4>Mouse pointer rules</h4>
<p>The mouse pointer in text editing is shown in <a href="#fig_mouse_pointer"></a>. </p>
<figure id="fig_mouse_pointer">
<p><img src="images/mouse_pointer.png" alt=" "></p>
<figcaption>Illustration of the text cursor in Mongolian text.</figcaption>
</figure>
<p>The scrollbar will scroll left and right when mouse wheel is scrolling, that is, the scrollbar will move left or the text will move right when mouse wheel is scrolling forward; the scrollbar will move right or the text will move left when mouse wheel is scrolling backward.</p>
<p>The cursor shape during text editing (shown in <a href="#fig_mouse_pointer"></a>) must be aligned at the base on the midpoint of the Mongolian script baseline, that is, the midpoint of the Mongolian script baseline overlaps the midpoint of the cursor, with the length no longer than the middle line between the two lines of the text, as shown in <a href="#fig_cursor_shape"></a>.</p>
<figure id="fig_cursor_shape">
<p><img src="images/cursor_shape.png" alt=" "></p>
<figcaption>Illustration of cursor movement.</figcaption>
</figure>
</section>
</section>
</section>
<section id="h_characters_and_phrases">
<h2>Punctuation & inline features</h2>
<section id="h_phrase">
<h3>Phrase & section boundaries</h3>
<section id="punctuation_rules">
<h4>Punctuation rules</h4>
<p>Mongolian has some specific requirements related to punctuation:</p>
<ol>
<li>Commas, periods, exclamation marks, question marks, or colons cannot be used at the beginning of a line.</li>
<li>Opening brackets cannot be used at the end of a line.</li>
<li>Closing brackets cannot be used at the beginning of a line.</li>
<li>The colon and "《" of the opening bracket cannot be used separately, which means they must be used together and they are not allowed to be used at the beginning of a line.</li>
<li>Dash consists of two long separators, which cannot be separated, i.e. one cannot be used at the beginning of a line and the other is at the end. However, it is allowed to appear at the beginning of the line when a paragraph begins.</li>
<li><p>Mongolian names of Mongolian punctuation and writing direction are as shown in <a href="#fig_punctuation_sample"></a>, namely the writing direction is the same as that in the graph. <span class="ednote">Need to clarify the meaning of this bullet.</span></p>
<figure id="fig_punctuation_sample">
<p><img src="images/punctuation_sample.png"></p>
<figcaption>Mongolian punctuation sample.</figcaption>
</figure>
</li>
<li>
<p>Mongolian punctuation should be centered vertically, as shown in <a href="#fig_punctuation_text_alignment"></a>.</p>
<figure id="fig_punctuation_text_alignment">
<p><img src="images/punctuation_text_alignment.png"></p>
<figcaption>Alignment relationship between punctuation and Mongolian script text.</figcaption>
</figure>
</li>
</ol>
</section>
</section>
<section id="h_text_decoration">
<h3>Text decoration & other inline features</h3>
<section id="h_text_decor">
<h4>Text decoration</h4>
<p>The “right line” in Mongolian writing is to the right of the text, and is used similarly to the underline of horizontal English and Chinese text. The “left line” is to the left of the text, and is used similarly to the overline of horizontal English and Chinese text. The strikethrough is a baseline-centered vertical line as shown in <a href="#fig_text_decoration"></a>.</p>
<figure id="fig_text_decoration">
<p><img src="images/text_decoration.png" alt=" "></p>
<figcaption>Illustration of the right line, the left line and the strikethrough.</figcaption>
</figure>
<p>Underline, overline and strikethrough in mixed composition with other languages are shown in <a href="#fig_text_decoration_mixed"></a>:</p>
<figure id="fig_text_decoration_mixed">
<p><img src="images/text_decoration_mixed.png" alt=" "></p>
<figcaption>Underline, overline and strikethrough as mixed with other languages.</figcaption>
</figure>
<p>Lines alongside the text may break on the spaces between words. When doing so, the gaps introduced before suffixes by <span class="codepoint" translate="no"><span class="uname">U+202F NARROW NO-BREAK SPACE</span></span> and <span class="codepoint" translate="no"><span class="uname">U+180E MONGOLIAN VOWEL SEPARATOR</span></span> should not be skipped. Even though there is a gap, suffixes are considered part of the word. See an example in the second word of <a href="#fig_text_decoration_gaps"></a>:</p>
<figure id="fig_text_decoration_gaps">
<p><img src="images/text_decoration_gaps.png" alt=" "></p>
<figcaption>When inter-word spaces are skipped, gaps produced by NNBSP or MVS are not.</figcaption>
</figure>
</section>
<section id="width_height_spacing">
<h4>Mongolian text width, height and spacing</h4>
<p>Due to the different height of Mongolian text, in order to ensure that every character is in fully displayed and the whole word looks beautiful, the height of each letter must keep in balance. The spaces between words must be different from the common gaps before suffixes, whose code point is <span class="codepoint" translate="no"><span class="uname">U+202F NARROW NO-BREAK SPACE</span></span>. See <a href="#fig_width_height_spacing"></a>:</p>
<figure id="fig_width_height_spacing">
<p><img src="images/width_height_spacing.png" alt=" "></p>
<figcaption>The height, width and spacing of Mongolian words.</figcaption>
</figure>
</section>
</section>
</section>
<section id="h_lines_and_paragraphs">
<h2>Line & paragraph layout</h2>
<section id="h_line_breaking">
<h3>Line breaking & hyphenation</h3>
<p>Line-breaking should not split words. <a href="#fig_newline_correct"></a> shows correct line-breaking, without breaking the Mongolian words. <a href="#fig_newline_incorrect"></a> shows incorrect line-breaking for “<img src="images/text001.png" alt="">” and “<img src="images/text002.png" alt="">”.</p>
<div style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;">
<figure id="fig_newline_correct">
<p><img src="images/newline_correct.png"></p>
<figcaption>Correct newline.</figcaption>
</figure>
<figure id="fig_newline_incorrect">
<p><img src="images/newline_incorrect.png"></p>
<figcaption>Incorrect newline.</figcaption>
</figure>
</div>
</section>
<section id="h_alignment">
<h3>Text alignment & justification</h3>
<p>Text alignment includes "left alignment", "horizontal centering", and “right alignment ”, as well as “top alignment”, “vertical centering”, “bottom alignment”and “top-bottom alignment”. </p>
<p>"Left alignment ", "horizontal centering" and “right alignment” are the alignment rules that apply inside a line. “Top alignment”, “horizontal centering”, “bottom alignment” and “top-bottom alignment” are the alignment rules in a page or a paragraph of a multi-line text. </p>
<p>Among "left alignment", "horizontal centering" and “right alignment”, “horizontal centering” is a default option which means that the Mongolian text will align based on its baseline axis. “Left alignment” means that the text will move left a certain distance, which shows obvious differences compared with the text after setting “horizontal center”. “Right alignment” means that the text will move right a certain distance after, which shows obvious differences compared with the text after setting “horizontal center”.</p>
<p>Among “Top alignment”, “vertical center”, “bottom alignment” and “top-bottom alignment”, “top-bottom alignment” is a default option which means that the words in the upper and the lower boundary of a multi-line text in a paragraph or a page are all aligned. Its alignment method is that spaces in the text are stretched in the same proportion. “Top alignment” means that the words in the upper boundary of a multi-line text in a paragraph or a page are all aligned without considering the alignment of the lower boundary and stretching the space between words. “Vertical center” means the words in the upper and the lower boundary of a multi-line text in a paragraph or a page do not need to align and leave the same blank under the condition of no-stretching space between words.</p>
</section>
<section id="h_baselines">
<h3>Baselines, line height, etc.</h3>
<section id="h_baseline_position">
<h4>Baseline position</h4>
<p>Mongolian is aligned to a baseline that runs down the center of the writing, and all text is aligned to this baseline as shown in <a href="#fig_baselines"></a>:</p>
<figure id="fig_baselines">
<p><img src="images/baselines.png" alt=" "></p>
<figcaption>The aligning baseline for Mongolian.</figcaption>
</figure>
</section>
<section id="mixed_arrangement">
<h4>Mixed Arrangement Rules with Other Languages</h4>
<p>When mixed with other languages, the text in those languages should also be centre-aligned along the Mongolian baseline. </p>
</section>
<section id="mixed_arrangement_alphanum">
<h4>Mixed Arrangement Rules with Numbers and Latin </h4>
<p>There is no obvious midcourt line in numbers and Latin. Therefore generally, half of the text height is regarded as a midcourt line position. When Mongolian script is mixed with numbers and Latin, the line of half of the text height should be aligned with Mongolian midcourt line. When font size of numbers is the same as Mongolian’s, it will be slightly larger, so some handling methods should be taken to avoid the problem, such as the methods listed in <a href="#fig_mixed_alphanum"></a>.</p>
<figure id="fig_mixed_alphanum">
<p><img src="images/mixed_alphanum.png" alt=" "></p>
<figcaption>The mixed arrangement of Mongolian, Latin and numbers.</figcaption>
</figure>
</section>
<section id="mixed_arrangement_cjk">
<h4>Mixed Arrangement Rules with Chinese and Japanese</h4>
<p>For mixed arrangements with Chinese or Japanese, note the following:</p>
<ol>
<li>Chinese and Japanese cannot be displayed in on their side. They must be displayed upright, as in horizontal Chinese or Japanese.</li>
<li>The center line of Chinese or Japanese text (the width in this case) needs to be aligned with the centre baseline of the Mongolian text.</li>
<li>Pay attention to the top alignment and bottom alignment of the Mongolian text. In the same line, the mixed display of Mongolian and Chinese needs attention to produce a balanced alignment. When displayed, it should stretch space, but empty distance or space should not be added in Chinese text. <span class="ednote">Does this mean that no inter-character spacing should be applied to the Chinese?</span></li>
<li> Mongolian is smaller than Chinese or Japanese in the same font size, so some handling methods should be taken to avoid the problem, such as methods listed in <a href="#fig_mixed_cjk"></a>.</li>
</ol>
<figure id="fig_mixed_cjk">
<p><img src="images/mixed_cjk.png" alt=" "></p>
<figcaption>The mixed arrangement of Mongolian and Chinese.</figcaption>
</figure>
</section>
</section>
<section id="h_lists">
<h3>Lists, counters, etc.</h3>
<p>The display of these controls needs to pay attention to the direction of the output. That is to say, the primary display of the number 1, 2, 3, etc. is from left to right. The effect of the following code is as shown in <a href="#fig_lists"></a>. Note how the text is centered on the vertical midline. <span class="ednote">The separator dots for the numbering are not centre-aligned. We should probably mention that. Also, shouldn't the numbers be rotated counter-clockwise?</span></p>
<figure id="fig_lists">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;">
<p><img src="images/lists_code.png" alt=""></p>
<p><img src="images/lists_display.png" alt=""></p>
</div>
<figcaption>Lists.</figcaption>
</figure>
</section>
</section>
<section id="h_page">
<h2>Page & book layout</h2>
<section id="h_generallayout">
<h3>General page layout & progression</h3>
<section id="h_binding">
<h4>Bookbinding and the Direction of Page Turning</h4>
<p>In general, bookbinding is on the left side, as shown in <a href="#fig_bookbinding"></a>:</p>
<figure id="fig_bookbinding">
<p><img src="images/bookbinding.png" alt=" "></p>
<figcaption>Bookbinding.</figcaption>
</figure>
<p>The direction of page turning is to the left, as shown in <a href="#fig_page_turning"></a>:</p>
<figure id="fig_page_turning">
<p><img src="images/page_turning.png" alt=" "></p>
<figcaption>The direction of page turning.</figcaption>
</figure>
</section>
<section id="h_paper_direction">
<h4>Paper direction</h4>
<p>Generally, landscape is the default Mongolian format, as shown in <a href="#fig_paper_direction"></a>.</p>
<figure id="fig_paper_direction">
<p><img src="images/paper_direction.png" alt=" "></p>
<figcaption> Example of landscape paper direction.</figcaption>
</figure>
</section>
<section id="h_paper_rolling_direction">
<h4>Paper scrolling direction</h4>
<p>By default, pages should scroll from left to right, as shown in <a href="#fig_paper_rolling_direction"></a>.</p>
<figure id="fig_paper_rolling_direction">
<p><img src="images/paper_rolling_direction.png" alt=" "></p>
<figcaption>The direction of page scrolling.</figcaption>
</figure>
</section>
<section id="h_scrollbag_direction">
<h4>The scrolling direction of scroll bars</h4>
<p>When the amount of text exceeds the prescribed space available, a scroll bar needs to be displayed. The default display position of the scroll bar is along the bottom of the corresponding space. (The simultaneous display of both horizontal and vertical scroll bars has not been installed).</p>
<figure id="fig_scrollbag_direction">
<p><img src="images/scrollbag_direction.png" alt=" "></p>
<figcaption>Position and scrolling direction of scroll bar.</figcaption>
</figure>
</section>
<section id="h_columns">
<h4>Columns</h4>
<p>Columns in Mongolian text should be divided vertically.</p>
<figure id="fig_columns">
<p><img src="images/columns.png" alt=" "></p>
<figcaption>The effect of 2 columns.</figcaption>
</figure>
</section>
<section id="mixed_media">
<h4>Mixed arrangement of text and illustrations (or other non-text objects)</h4>
<p>The illustrations here include ordinary picture formats, textboxes, charts, media objects and so on, all of which are called illustrations in what follows. There are many ways (as shown in <a href="#fig_mixed_media"></a>) of mixing the arrangements of text and illustrations but, no matter which way is used, some principles need to be obeyed.</p>
<ol>
<li>The illustration cannot be rotated, that is, the original illustration is inserted just as it is. The illustration cannot be rotated into the vertical one just because of vertical text.</li>
<li>The Mongolian script around the inserted illustrations cannot be broken inside the word. The rules of the beginning and end of lines are the same as the original ones.</li>
</ol>
<figure id="fig_mixed_media">
<p><img src="images/mixed_media.png" alt=" "></p>
<figcaption>Mixed arrangement of text and illustrations (or other non-text objects).</figcaption>
</figure>
</section>
</section>
<section id="h_grids_tables">
<h3>Grids & tables</h3>
<p>When setting <code class="kw" translate="no">writing-mode:tb-lr</code> using CSS (grammar will have a little difference according to various browsers), the table will support vertical display feature of Mongolian script. When setting default options for the text in a table, it will display horizontally centered, that is, the upper and the lower center lines of the table cell will align at the center line of the baseline of the Mongolian text, as shown in <a href="#fig_table"></a>.</p>
<figure id="fig_table">
<p><img src="images/table.png" alt=" "></p>
<figcaption>The aligning baseline for Mongolian.</figcaption>
</figure>
</section>
<section id="h_headers_footers">
<h3>Page headers, footers, etc</h3>
<section id="h_page_numbering">
<h4>Page numbering</h4>
<p>In the Mongolian format, page numbers should be displayed on the upper or lower side of the page.</p>
<figure id="fig_page_numbers">
<p><img src="images/page_numbers.png" alt=" "></p>
<figcaption>Adding the horizontal type and number on the page number .</figcaption>
</figure>
</section>
</section>
<section id="h_interaction">
<h3>Forms & user interaction</h3>
<p>All input controls need to be adjusted to match the characteristics of the vertically typeset Mongolian text. For example, controls like text fields and buttons need to support vertical input and display of text, and furthermore the cursors in text and passwords need to conform to the cursor style as shown in <a href="#fig_mouse_pointer"></a>.</p>
<figure id="fig_input_controls">
<p><img src="images/input_controls.png" alt=" "></p>
<figcaption>The display of input controls and the alignment of Mongolian script.</figcaption>
</figure>
<section id="select_control">
<h4>Select</h4>
<p>The select box appearing in the following HTML code should be displayed as shown in <a href="#fig_select_code"></a>. According to the default setting, the scroll bar is at the bottom and starts at the left. To see the contents at the end of the list, it scrolls from left to right. The scrolling of the mouse wheel should be in accordance with illustration in <a href="#fig_select_display"></a>. While selecting a column, the selected text and the selected background color should conform to the principle of aligning to the Mongolian vertically-centered baseline (see the descriptions in <a href="#fig_input_controls"></a>).</p>
<div style="text-align: center;">
<figure id="fig_select_code">
<p><img src="images/select_code.png"></p>
<figcaption>Correct newline.</figcaption>
</figure>
<figure id="fig_select_display">
<p><img src="images/select_display.png"></p>
<figcaption>Mongolian standard select box.</figcaption>
</figure>
</div>
</section>
<section id="textarea_control">
<h4>Textarea</h4>
<p>Textarea is an important control, and is required in the text input, edit, and display. Scrollbar movement accords with requirements of the select control in <a href="#select_control"></a>. The display and moving direction of the cursor should be consistent with the standard for cursor movement in <a href="#cursor_movement"></a>. In some browsers, there are functions for stretching the size of the textarea. The stretching icon should be in the lower right corner, and the textarea scaling accords with the mouse dragging. The rows and cols attribute of textarea are the opposite of those in horizontal text. Its specific attributes are as the following: rows {int} : showing the column number and cols {int} : showing the row number.</p>
<figure id="fig_textarea_display">
<p><img src="images/textarea_display.png"></p>
<figcaption>Display status of the standard textarea.</figcaption>
</figure>
</section>
<section id="label_control">
<h4>Label</h4>
<p>The label control mainly considers text midcourt line aligning principles. ( See the descriptions in <a href="#h_baselines"></a>). The label display for the following code is shown in <a href="#fig_label"></a>.</p>
<figure id="fig_label">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;">
<p><img src="images/label_code.png" alt=""></p>
<p><img src="images/label_display.png" alt=""></p>
</div>
<figcaption>The display of label controls.</figcaption>
</figure>
</section>
<section id="fieldset_control">
<h4>Fieldset</h4>
<p>As shown in <a href="#fig_fieldset"></a>, which is an example fieldset generation with the following code, the components are aligned along the centred-vertical Mongolian baseline.</p>
<figure id="fig_fieldset">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;">
<p><img src="images/fieldset_code.png" alt=""></p>
<p><img src="images/fieldset_display.png" alt=""></p>
</div>
<figcaption>Fieldset effect.</figcaption>
</figure>
</section>
</section>
</section>
<!--section class="appendix" id="glossary">
<h2>Glossary</h2>
<table class="glossary">
<thead>
<tr>
<th>Term</th>
<th>Mongolian</th>
<th>Transliteration</th>
<th>Definition</th>
</tr>
</thead>
<tbody>
<tr id="def_alignment">
<td>alignment</td>
<td class="rtlTermCell"> </td>
<td class="rtlTermCell"> </td>
<td><br></td>
</tr>
</tbody>
</table>
</section-->
<section class="appendix" id="css_suggestions">
<h2>Suggestions about Formulating New CSS Standard</h2>
<ol>
<li>When Mongolian webpage is created, the page direction should be designated: CSS-MONGOLIAN-LAYOUT:Y. Designating the option means that all page elements should be arranged in accordance with the requirement of vertical column script. Meanwhile, there are the main requirements: script should conform to the habit of Mongolian writing -----arrangement from top to bottom and from left to right (see the descriptions in 2.2.3); textboxes, buttons and list order are all displayed in vertical column; pictures, videos and the other third party controls do not need to accord with the requirement of vertical column.</li>
<li>In mixed arrangement with other languages, Mongolian text is X larger than the other texts. Designating the option requires that the size of Mongolian in all control texts should be automatically X larger than the size of the text of other scripts or X smaller under the condition of using minus.</li>
<li>When arranged with other languages, Mongolian should follow the midcourt line aligning principles as the following. when the option CSS-MONGOLIAN-MOVE- WAIST:X px is designated, Mongolian text in all control texts should move X px to left or right so that it can be aligned with the midcourt line of other texts. Because the midcourt line cannot be aligned well under the condition, the option needs to be set.</li>
<li>When arranged with other languages, Mongolian font should be set as CSS-MONGOLIAN-FONT:MongolianFontName. When the option is designated, Mongolian font in all control texts should be changed into MongolianFontName, while other languages’ font should accord with default font in the system. Because the change of Mongolian font will affect Chinese font when it is arranged with Chinese or other languages and sometimes, Chinese will be displayed in the way of lying down.</li>
<li>Whether Mongolian space (0x202F) is stretched: CSS-MONGOLIAN-SPACE:Stretch|Normal, when the Stretch option is designated, the length of Mogolian space should be stretched as that of normal space. While the option Normal is designated, Mongolian space should not be stretched, and should be displayed in the length of the font library.</li>
<li>Whether the Mongolian vowel space mark MVS (0x180E): is displayed: CSS-MONGOLIAN-MVS:Display|Normal, when the option Display is designated, there will be a small hollow rectangular on the screen with the size in the font library, but the rectangular will not be shown when it is printed. When the option Normal is designated, there will be no picture on the screen, but it will occupy a space of the size in the font library.</li>
</ol>