RTL Problems With RadRichTextBox

11 posts, 0 answers
  1. Scott
    Scott avatar
    10 posts
    Member since:
    Mar 2013

    Posted 15 Feb 2014 Link to this post

     
     I'm having problems loading an Arabic document into a RadRichTextBox -- the crux of the problem is that if you set the FlowDirection on the RadRichTextBox it puts the scroll bar on the left (where it should be) but it reverses the text. If one sets the FlowDirection to LeftToRight the text is correctly displayed (RTL and right aligned) but the scrollbar is on the right.

     Is this is a known problem or is the some way to load the control to make to correct this?

    Thanks,
    Scott

     Capture1.png shows a demo app that has a WebBrowser, RichTextBox and RadRichTextBox side by side, note that the text is the same in all controls, but the scrollbar is placed incorrectly on the RadRichTextBox (far right in the image).

     Capture2.png shows the same app with the FlowDirection set to RightToLife; obviously the text is reversed.

     Here's the guts of the code that loads the controls

    public MainWindow()
    {
        StyleManager.ApplicationTheme = new Windows8Theme();
     
        RadRichTextBox.DefaultTextRenderingMode =
            Telerik.Windows.Documents.UI.TextBlocks.TextBlockRenderingMode.TextBlockWithPropertyCaching;
     
        InitializeComponent();
     
        Loaded += (sender, args) =>
        {
            var htmlContent = File.ReadAllText(@"..\..\Arabic-Lipsum.html");
            MyWebBrowser.NavigateToString(htmlContent);
     
            var sourceConverter = new HtmlFormatProvider();
     
            var converted = sourceConverter.Import(htmlContent);
            MyRadRichTextBox.Document = converted;
     
            var rtf = new RtfFormatProvider();
            var rtfFromHtml = rtf.Export(converted);
     
            using (var ms = new MemoryStream(Encoding.UTF8.GetBytes(rtfFromHtml)))
            {
                MyRichTextBox.Selection.Load(ms, DataFormats.Rtf);
            }
        };
    }

     And here's the XAML

    <Window x:Class="RightToLeftLoadingProblem.MainWindow"
            Title="MainWindow"
            Width="1250"
            Height="750"
            ResizeMode="CanResizeWithGrip"
            WindowStartupLocation="CenterScreen">
        <Grid>
            <Grid Grid.Row="0" Margin="10">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <WebBrowser Name="MyWebBrowser"
                                Grid.Column="0"
                                Margin="5" />
                    <RichTextBox Name="MyRichTextBox"
                                 FlowDirection="RightToLeft"
                                 Grid.Column="1"
                                 Margin="5"
                                 HorizontalScrollBarVisibility="Auto"
                                 VerticalScrollBarVisibility="Auto" />
                    <telerik:RadRichTextBox Name="MyRadRichTextBox"
                                            FlowDirection="RightToLeft"
                                            Grid.Column="2"
                                            Margin="5" />
                </Grid>
            </Grid>
        </Grid>
    </Window>

     
  2. Vasil
    Admin
    Vasil avatar
    124 posts

    Posted 17 Feb 2014 Link to this post

    Hello Scott,

    Thank you for the question.

    The FlowDirection property of RadRichTextBox must not be set. The control determines the direction of the text through an internal algorithm in order to be able to show both RTL and LTR text.

    As it is presumed that the document can contain both RTL and LTR text, the flow direction is set per paragraph, similarly to how this happens in MS Word. In that regard, there is a method in the API that changes the flow direction of the current paragraphs (all selected paragraphs or - if there is no selection - the paragraph that the caret is positioned in). It can be used like this:

    this.radRichTextBox.ChangeParagraphFlowDirection(FlowDirection.RightToLeft);

    Another option is to modify the default paragraph Normal style used in the document as follows:

    this.radRichTextBox.Document.StyleRepository[RadDocumentDefaultStyles.NormalStyleName].ParagraphProperties.FlowDirection = FlowDirection.RightToLeft;

    I hope this information is helpful.

    Regards,
    Vasil
    Telerik

    Check out the new Telerik Platform - the only modular platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native apps. Register for the free online keynote and webinar to learn more about the Platform on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT).

  3. UI for WPF is Visual Studio 2017 Ready
  4. Scott
    Scott avatar
    10 posts
    Member since:
    Mar 2013

    Posted 17 Feb 2014 in reply to Vasil Link to this post

    Vasil,
     I tried both of these suggestions and neither worked. Included in my example was a source document that when converted has the RTL attributes set -- (see below).

     Do you have any other ideas; perhaps, you could modify this simple example and to work?

     I'm really puzzled by the idea that an algorithm is the best way to define this behavior, and given that almost every standard control in WPF does the "right" thing (that is, when you tell a control like RichTextBox to use FlowDirection=RightToLeft it does so -- rearranging the controls and correctly layout out the text); but, regardless, of that, I need some way to get R2L behavior out of RadRichTextBox.

     
    Thanks,
    Scott

    You'll note below that each of the sections/spans has RightToLeft set.

    <t:RadDocument xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:t="clr-namespace:Telerik.Windows.Documents.Model;assembly=Telerik.Windows.Documents" xmlns:s="clr-namespace:Telerik.Windows.Documents.Model.Styles;assembly=Telerik.Windows.Documents" xmlns:r="clr-namespace:Telerik.Windows.Documents.Model.Revisions;assembly=Telerik.Windows.Documents" xmlns:n="clr-namespace:Telerik.Windows.Documents.Model.Notes;assembly=Telerik.Windows.Documents" xmlns:th="clr-namespace:Telerik.Windows.Documents.Model.Themes;assembly=Telerik.Windows.Documents" version="1.2" LayoutMode="Flow" LineSpacing="1.15" LineSpacingType="Auto" ParagraphDefaultSpacingAfter="0" ParagraphDefaultSpacingBefore="0" SelectedBibliographicStyleName="\APA.XSL" StyleName="defaultDocumentStyle">
      <t:RadDocument.Captions>
        <t:CaptionDefinition IsDefault="True" IsLinkedToHeading="False" Label="Figure" LinkedHeadingLevel="0" NumberingFormat="Arabic" SeparatorType="Hyphen" />
        <t:CaptionDefinition IsDefault="True" IsLinkedToHeading="False" Label="Table" LinkedHeadingLevel="0" NumberingFormat="Arabic" SeparatorType="Hyphen" />
      </t:RadDocument.Captions>
      <t:RadDocument.ProtectionSettings>
        <t:DocumentProtectionSettings EnableDocumentProtection="False" Enforce="False" HashingAlgorithm="None" HashingSpinCount="0" ProtectionMode="ReadOnly" />
      </t:RadDocument.ProtectionSettings>
      <t:RadDocument.Styles>
        <s:StyleDefinition DisplayName="Document Default Style" IsCustom="False" IsDefault="False" IsPrimary="True" Name="defaultDocumentStyle" Type="Default" />
        <s:StyleDefinition DisplayName="Normal" IsCustom="False" IsDefault="True" IsPrimary="True" Name="Normal" Type="Paragraph" UIPriority="0" />
        <s:StyleDefinition DisplayName="NormalWeb" IsCustom="False" IsDefault="False" IsPrimary="False" Name="NormalWeb" Type="Paragraph" UIPriority="99">
          <s:StyleDefinition.ParagraphStyle>
            <s:ParagraphProperties AutomaticSpacingAfter="True" AutomaticSpacingBefore="True" SpacingAfter="6.66" SpacingBefore="6.66" />
          </s:StyleDefinition.ParagraphStyle>
        </s:StyleDefinition>
        <s:StyleDefinition DisplayName="Table Normal" IsCustom="False" IsDefault="True" IsPrimary="False" Name="TableNormal" Type="Table" UIPriority="59">
          <s:StyleDefinition.TableStyle>
            <s:TableProperties CellPadding="5,0,5,0">
              <s:TableProperties.TableLook>
                <t:TableLook />
              </s:TableProperties.TableLook>
            </s:TableProperties>
          </s:StyleDefinition.TableStyle>
        </s:StyleDefinition>
      </t:RadDocument.Styles>
      <t:Section>
        <t:Paragraph FlowDirection="RightToLeft" StyleName="NormalWeb">
          <t:Span FlowDirection="RightToLeft" FontFamily="Times New Roman" Text="اللا بأضرار الإنزال قصف ان, عل لان إعلان مهانة منشوريا. يكن ما تحرير محاولات. ولم عل مشاركة الإنذار،. سقوط الخنادق بـ بحق, وتم إذ الذود الشرقية. فبعد الحكومة ثم أسر. انه غزوه الشّعبين و. " />
        </t:Paragraph>
        <t:Paragraph FlowDirection="RightToLeft" StyleName="NormalWeb">
          <t:Span FlowDirection="RightToLeft" FontFamily="Times New Roman" Text="أما الحروب مليارات النازيين ٣٠, كل فرنسا وبالتحديد، والبريطاني جهة. بلا ٣٠ بتطويق ونستون أنجلو-فرنسية, إيطاليا وصافرات الإمبراطورية بل بحث, سابق الآلاف مواقعها ثم إيو. أما فشكّل بالرّغم أن. البلطيق الباهضة يبق مع, تحت بل كرسي جديداً. " />
        </t:Paragraph>
        <t:Paragraph FlowDirection="RightToLeft" StyleName="NormalWeb">
          <t:Span FlowDirection="RightToLeft" FontFamily="Times New Roman" Text="تعد ثم قامت مشارف, حول الشرقي انتصارهم أي. لكل ثم ببعض اللازمة, وتتحمّل أفريقيا وبالتحديد، وصل ثم, في مهمّات الشتاء، باستحداث عام. الى مع عرفها الصعداء الأوروبية،. التي المنتصرة حتى في. " />
        </t:Paragraph>
        <t:Paragraph FlowDirection="RightToLeft" StyleName="NormalWeb">
          <t:Span FlowDirection="RightToLeft" FontFamily="Times New Roman" Text="مع أسر الخنادق الإتفاقية, قائمة الانجليزية مكن عل. شبح أم الحكم إعلان الفاشي, كل الله الفاشي إيو. شرسة الولايات حدة في, المنتصر البشريةً جعل هو. بوابة الاندونيسية حتى بل, معقل وباءت العالمية لمّ بـ, ومطالبة الإقتصادي بها أم. هو حدة مسارح إستمات. أسر مشروط النزاع من, حاول فقامت ابتدعها وصل ٣٠. " />
        </t:Paragraph>
        <t:Paragraph FlowDirection="RightToLeft" StyleName="NormalWeb">
          <t:Span FlowDirection="RightToLeft" FontFamily="Times New Roman" Text="عدد الخطّة بمحاولة إذ. دار كل الآخر برلين،. سبتمبر الحربية في حرب, دول الحرة الأول وانهاء أم. لعدم غينيا الصينية جهة هو, بحق بأضرار الروسية ٣٠, وبحلول العصبة أن شبح. وضم ميناء فقامت الجنرال ثم, لغزو وبدون بتطويق ثم تلك. تم لكل مهاجمة الضغوط المدنيون. " />
        </t:Paragraph>
        <t:Paragraph FlowDirection="RightToLeft" StyleName="NormalWeb">
          <t:Span FlowDirection="RightToLeft" FontFamily="Times New Roman" Text="بل تعد بالقصف الخاصّة الخنادق, الحصار وبالتحديد، قد بلا, إيو طرفاً لبولندا، مع. كلّ تجهيز الشرقية أي. جندي مرجع هيروشيما بـ على, مع استولت المواد مما, ذلك أي يذكر والنرويج. ما يطول لهذه موسوليني بعض, كل تكاليف ولاتّساع الإستسلام غير, شرسة بالفشل الشتاء هو كلا. ومن بل قامت الشرقي, تعد مع حلّت الأراضي. بالرغم وسمّيت الإنجليز، عل حتى. " />
        </t:Paragraph>
        <t:Paragraph FlowDirection="RightToLeft" StyleName="NormalWeb">
          <t:Span FlowDirection="RightToLeft" FontFamily="Times New Roman" Text="بـ ثمّة الأوضاع دون. دون لم والفرنسي المتاخمة, حين مع رئيس وبعد المتطرّف. معزّزة الإمتعاض حشد في, ٣٠ تجهيز واحدة إظهارإخفاء غير. وقام الوراء الثانية و أخر, أن لمّ ثانية مارشال الجنرال. لمّ ٠٨٠٤ أعلنت عل, أي الغربي الجنوبي دون, الا بسبب بزمام الشرقي ٣٠. " />
        </t:Paragraph>
        <t:Paragraph FlowDirection="RightToLeft" StyleName="NormalWeb">
          <t:Span FlowDirection="RightToLeft" FontFamily="Times New Roman" Text="ما رئيس الصعداء اليابان، فقد, لان عل بينما الواقعة الحاملات. كان سياسة ممثّلة اليابان تم. عن التخطيط الطائرات بعض, أن بأضرار بمباركة ومطالبة أخذ. ثمّة هتلر، محاولات قد حول. حدة ابتدعها التحالف بـ, جهة تم استدعى مواقعها والفلبين. حربية اقتصادية إذ دون. " />
        </t:Paragraph>
        <t:Paragraph FlowDirection="RightToLeft" StyleName="NormalWeb">
          <t:Span FlowDirection="RightToLeft" FontFamily="Times New Roman" Text="أم مكن يونيو وتقهقر والنفيس, بل الدمج تحرّكت ومن, ببعض بدفع الفاشي ما دنو. اعلان العام جديداً وفي أن. بل فقد مقاطعة انتصارهم, قد أثره، التّحول حدى. من بحق البلطيق الحربي،. حول ٢٠٠٤ عسكرياً من. للجيش المنتصرة و حول, بعض من تجهيز الغزو والفرنسي, أي جورج وبدون موالية دنو. تونس الصينية والفلبين في حشد, فقد اليابان الإيطالية إذ. " />
        </t:Paragraph>
        <t:Paragraph FlowDirection="RightToLeft" StyleName="NormalWeb">
          <t:Span FlowDirection="RightToLeft" FontFamily="Times New Roman" Text="الجو يتمكن بعض من. بحث إستيلاء بالتوقيع مع, أم جيوب جندي مكن. لم دون أمّا إعادة البلطيق. و حدى تطوير للإتحاد وبالتحديد،, كلّ لقهر بالقصف الأبرياء بل. وترك الروس للسيطرة لان أي. جُل تم مئات كانت, أي يطول أطراف السفن قصف. " />
        </t:Paragraph>
        <t:Paragraph FlowDirection="RightToLeft" StyleName="NormalWeb">
          <t:Span FontFamily="Times New Roman" Text=" " />
        </t:Paragraph>
      </t:Section>
    </t:RadDocument>
  5. Vasil
    Admin
    Vasil avatar
    124 posts

    Posted 19 Feb 2014 Link to this post

    Hi Scott,

    Thank you for the follow up.

    As mentioned in my previous post, the FlowDirection in RadRichTextBox control is set per paragraph instance providing functionality similar to that of other word processors like MS Word. Unfortunately, the control does not respect FlowDirection="RightToLeft" set to RadRichTextBox instance at this time, but it is into our product backlog to implement behavior similar to the one of MS RichTextBox with swapping the scroll bar position.

    Please, find attached a modified copy of the sample project you sent to us through a support ticket. To achieve the desired functionality I did the following changes:
    • edited the template of RadRichTextBox control in order to position the vertical scroll bar on the left side. The change is surrounded with empty comments to find it easily;
    • removed FlowDirection property of the RadRichTextBox instance causing the text to reverse;
    • created a method which changes the flow direction of all paragraphs into the loaded document.
    Note that I did not include "Arabic-Lipsum.html" and "Arabic-Lipsum.txt" files in to the archive to avoid sharing any private information in the public forums, so you need to add it to project before compile.

    I hope this works for you. Let me know if you have any other questions or comments.

    Regards,
    Vasil
    Telerik
  6. Scott
    Scott avatar
    10 posts
    Member since:
    Mar 2013

    Posted 19 Feb 2014 in reply to Vasil Link to this post


    Vasil,
      Thanks for your sample; the unfortunate part of this solution is that it requires a local style, so we'd have to have separate RadRichBox styles for all of the themes we support. We don't use implicit themes - and it's not worth it at this point to convert the application.

      Another deal breaker is that we support mixed languages and allow the user to choose "the best" text direction; I'd have to either have yet more styles (perhaps revert to default?) or manipulate the style to swap the vertical scroll bars <Grid> column placement.

      I'll study the style a bit more to see if I can find a some alternatives to make this control usable --

    Thanks,
    Scott
  7. Petya
    Admin
    Petya avatar
    975 posts

    Posted 24 Feb 2014 Link to this post

    Hi Scott,

    The current behavior of the control with RTL content is actually the intended one. We logged an item in our backlog to support the FlowDirection property in the manner the native RichTextBox does, however it is unclear if or when this might be introduced. RadRichTextBox is a complex control which differs in many aspects from the native RichTextBox including in the way RTL is handled. Like Vasil said, you have the ability to set direction per paragraph which is the behavior in most word processors (MS Word for example). That said, provided that we introduce support for the FlowDirection property, could you please share how'd you expect the current functionality to behave? 

    Additionally, please note that while using the StyleManager is a valid approach for styling an application using Telerik UI for Silverlight, the implicit styles approach is faster and allows changing the theme at run-time easily. You could refer to this blog post for more information regarding this.

    In general, the solution from Vasil's last post is the only one we could provide at this point. If you have any other comments or suggestions we would appreciate your feedback.

    Regards,
    Petya
    Telerik
  8. Scott
    Scott avatar
    10 posts
    Member since:
    Mar 2013

    Posted 03 Mar 2014 in reply to Petya Link to this post


    Sorry for the long delay replying to this. The biggest issue here is that there just isn't a "simple" way to tell the control to be RTL, the workarounds present both have negative side effects: changing the data to get RTL just isn't workable (what if I have mixed RTL/LTR text?), and doing a custom style/template is really not reasonable either.

    Here's what I'd expect to be able to do with a RichTextBox: feed it my document and allow the user to select RTL if they want without changing the document. It seems to me that the WPF RTB does exactly that, one tells it to be RTL, using a single property, and it does the "right" thing: it moves the vertical scroll bar to the left, that's really it. If you look at the sample app, you'll note that for the WPF RTB flipping the FlowDirection just moves the scrollbar and doesn't even adjust the text. Now I understand the internally there are lots of other thing going on with respect to text layout/alignment -- but all I want it the scroll bar on the left (without having to maintain custom styles/templates that I'd to manage for every Telerik upgrade).

    Thanks,
    Scott

  9. Petya
    Admin
    Petya avatar
    975 posts

    Posted 06 Mar 2014 Link to this post

    Hello Scott,

    Thanks for getting back to us.

    Like previously discussed, we will consider support for FlowDirection property which would move the scrollbar on the left. However, the document content already supports flow direction and we believe the mechanism is more advanced for precisely the reason you mentioned - if there is mixed data and only part of the paragraphs are RTL, this can easily be handled. For this reason we are not considering implementing the exact same behavior as in the native RichTextBox control.

    Let us know if you want to share anything else with us.

    Regards,
    Petya
    Telerik

    DevCraft Q1'14 is here! Join the free online conference to see how this release solves your top-5 .NET challenges. Reserve your seat now!

  10. Scott
    Scott avatar
    10 posts
    Member since:
    Mar 2013

    Posted 06 Mar 2014 in reply to Petya Link to this post


    Thanks, I guess I'm having a hard time explaining why I don't think what you have now will not work for us. I could live with having to fiddle around with styles/templates -- but having to mess around with the underlying document to get LTR vs RTL just doesn't work very well for us -- we tried it on a prototype application and it became too much of a hassle. And more disappointingly the performance was just much slower than the WPF RTB for large documents.

    At the end of the day, we've decided to not use the control for our application.


    Scott
  11. Ehsan
    Ehsan avatar
    10 posts
    Member since:
    Nov 2014

    Posted 02 Nov 2014 in reply to Vasil Link to this post

    hi
    according to attached image...
    if we load a docx document in richtextbox that have multiple pages,
    in this case we set:

    LayoutMode="Paged"

    then , our pages displayed from left side of  richtextbox container, but  in RTL languages this pages must be from Right side to Left side .
    to solve this we have to set FlowDirection="RightToLeft"
    <telerik:RadRichTextBox  FlowDirection="RightToLeft"   ...
    this solve the problem, but new problem is that the content of pages displayed as LTR now.
    is there any way to solve this problem?
    tnx

  12. Svetoslav
    Admin
    Svetoslav avatar
    55 posts

    Posted 04 Nov 2014 Link to this post

    Hello Ehsan,

    As discussed in this thread, RadRichTextBox does not respect FlowDirection="RightToLeft". This feature is logged in our backlog but for now I cannot say if or when it will be available. There is a feature request item "Add RightToLeft support for the FlowDirection property in RadRichTextBox" in our feedback portal where you can vote and track the overall progress of the request.

    On the other hand in RadRichTextBox the flow direction is set per paragraph, as it is presumed that the document can contain both left-to-right and right-to-left text. Could you share more information on your scenario? Are paragraphs in your document with LTR flow direction? We would appreciate it if you send us the document, so that we can look into the behavior.

    Regards,
    Svetoslav
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for WPF is Visual Studio 2017 Ready