Articles: Languages section need to be styled differently

[mapk]

Currently, the languages section takes up a lot of room if the page is offered in different locales.

Here are a couple ideas of what we could do here.

1. Turn it into a dropdown. Place on this would need some work.

2. Move it into a sidebar. 3. At least make the font-size smaller to match the text in the TOC.

Any other thoughts on what we could do here?

[mapk]

Another idea suggested by Felipe Elia was to use a similar dropdown to the WP15 site.

[Clorith]

Currently these links all go to Codex pages, we will have to revise what the plan is here, for two reasons:

• We shouldn't link to the Codex when we are trying to decommission it.
• We have no connection between articles on different locales on .org, so how do we create a link between different languages, these are curated articles, not something translatable via translate.wordpress.org

We can introduce a nice drop down like the one mentioned in https://github.com/Kenshino/HelpHub/issues/201#issuecomment-383617049 with Codex links for the first iteration just to retain those links, but will definitely need a better solution in the long run.

[Kenshino]

We shouldn't link to the Codex when we are trying to decommission it.

We're decommissioning the English Codex (which is most of it yeah) but we can't remove the different languages until we have a plan for translation of the articles.

We can introduce a nice drop down like the one mentioned in #201 (comment) with Codex links for the first iteration just to retain those links, but will definitely need a better solution in the long run.

I think the dropdown is great - except it should be in the side bar.

Thoughts? @atachibana

[atachibana]

As John says, once we delete an English Codex Page, the links to I18N versions are also deleted.

In the past, when function reference was moved to Code Reference from Codex, the same thing occurred. Non English User cannot jump own I18N version, anymore. We should keep those link in the HelpHub page.

I prefer dropdown box, but it is ok that moving the position to the bottom of contents, or changing smaller font, etc.

[Kenshino]

@atachibana can you take the original code you wrote, convert that to a widget with a dropdown?

[atachibana]

First, I'd like to propose to hide the current language section by CSS for 1st realse. This 201 will take some time...

If we change this language section to Widget, all pages will have the same language list. Dropdown will show it smart way as just one line even if we register all languages, but, clicking it will cause 404 not found error in almost cases because there are no translated pages. So, we have to control the language list per page.

There are two ideas

Widget

1. Add custom field 'codex_languages' to Custom Post Type 'Article'
2. Specify a list of pairs of language and page that the article was translated to Custom field 'codex_languages'

en="FAQ Installation" it_codex="Domande frequenti sull’installazione di WordPress" nl_codex="Installatie FAQ"

3. From Widget, Read current shown page's custom field 'codex_languages' value, and show the dropdown box with those languages only.

Plugin + CSS

This is current output from Plugin.

<p class="language-links"><a href="https://codex.wordpress.org/Multilingual_Codex" title="Multilingual Codex" class="mw-redirect">Languages</a>: <strong class="selflink">English</strong> &bull; <a class="external text" href="http://wpdocs.sourceforge.jp/Version 4.9">日本語</a></p>

There might be CSS hack to move above <p class="language-list"> (or I can change it to <div>) into side bar area, though I don't know...

[atachibana]

This language section points to other translated Codex pages. The dropdown box is not appropriate for this purpose because moving to other pages when user select the item from dropdownbox is not common interface.

We should use Wikipedia style link:

Fortunately(?), we don't have many translated version, so the list not so long.

[atachibana]

Whatever the design, current shortcode would not be required. Before implementation, I will remove languages section.

[mapk]

We should use Wikipedia style link:

I'm open to that now that the language section will exist in a sidebar and not at the top of the content.

[atachibana]

@Kenshino To meet the schedule, I would like to separate this tasks into two.

For Version 1 release

• Removing current short code from contents

For later release

• Create Widget that implement above logic (using Custom Field of Custom Post Type 'Article')

What do you think?

[Clorith]

I like your idea @atachibana, it means we're not tied down by the translations and can introduce them in a way that's more user friendly in continuous iterations, great idea!

[atachibana]

Language sections in all pages were removed for Version 1 release. Now the milestone of this issue is set as Version 2, and I'll continue the design and implementation.

[Kenshino]

Agreed!

[wittwitsan]

Proposed design for language navigation

• dropdown at the bottom of left sidebar

[zzap]

This is pretty much straightforward. I like it.

[ozekiy]

I think that is also good. However, I thought it would be nice to see all the languages. I think that it is easy to see if the national flag is attached.

[Nishimura35]

Proposed design for language navigation ・Flags + Language name

[ShinichiNishikawa]

I think we should explicitly show the language links as a list. When for example a Japanese person isn’t comfortable with English and can’t figure what it is by reading “English” on the drop down label, it is really difficult for that person to see there is a Japanese version.

Wikipedia says “日本語” and is super obvious.

[atrasi2079]

I think Nishimura35's idea is so good. If I think about the mobile GUI, dropdown + flags style is also good.

[miminari]

I like the idea @atachibana, too. I think it is important for the people who can't read English that they can see the own language.

And Flag Images is very good icons, same reasons.

[ntwb]

Flags are not ideal, many countries have multiple languages, the polyglots sites do not use them for this very reason, nor Wikipedia

See also:

• https://twitter.com/zedejose/status/918488945507360768
• In short: flags are not languages and vice-versa.

[leogermani]

-1 for flags

http://www.flagsarenotlanguages.com/blog/

[naokomc]

I vote for the polyglots icon + text dropdown (WP15 style as Mark said).

When I access WP15 site, I see Japanese translation + dropdown with Japanese already selected. WP15 site seems to be detecting my browser language and updating the parameter - so this is probably not possible for support docs.

I'd love to see the dropdown above ToC (there's already some space here).

But for some reason that's not feasible, how about the top of the left sidebar?

[tobifjellner]

Various alternative language versions could be listed in a dropdown. But, in addition, any matches with languages in http parameter "accept-language" could be listed once more, separately, to be quickly reachable.

[miminari]

OK, the polyglots icon + text dropdown menu seems to be better.

But it reminds me of the nightmare when I set up the WordPress development version. You know, I have confused whenever I change the language to Japanese because the huge pulldown list looks to do not have any rules of sorting for Japanese, and it’s hard work for me to find “日本語”. (Why should it be next "Italiano" and before "Basa Jawa" ?)

Of course, as @atachibana said, we have a shorter list than the WP setting's one now. But if we have the choice of the dropdown way, I would like to implement the function it checks and chooses the browser language setting automatically as @naokomc said, or it might be the other option it's the function we can search by strings.

[Zebedeu]

@miminari I believe that a string search gets better, considering that there are locales that are not detected by the browser currently.