[RTL]: DMN viewer open decision table button missing and elements skewed

[BrianJVarley]

Describe the Bug

For right-to-left languages such as Arabic, the document dir attribute is set to dir="rtl"in Angular apps. In most cases elements in the HTML document need to have their CSS adjusted to accommodate this change in direction. For example adjusting padding or mirroring directional icons from right to left.

When using dmn-js Viewer within a web application with document dir="rtl". The blue open decision table button disappears and the labels within the djs-group blocks display outside the bounds of the block.

dir="ltr" (Default)

dir="rtl"

Steps to Reproduce

Steps to reproduce the behavior:

1. Open the demo bpmn.io page & change the document dir attribute to - dir="rtl" using inspect element in dev tools in Chrome.

2. View a dmn-js chart and notice there is no blue open decision table button on the DMN block. So the user can not view the DMN table. Also notice that the DMN label is outside the bounds of the DMN block.

Expected Behavior

The blue open decision table button is visible on DMN blocks and label is displayed within the block. The user can view the DMN table.

Environment

• Browser: Chrome 131.0.6778.110 (Official Build) (x86_64)
• OS: macOS Sonoma 14.7.1
• Library version: 16.7.0

[barmac]

Thanks for the report. Would you be interested in contributing a fix?

[BrianJVarley]

@barmac I could have some time in the new year to take a look. Otherwise if you plan to start earlier I could help with the PR review.

[barmac]

Thanks, we will gladly review your PR in that case!