Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-76203

Add support for BDI tag in HTML Purifier

XMLWordPrintable

    • MOODLE_311_STABLE, MOODLE_39_STABLE, MOODLE_400_STABLE, MOODLE_402_STABLE
    • MOODLE_403_STABLE
    • Hide
      1. As a user, enter a course forum where you can post.
      2. Create a new discussion.
      3. In the text editor, switch to HTML display (in Atto, the HTML button. In Tiny, the menu View -> source code).
      4. Paste the content below or from the attached file (download the file first to make sure the fonts are correct).

        <!-- Based on the example in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdi -->
        <h1>World wrestling championships</h1>
        <ol>
           <li><b>Evil Steven</b>: 1st place</li>
           <li><b>François fatale</b>: 2nd place</li>
           <li><b>تیز سمی</b>: 3rd place</li>
           <li><bdi><b>الرجل القوي إيان</b></bdi>: 4th place</li>
           <li><span dir="auto"><b>تیز سمی</b></span>: 5th place</li>
        </ol>

      5. Save and view the post.
      6. Expected results: Item number 3 will be displayed incorrectly. Items 4 and 5 will display correctly.

      Attached an example of the same text content before and after the changes.

      Show
      As a user, enter a course forum where you can post. Create a new discussion. In the text editor, switch to HTML display (in Atto, the HTML button. In Tiny, the menu View -> source code). Paste the content below or from the attached file (download the file first to make sure the fonts are correct). <!-- Based on the example in https: //developer.mozilla.org/en-US/docs/Web/HTML/Element/bdi --> <h1>World wrestling championships</h1> <ol>    <li><b>Evil Steven</b>: 1st place</li>    <li><b>François fatale</b>: 2nd place</li>    <li><b>تیز سمی</b>: 3rd place</li>    <li><bdi><b>الرجل القوي إيان</b></bdi>: 4th place</li>    <li><span dir= "auto" ><b>تیز سمی</b></span>: 5th place</li> </ol> Save and view the post. Expected results: Item number 3 will be displayed incorrectly. Items 4 and 5 will display correctly. Attached an example of the same text content before and after the changes.
    • 1
    • Team Hedgehog 2023 Sprint 2.1, Team Hedgehog 2023 Sprint 2.2, Team Hedgehog 2023 Sprint 2.3

      For many users with RTL languages, it's quite the challenge to write text that combines LTR words, or even a set of numbers without breaking the text flow. This is easily resolved in all word processing programs, but not in web pages.

      A solution does exist in the form of the BDI tag which is supported in all major browsers.

      Although HTML Purifier comes with BDO support, this is a different tag that won't be more suitable for text editors.

      Adding the BDI support will set the grounds for easily creating or even just reading LTR content within RTL, and vise versa.

       

      I myself have no experience with the HTMLPurifier but it seems that it can be achieved by adding these two definitions in the purify_html() function:

      $def->addAttribute('span', 'dir', 'Enum#ltr,rtl,auto');
      $def->addElement('bdi', 'Inline', 'Flow', 'Common');

       

      This will add the BDI tag as well as its 'dir' attribute equivalent.

            l.gil Lior Gil
            l.gil Lior Gil
            Meirza Meirza
            Ilya Tregubov Ilya Tregubov
            Kim Jared Lucas Kim Jared Lucas
            Votes:
            4 Vote for this issue
            Watchers:
            8 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 hour, 23 minutes
                1h 23m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.