VideosThe Bidirectional (BiDi) Editing Support

Overview

Duration: 08:54
This video demonstration presents the bidirectional editing support offered by Oxygen.

Transcript

00:00:09Oxygen is the first XML editor to introduce support for languages
00:00:12that require Right To Left scripts.
00:00:15This means that authors editing documents in the oXygen Author mode
00:00:19can create and edit XML content in scripts like Arabic, Hebrew and others.
00:00:25This support is available in both standalone and Eclipse plugin distributions.
00:00:30To achieve this, oXygen implements the Unicode Bidirectional Algorithm as specified by the
00:00:35Unicode consortium.
00:00:37The text arrangement is similar to what you get in a modern HTML browser.
00:00:42The final text layout is rendered according with the directional CSS properties matching
00:00:47an XML element and...
00:00:49the Unicode directional formatting codes.
00:00:52These codes can be embedded in the text, specifying a text direction.
00:00:57Actually, this is an unique feature among structured editors.
00:01:01As an example, we'll input Arabic text in an XHTML file...
00:01:08We create this file and then switch to the Author mode.
00:01:12As explained earlier, there are two ways of controlling text direction:
00:01:17In the first example we will control the text direction using the @dir attribute from XHTML,
00:01:24which is associated with the CSS properties mentioned earlier.
00:01:28Let's create an arabic sentence which reads "Syncro Soft is the company name".
00:01:38In a new paragraph, we type some text ...
00:01:42then we paste the Arabic text fragment, which translates to "is the company name".
00:01:47As you see, the company name is at the left of the arabic text,
00:01:52which is not what we need because it is read from the right to the left,
00:01:57like "is the company name Syncro Soft".
00:02:00To solve this... we create an embedding in the Arabic text by surrounding the Syncro
00:02:05Soft text fragment in the Span element...
00:02:08... then set its direction attribute to LTR,
00:02:14which is the short notation of Left-To-Right.
00:02:16In this way the english text is read first, as we intended.
00:02:22In the second example we'll write the same text, but this time we'll use Directional
00:02:27Formatting Codes to achieve the same formatting result.
00:02:30Again... we type the company name,
00:02:33then the Arabic text.
00:02:35We will encapsulate the Syncro Soft text inside a left to right embedding in the Arabic text.
00:02:41Now we'll use the Insert from Characters Map dialog to select the formatting codes.
00:02:47First we insert the Left to Right Embedding formatting code at the beginning of the Syncro
00:02:52SOft text fragment.
00:03:01Now we'll restore the bidirectional state at the end of the LTR text fragment
00:03:07by inserting the Pop Directional Formatting code.
00:03:12And... now the text is rendered correctly.
00:03:17As you can see, using DirectionalFormattingCodes is a very effective, yet dificult,
00:03:22way of controlling the direction in document sections where no markup is allowed or available.
00:03:28However, most XML documentation frameworks are using markup to control text direction,
00:03:34so the first method is the preferred one.
00:03:38In the next part of the demonstration we'll show you how the layout adapts to the direction
00:03:42associated with the markup.
00:03:44The visible effects in a RTL document layout are:
00:03:49- paragraphs are aligned to the right;
00:03:52- the lists are aligned to the right, including their list item marks
00:03:56- the table column numbering begins from the right
00:03:59- the left and right margins and borders are flipped.
00:04:05Now, we will open two documents, one in English and another one in Arabic.
00:04:13The second document is the Arabic translation of the English one.
00:04:16To easily compare them, we tile the two editors vertically, and enable the synchronous scrolling
00:04:22feature.
00:04:24As you can see in the Arabic sample the paragraphs are aligned to the right.
00:04:29Even the link icon has changed position...
00:04:33Note that in the English text the icon is placed in the left side of the link,
00:04:37while in the Arabic version, the icon is placed to the right side of the link.
00:04:42The tables have the first column aligned to the right.
00:04:45Also, the table row selector becomes active in the right side of the table,
00:04:50allowing you to select the row.
00:04:53Scrolling down ... note that the list item markers are displayed to the right side too.
00:05:05In the next section of the demonstration, we'll see how we can move the caret in a bidirectional
00:05:10document.
00:05:12When moving the caret in the reading direction, when you press the right arrow key the caret
00:05:17will move in the natural reading order.
00:05:19In a LTR text the caret will move from left to right, ... while in a RTL text, the caret
00:05:27will move from right to left.
00:05:30This is the default setting.
00:05:33Similarly, if we try to select a piece of text, we can see that the selection is continous
00:05:41in the reading direction.
00:05:42To change this behaviour, we'll go to oXygen's Preferences page and in the Caret navigation
00:05:50section,
00:05:51we disable the "arrow keys move the caret in the reading direction" option.
00:05:57Now... pressing the right arrow key moves the caret to the nearest position to the right,
00:06:04while pressing the left arrow key moves the caret to the nearest position to the left.
00:06:11Note that oXygen assists you by changing the caret's shape when editing bidirectional content.
00:06:17In right to left text, the caret indicates the text direction with a small arrow pointing
00:06:22to the left.
00:06:24Next.... you will see how the XML Markup is displayed.
00:06:29Thus, the inline tags are arranged according to the Unicode Algorithm.
00:06:33Also, in a RTL content, the shapes of the start and end tags are reversed and the start
00:06:42tag is marked with an arrow which indicates the text direction.
00:06:46Now, let's switch to full tags in both our files in order to see the markup.
00:06:53To make a distinction between the start and the end tag, the start one is painted with
00:06:58an arrow pointing left.
00:07:02Moving on to the next section of the demo... we'll present some of the side views capable
00:07:07of assisting you in editing bidirectional content.
00:07:11In this example, we'll use a Hebrew sample file.
00:07:14First, let's open the Outline View.
00:07:17The tree structure displayed in this View presents the text according to its orientation.
00:07:27Now we'll open the Review Panel and enable the Track Changes feature.
00:07:32Then we make some changes to the document.
00:07:36Let us first select and delete this phrase.
00:07:43The review panel presents the change.
00:07:46Also, the callout displays the deleted text with the correct alignment.
00:07:51Now we open the Attributes View, ...
00:07:56select a title element ...
00:07:59and set a value to the ID attribute.
00:08:02So far, we have seen how you can use oXygen XML to edit complex XML documents that contain
00:08:09bidirectional text.
00:08:11Summarizing... - oXygen fully implements the Unicode Bidirectional
00:08:15Algorithm - Right-To-Left content authors will find
00:08:18in oXygen an intuitive user interface - You can edit out of the box content in DITA,
00:08:24DocBook, XHTML, TEI, or any other XML language that makes use of the @dir XML attribute.
00:08:32- The "direction" and "unicode-bidi" CSS properties are supported
00:08:37- You can customize oXygen Author mode to edit RTL content in any XML language once
00:08:44the appropriate CSS styles are associated to the markup.
00:08:50And this concludes our demonstration.
00:08:51Thanks for watching!

Use Oxygen Feedback to ask us anything about this video.

Products

Features

Shop

Resources

Support

Company

© 2002-2024 SyncRO Soft SRL. All rights reserved.

This website was created & generated with <oXygen/>®XML Editor