Telerik blogs

Over the last few weeks our team was busy working on some features that turned out to be very important for our customers in East Asia. We have decided to share some examples as this may be of help to the ever-growing number of developers targeting audience in China, Japan or Korea.

Distributed text alignment in paragraph

While for alphabet-based writing systems (e.g. English) it is sufficient to have the well-known 4 alignments of text in a paragraph – namely left, center, right and justified – logographic writing systems (e.g. Chinese and Japanese) need a fifth type – distributed text alignment.

Distributed alignment  

Distributed alignment (on the right)  is similar to the justified one (on the left), but the spaces used to align the text are added between the characters instead of between the “words” (as we know them in the western culture). It reflects better the fact that East Asian Languages do not use intervals as word separators (because single asian character can represent a whole word), and gives the paragraph a nice rectangular look – the difference is most visible in the last row, where the six characters are evenly distributed along the whole row, instead of aligned left.

To set the distributed alignment to the current Paragraph in a RadDocument, you can use the newly introduced RadTextAlignment.Distribute enumeration value (available only in the Silverlight version of the control), for example:

this.radRichTextBox.ChangeParagraphTextAlignment(RadTextAlignment.Distribute);

 

Asian typography line breaking rules

Another concept which is not very familiar in the West is that certain groups of symbols are prohibited to be used in the beginning and the end of each line of text. For example, in Japanese it is preferable for a line not to start with the (iteration mark) symbol.

RadRichTextBox now supports a default set of line breaking rules for Chinese (both simplified and traditional), Japanese (both standard rules and strict rules), and Korean. These rules can change the layout of the text (depending on the current language of the RadRichTextBox) to avoid improper positioning of the mentioned symbols.

You can set the line breaking language of a RadRichTextBox using the RadRichTextBox.LineBreakingRuleLanguage property, or ChangeDocumentLineBreakingRuleLanguage(…) method:

this.radRichTextBox.LineBreakingRuleLanguage = LineBreakingRuleLanguage.Japanese;
// or
this.radRichTextBox.ChangeDocumentLineBreakingRuleLanguage(LineBreakingRuleLanguage.Japanese);

and this will affect the layout of a paragraph like this:

Line breaking

If the document should use the strict Japanese rules for line-breaking, you should additionally set RadDocument.IsStrictLineBreakingRuleEnabled or invoke the following method:

this.radRichTextBox.ChangeDocumentIsStrictLineBreakingRuleEnabled(true);

By default, every paragraph respects the line breaking rules of its parent document. You can change this through an invocation of the method RadRichTextBox.ChangeParagraphIsLineBreakingRuleEnabled(false), which will exclude the current paragraph from the line-breaking algorithm.

Custom line breaking rules

You can also set your own custom line breaking rules. The trick is, similar to what is valid for the default rules, that the rule must have the same language as the RadRichTextBox/RadDocument in order to be applied, so do not forget to set RadRichTextBox/RadDocument’s LineBreakingRuleLanguage in addition. The methods used to set a custom rule are ChangeDocumentNoLineBreaksBeforeRule and ChangeDocumentNoLineBreaksAfterRule:

LineBreakingRule rule = new LineBreakingRule(LineBreakingRuleLanguage.Japanese, new char[] { '!', ',', '.' });
this.radRichTextBox.ChangeDocumentNoLineBreaksBeforeRule(rule);

which effectively sets RadDocument.NoLineBreaksBefore and RadDocument.NoLineBreaksAfter properties. The above code, for example, will apply custom line breaking rule for Japanese language, trying to avoid positioning of '!', ',' and '.' symbols at the beginning of the line (i.e. line cannot break before the specified symbols).

Hanging punctuation

RadRichTextBox also includes predefined rules for hanging punctuation for Chinese and Japanese through additional line breaking rule (which cannot be customized). It will be applied when a paragraph’s alignment is justified or distributed:

Hanging punctuation

You can see how the ideographic comma is placed in the paragraph’s margin (identified by a red line), despite the fact that there is not enough space for it on the line.

Manipulating a document directly

If you do not have a RadRichTextBox instance at your disposal – for example you are editing RadDocuments in a service – you can benefit from the corresponding methods of RadDocumentEditor, for example:

RadDocumentEditor editor = new RadDocumentEditor(document);
editor.ChangeDocumentLineBreakingRuleLanguage(LineBreakingRuleLanguage.Japanese);
editor.ChangeDocumentNoLineBreaksAfterRule(new LineBreakingRule(...));
editor.ChangeParagraphIsLineBreakingRuleEnabled(false);

Supported formats

The line breaking settings you apply can be preserved to/loaded from the native XAML format of RadDocument, as well as docx. We are currently working on the RTF implementation, so you may expect it in a future release soon.

If you find any flaws in the API or you need some additional internationalization feature, please comment! We will especially appreciate feedback from East Asian language speakers, which can best evaluate such enhancements and spot details invisible to us – people accustomed to the plain old Latin and Cyrillic alphabets.


About the Author

Borislav Ivanov

is a software developer in the Telerik XAML team, working mainly on RadRichTextBox, and occasionally supporting team’s build infrastructure. He is passionate about his work, but also loves his vacations, when he can be found backpacking distant locations in Europe, Africa and Asia with his girlfriend.

Related Posts

Comments

Comments are disabled in preview mode.