Arabic section titles are not appearing as Right To Left in Universal Viewer

[sdellis]

Summary

Arabic section titles are not appearing as Right To Left in Universal Viewer. Adding brackets to wrapped text also creates problems because they do not start and end at the beginning of the text.

Impact

This affects end users as the text is not displayed properly, but does not typically prevent them from accomplishing their task.

Priority recommendation

• asap
• within the next 3 weeks
• PO will prioritize

Sudden Priority Justification

Required if "asap" or "within the next 3 weeks" is checked. Add "Sudden Priority" and "Maintenance/Research" labels

Expected behaviour

Section titles should be displayed Right To Left

Actual behaviour

Section titles are displayed Left To Right, which is incorrect

Steps to reproduce behaviour

See highlight reel. at 12:50.

ScreenshoTS

See highlight reel. at 12:50.

Example

Example used in this screencast: https://catalog.princeton.edu/catalog/9963585953506421
https://figgy.princeton.edu/catalog/cfec680e-1169-475d-b0f3-90b5f64e8115

Context

This issue is the result of a UX research session. The bug was reported during a focus group / observation with Graduate Students working on an Islamic Manuscripts project, held on Aug 16th, 2022.

[hackartisan]

potentially relevant UV ticket UniversalViewer/universalviewer#299

[sdellis]

Follow up with users about whether the title in UV is RTL, but should also be justified right. UV has no dir attribute on the element. Is there a way to tell the viewer that this is RTL. Setting dir='rtl' in the TOC seems to do the right thing. However, there's often mixed languages in the TOC, so we need to apply it directly to the section labels.

Things to explore, in order:

1. Can IIIF support RTL in text labels? (look at spec, ask in slack)
2. Can UV support RTL in section titles? The answer is yes, if we can assign a language to the label that's an RTL language. (we can test with a mock manifest)
3. We need to be able to assign lang value in Structure Manager. We define the language in the metadata values, and you can see that it works in the metadata panel of the UV.

Note: Rails Gem currently auto-assumes RTL or LTR (not language) based on the unicode character range.

[hackartisan]

Other implementation possibilities:

• Do the above and also try to have the structure manager provide a best guess for the language and allow users to override.
• Propose a way for iiif to allow us to give a rtl designation to a label (then we can leverage the rails gem mentioned in note above)
• implement something in UV that's similar to the rails gem (referenced in note above)

[hackartisan]

mentioned by @eliotjordan https://github.com/jtoy/cld

[kelea99]

PO Priority: This is one of two top figgy priorities for the Large 3 year project for Middle East Manuscripts. After discussion with project team, it would be great to see this through to completion by the end of the 3 year project (2024)

[tpendragon]

Implementation proposal:

In the Manifest Builder, check to see if a section label is RTL (#dir), if it is, then make it a RDF Literal with the language tag that's in the imported metadata's #language property.

[hackartisan]

#5750 updates manifests as per the implementation proposal in the previous comment. However, UV only implemented the rtl direction feature for the metadata info pane, not for the leftPanel "Contents" iiif-tree-component.

Code references:

• the TreeView in the leftpanel module uses TreeNode for the elements of the table of contents https://github.com/UniversalViewer/universalviewer/blob/86f2cd47598ed2b2cef6b30fd3dc706b0c8b9807/src/content-handlers/iiif/modules/uv-contentleftpanel-module/TreeView.ts
• The TreeNode itself is defined in manifesto: https://github.com/IIIF-Commons/manifesto/blob/6e355e34c38b64b9cf9c366d6ff60006db341968/src/TreeNode.ts
  • the label is set in the constructor, making it much more difficult to override the behavior here, to the extent that it's either not actually possible or really not a good idea.
• Here's some code showing how it works in the metadata info pane: https://github.com/UniversalViewer/universalviewer.github.io/blob/85dac1a4274f53659ba136c2bcd7ce1ab8c9d908/vendor/uv/lib/iiif-metadata-component.js#L375-L382
• language direction configuration referenced in the UV ticket: https://github.com/UniversalViewer/universalviewer/blob/67ada49f6d866a51ab173d7166f6ddf04fffb471/src/content-handlers/iiif/extensions/uv-mediaelement-extension/options/en-GB.json#L50

Note that @tpendragon also tried just putting html as the manifest value, but that resulted in an error.

The proposed path forward is (not necessarily in this order):

• Work on UV upstream to implement the required feature, possibly in collaboration with someone in the UV community.
• Migrate from webpacker to vite (Migrate from webpacker to vite #5734)
• Update figgy to use the latest UV release, ensuring we carry over local customizations (see Update to UV universal viewer v4 #5778)

However, this path forward is a bigger project than we had hoped and the work will need to undergo prioritization again.

[hackartisan]

I created UniversalViewer/universalviewer#916