Twenty Nineteen: Navigation menu is messy with RTL language

[manooweb]

Hello,

For our languages switcher, we can add it in primary navigation menu with an options for adding country flag for each language.

With a rtl language like arabic, we have a strange behaviour because of the first li tag does not have the behaviour expected.

See first screenshot attached

Unlike in twenty seventeen

display: inline;

is used instead of

display: inline-block;

When I corrected to

display: inline-block;

it works well again in this case.

See second screenshot attached

Regards

[manooweb]

first screenshot

[manooweb]

second screenshot

[manooweb]

patch file

[davidbaumwald]

@SergeyBiryukov This one was brought up in the bug scrub today. Is this still on your list for 5.3?

[sabernhardt]

Two RTL languages in switcher, on English page in Chrome

[sabernhardt]

Two RTL languages in primary menu list items set to display: inline-block (on English page, in Chrome)

[sabernhardt]

I'll still test more by tomorrow to see if I can find a problem with using display: inline-block for the primary menu items, but a change to one stylesheet would need to be made for both language directions.

A second, adjacent RTL language link on a left-to-right language's page mixes up the two flags visually in Chrome, Edge and Internet Explorer (Firefox was fine). Setting the list items to inline-block in styles.css as well would take care of that.

(testing Twenty Nineteen 1.4 with Polylang 2.6.5 and WordPress 5.3 beta 3 on Windows 10)

[sabernhardt]

Primary menu list items set to display: inline-block for both LTR and RTL stylesheets, plus SCSS

[sabernhardt]

Setting to display: inline-block works for me:

1. with or without the flags,
2. either single-level or multi-level, and
3. with both LTR and RTL text directions.

So the new patch includes the two stylesheets plus the related SCSS partial.

Windows browsers used:

• Google Chrome 77.0.3865.120
• Mozilla Firefox 69.0.3
• Microsoft Edge 44.18362.387.0
• Internet Explorer 11

[davidbaumwald]

With 5.3 RC1 releasing today, this is being moved to Future Release. If any committer feels this can be worked in quickly for 5.3 or can assume ownership in 5.4, feel free to move it back up.

[karmatosed]

I am going to test this to look at getting this into commit as it seems like that was all needed to be done. Thanks everyone.

[karmatosed]

In 58582:

Twenty Nineteen: Fixes messy navigation with RTL language.

The first tag wasn't switching correctly. This resolves it for an adjacent RTL language link setting list items to inline-block.

Props manooweb, audrasjb, SergeyBiryukov, davidbaumwald, marybaum, sabernhardt.
Fixes #46658.