[#35847] - [3.10] [WiP] Use HTML element "" to fix RTL display of version numbers which contain characters
- Closed
- 25 Oct 2021
- Medium
- Build: 3.10-dev
- Draft PR
- # 35847
- Diff
- richard67:3.10-dev-bdi-elements-for-version-numbers
User tests: Successful: Unsuccessful:
Pull Request for Issue # .
Replaces PR #35838 .
Summary of Changes
Wrap version numbers e.g. of extensions into HTML element <bdi> in diverse backend views for correct display of versions which contain characters (e.g. development, alpha, beta or RC versions, or versions like "1.2.3.v4" like they are used by some Joomla 4 language pack) with RTL languages.
Currently such versions are shown wrong when current language in backend has writing direction RTL.
In the "Live Update" tab of the Joomla Update component where we already use the RTL mark '‎' for the installed Joomla version and the latest Joomla version, replace that by using <bdi> because that is more flexible regarding versions with characters only (e.g. "alpha" or "ألفا") and because that's recommended by w3c.
See the discussion in my previous PR #35838 for details about <bdi>.
To be done: There might be still other places where we show version numbers which needs this fix, e.g. overrides in the Hathor template.
Testing Instructions
Testers please test with different browsers, as many as you have.
The change in file administrator/components/com_installer/views/languages/tmpl/default.php can be only tested by code review since I haven't found a hack to make the installer find the modified language packs used during the other tests below.
To be done: I have to add tests for the schema version and update version information and error messages of the database checker.
- On a current 3.10-dev branch or the latest 3.10 nightly build, download and install the following modified language packs and weblinks package.
- https://test5.richard-fath.de/de-DE_joomla_lang_full_3.10.1v1.zip
This is an unmodified but older German language pack so you will get an update to a newer version with a "normal" version number. If you have already installed a newer German language pack, uninstall it and then install the one from the link here. - https://test5.richard-fath.de/de-XX_joomla_lang_full_3.10.1v1_test.zip
This is a modified German language pack which uses a different language tag so it can be installed in parallel to the German language pack mentioned before. It is modified so that both the installed and the available update versions are shown with release candidate "-rcX" version numbers. - https://test5.richard-fath.de/fa-XX_joomla_lang_full_3.10.2v1_test.zip
This is a modified Persian language which uses a different language tag so it can be installed in parallel to any present Persian language pack. It is modified so that both the installed and the available update versions are shown with version numbers like e.g. "3.10.2v1". The Persian language pack for Joomla 4 currently uses such versions, for the test here with Joomla 3 it needs that modified pack. - https://test5.richard-fath.de/pkg-weblinks-3.9.0-rc1_test.zip
This is a modified weblinks package to get installed and update versions shown with release candidate "-rcX" version numbers for having test for different extension types than languages.
-
Go to the options of the Joomla Update component and set the update channel to "Custom URL", the minimum stability to "Development" and the custom URL to https://update.joomla.org/core/test/310to4_list.xml . This makes sure that an update for the core will be found for later tests.
-
Check in the following views all version numbers which contain strings for both kinds of backend languages LTR and RTL. For RTL you can use the previously installed "Persian (Test)".
- "Pre-Update Check" tab of the Joomla Update component with "More Detail" expanded for the extensions
- "Live Update" tab of the Joomla Update component
- Languages: Installed
- Extensions: Update (Use the "Clear Cache" and then the "Find Updates" button if necessary to find all updates.)
- Extensions: Manage
When using Persian language you can find here the last 2 views and the one used in step 5 below:
- In database in the extensions table, delete the records for the 'de-DE' and the 'fa-XX' site languages and the weblinks editor button.
- In phpMyAdmin using the GUI:
- With SQL, replace
#__with your database prefix.:
DELETE FROM `#__extensions` WHERE `type` = 'language' AND `element` = 'de-DE' AND `client_id` = 0;
DELETE FROM `#__extensions` WHERE `type` = 'language' AND `element` = 'fa-XX' AND `client_id` = 0;
DELETE FROM `#__extensions` WHERE `type` = 'plugin' AND `element` = 'weblink' AND `folder` = 'editors-xtd';
-
Go to the "Extensions: Discover" view and check the version numbers which contain strings. Use the "Discover" button if necessary to discover all extensions. Check with LTR and RTL backend languages.
-
Select the discovered extensions and install them using the "Install" button.
-
Apply the patch of this PR.
-
Repeat steps 3 to 5.
Actual result BEFORE applying this Pull Request
"Pre-Update Check" tab of the Joomla Update component
LTR
RTL - The messed position of the "More Detail" toggle is another issue to be solved in another PR
"Live Update" tab of the Joomla Update component
LTR
RTL - here the version numbers are already correct
Languages: Installed
LTR
RTL
Extensions: Update
LTR
RTL
Extensions: Manage
LTR
RTL
Extensions: Discover
LTR
RTL
Expected result AFTER applying this Pull Request
For LTR there should be no changes compared to before applying this PR.
For RTL the versions should be the same as for LTR as shown below.
"Pre-Update Check" tab of the Joomla Update component
The messed position of the "More Detail" toggle is another issue to be solved in another PR.
"Live Update" tab of the Joomla Update component
There should be no change, both LTR and RTL should work as well as without this PR for this view.
Languages: Installed
Extensions: Update
Extensions: Manage
Extensions: Discover
Documentation Changes Required
None.
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Administration com_installer com_joomlaupdate com_languages |
| Title |
|
||||||
| Labels |
Added:
?
|
||
| Category | Administration com_installer com_joomlaupdate com_languages | ⇒ | Administration com_installer com_joomlaupdate com_languages JavaScript |
| Title |
|
||||||
@C-Lodder https://caniuse.com/?search=unicode-bidi doesn't show me embed? Is that supported by IE? And in which CSS or less file should that go? I don't think the https://github.com/joomla/joomla-cms/blob/3.10-dev/administrator/templates/isis/less/blocks/_tables.less which Brian had suggested in my previous PR #35838 is the right place because it should not be used in tables only, and in my opinion it should also not be template-specific. What do you think about PR #35838 ?
I would classify this as progressive enhancement which the changed policy allows unlike the js changes which break under ie
I would classify this as progressive enhancement which the changed policy allows unlike the js changes which break under ie
@brianteeman Why should the js change break under IE? It only adds bdi to the markup dynamically.
I meant we have had js changes in other pr that could not be done because they break with ie but this is not the case here. If you are using ie then you dont get the enhancement but nothing breaks
@brianteeman And what is your preference? Using spans and CSS, or using bdi like this PR is now?
@C-Lodder When I tried doing that with CSS I had the problem that when the language was RTL, my styles were superseeded by those from the template-rtl.css. So if we decide to do it with CSS (I am open for all) I would need advise.
@brianteeman I need some advise. It seems that there are cases where I only can fix that either by adding markup with "bdi" (or "span" with some class or whatever we will use at the end) to the language string or by splitting these strings into parts.
Example is the schema and update version information in the "Other information" tab of the database checker:
As you can see, the schema versions are ok, and for lucky circumstance also the update version, even if that contains a "-dev" which elsewhere made problems, but the table names are wrong, the prefix is shown at the end and not the beginning. When switching language e.g. to any RTL language in phpMyAdmin, table names are shown LTR as it should be, and so I think we should show in Joomla also #__schemas and not schemas__#.
As said it can be solved by adding markup to the language strings:
COM_INSTALLER_MSG_DATABASE_SCHEMA_VERSION="Database schema version (in <bdi>#__schemas</bdi>): %s."
COM_INSTALLER_MSG_DATABASE_UPDATE_VERSION="Update version (in <bdi>#__extensions</bdi>): %s."
But would that be good? I remember discussions about markup in language strings to be avoided, but on the other hand I can see <strong> being used often.
Update: Alternatively we could change the strings to use ... (in %1$s): %2$s. and add the markup in PHP, but that would mean we have to add new strings, right? Otherwise we would get exceptions about not matching arguments for sprintf if language packs haven't been updated yet.
Reading further here https://www.w3.org/International/articles/inline-bidi-markup/#whattodo I think it could and maybe should be done with span elements with a dir attribute.
It should have dir="auto" e.g. for version numbers where we might have plain text version like "alpha" or "ألفا", at least theoretically, as our documentation does not say version tags for extensions have to follow any convention, and dir="ltr" where we have database table names or other names which are LTR and not to be translated. The same is needed for numbers with engineering units which are not to be translated, but for pure numbers (integer if floating point) we won't need that because they will always be LTR.
The alignment of numbers or versions e.g. in list views in backend is something independent from that, This should be done with CSS of course.
Using span instead of bdi should also work for IE.
@brianteeman What do you think, should I go that way? And what about my previous question about markup in language strings? Can we do that, e.g. COM_INSTALLER_MSG_DATABASE_UPDATE_VERSION="Update version (in <span dir="ltr">#__extensions</span>): %s."? Or better not?
Thinking over versions like "alpha" or "ألفا" I'm not sure if we should allow that because we would use version_compare with that. So I think versions should have dir="ltr" and not "auto".
Thinking more, maybe we should extend the HTMLHelper (JHtml) by a function like this?
public static function inlineBidirectional($value, $direction = 'auto', $element = 'span')
{
if (strtolower(Factory::getDocument()->getDirection()) === $direction)
{
return $value;
}
return '<' . $element . ' dir="' . $direction . '">' . $value . '</' . $element . '>';
}
It would simulate the behavior of a "bdi" element and do what is suggested here: https://www.w3.org/International/articles/inline-bidi-markup/#whattodo .
And it would add the additional markup only if necessary.
@brianteeman @C-Lodder What do you think about that?
Closing in favour of #35902 .
@brianteeman @C-Lodder Please check and comment there. Thanks in advance, and thanks for feedback up to now.
| Status | Pending | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2021-10-25 19:07:31 |
| Closed_By | ⇒ | richard67 |
<bdi>isn't supported in IE8 and above, which J3 is supposed to support.Why not use CSS instead?