Grunt update. Adding linebreak dependency for unicode-correct line br…

…eak detection. Adding back directional marks into load-unbuilt-strings. Proper RichText line break handling. See #843

joist-tests.html

@@ -87,6 +87,7 @@
     '../sherpa/lib/lodash-4.17.4.js',
     '../sherpa/lib/FileSaver-b8054a2.js',
     '../sherpa/lib/himalaya-1.1.0.js',
+    '../sherpa/lib/linebreak-1.1.0.js',
     '../sherpa/lib/flatqueue-1.2.1.js',
     '../sherpa/lib/he-1.1.1.js',
     '../assert/js/assert.js',

joist_en.html

@@ -87,6 +87,7 @@
     '../sherpa/lib/lodash-4.17.4.js',
     '../sherpa/lib/FileSaver-b8054a2.js',
     '../sherpa/lib/himalaya-1.1.0.js',
+    '../sherpa/lib/linebreak-1.1.0.js',
     '../sherpa/lib/flatqueue-1.2.1.js',
     '../sherpa/lib/he-1.1.1.js',
     '../assert/js/assert.js',

js/isLeftToRightProperty.ts

@@ -0,0 +1,22 @@
+// Copyright 2022, University of Colorado Boulder
+
+/**
+ * A universal locale-based Property that is true when text is meant to be laid out left-to-right, and false
+ * when the reverse is true (text should be laid out right-to-left).
+ *
+ * @author Jonathan Olson <[email protected]>
+ */
+
+import DerivedProperty from '../../axon/js/DerivedProperty.js';
+import localeInfoModule from '../../chipper/js/data/localeInfoModule.js';
+import joist from './joist.js';
+import localeProperty from './localeProperty.js';
+
+const isLeftToRightProperty = new DerivedProperty( [ localeProperty ], locale => {
+  // @ts-ignore keyof localeInfoModule not helping here.
+  return localeInfoModule[ locale ].direction === 'ltr';
+} );
+
+joist.register( 'isLeftToRightProperty', isLeftToRightProperty );
+
+export default isLeftToRightProperty;

js/preferences/GeneralPreferencesPanel.ts

@@ -19,6 +19,7 @@ import optionize, { EmptySelfOptions } from '../../../phet-core/js/optionize.js'
 import PickRequired from '../../../phet-core/js/types/PickRequired.js';
 import PreferencesPanelSection from './PreferencesPanelSection.js';
 import Emitter from '../../../axon/js/Emitter.js';
+import isLeftToRightProperty from '../isLeftToRightProperty.js';
 
 type SelfOptions = EmptySelfOptions;
 type GeneralPreferencesPanelOptions = SelfOptions & VBoxOptions & PickRequired<VBoxOptions, 'tandem'>;
@@ -52,19 +53,28 @@ class GeneralPreferencesPanel extends VBox {
     // All panel content collected in this final array
     const panelContent = [];
 
-    const introParagraphs = new VBox( { spacing: 10, align: 'left' } );
     const introTextOptions = merge( {}, PreferencesDialog.PANEL_SECTION_CONTENT_OPTIONS, {
 
       // using lineWrap instead of default maxWidth for content
       maxWidth: null,
       lineWrap: 600,
       tagName: 'p'
     } );
-    introParagraphs.children = [
+    const introParagraphsTexts = [
       new VoicingRichText( joistStrings.preferences.tabs.general.accessibilityIntroStringProperty, introTextOptions ),
       new VoicingRichText( joistStrings.preferences.tabs.general.moreAccessibilityStringProperty, introTextOptions )
     ];
 
+    const introParagraphs = new VBox( { spacing: 10, children: introParagraphsTexts } );
+
+    isLeftToRightProperty.link( isLTR => {
+      introParagraphsTexts.forEach( text => {
+        const align = isLTR ? 'left' : 'right';
+        text.align = align;
+        introParagraphs.align = align;
+      } );
+    } );
+
     // Just the provided panel content with its own spacing
     const providedChildren: Node[] = [];