1279647 - Wider dash in the Firefox title bar

Status: RESOLVED FIXED

(Firefox :: General, defect)

Description

[h-h]

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:48.0) Gecko/20100101 Firefox/48.0
Build ID: 20160606004039

Steps to reproduce:

I looked at the title bar.


Actual results:

I saw a tiny tiny separator dash that's hardly visible. I'm refering to the hyphen that separates the page title from the application name. A hyphen is supposed to JOIN words and used as a separator as an artifact of ANSI times.


Expected results:

As internet page titles often contain Unicode characters, nowadays, it is time to use the typographically correct Unicode character also for the separator dash.

Different languages use different dash lengths. Examples:
- American English: "Page Title — Firefox" (em dash, U+2014)
- German: "Page Title – Firefox" (en dash, U+2013)

Here's some evidence that this request is not new:
- Just look at the title: https://de.wikipedia.org/wiki/Aachen
- https://www.google.com/search?q=%22em+dash%22+%22window+title%22
    - https://code.google.com/p/bangarangissuetracking/issues/detail?id=288
    - https://bugzilla.mozilla.org/show_bug.cgi?id=22871
    - See point 4: http://eos.mc-creative.nl/docs/human-interface-guidelines/window-titles
    - See 2nd paragraph of answer: http://lists.apple.com/archives/hit-developers/2003/Mar/msg00046.html
        - Screenshot: http://regmedia.co.uk/2011/07/25/apple_osx_lion_mail_b.png

I investigated how the different Wikipedias for the different languages do it. Here are the results for Wikipedia titles in different languages (coming from HTML):
- Hyphen (-): 63 languages (mostly used without thinking about this topic in my opinion)
- En dash (–): 15 languages
- Em dash (—): 14 languages

Please point me to the correct locations if I should put the correct dash characters for every Firefox translation into their respective files. I recommend using an em dash (—) like in the American English language when Wikipedia shows a hyphen.

The praxis of Wikipedia shows that Firefox should adhere to the specific language conventions regarding this typographical aspect.

Comment 1

[h-h]

Attachment: How_ironic.png

How ironic!

Comment 2

[h-h]

Don't let the monospace font fool you! You may want to copy the text into Notepad/Wordpad/Word with an appropriate font like Segoe UI (Windows).

Comment 3

[h-h]

This is the evidence list from above, updated and extended:
- The German localization of Opera uses an en dash in the window title that's shown in tooltips of the Windows taskbar button and in the Alt+Tab dialog:
    - Image: https://www.basicthinking.de/blog/wp-content/uploads/2015/08/win10_taskauswahl.png
        - (From page: https://www.basicthinking.de/blog/2015/08/04/windows-10/)
    - En dash used in heading of German article and on both images: https://www.deskmodder.de/blog/2016/06/02/windows-10-programme-mit-dem-alten-xp-switcher-wechseln/
- The English Otter Browser uses an em dash: https://otter-browser.org/screenshots/
- Wikipedias in various languages use en and em dashes in their `<title>` tags:
    - https://de.wikipedia.org/wiki/Aachen
    - https://ru.wikipedia.org/wiki/%D0%90%D1%85%D0%B5%D0%BD
- Many websites use longer dashes: http://yourcmc.ru/wiki/images/1/12/Mru-order-menu.png
    - (From page: https://github.com/OtterBrowser/otter-browser/issues/52#issuecomment-32133109)
- Style guide (see point 4): https://elementary.io/docs/human-interface-guidelines#window-tiles
- Agreement (see 2nd paragraph of answer): https://web.archive.org/web/20090929031152/http://lists.apple.com/archives/hit-developers/2003/Mar/msg00046.html
    - Screenshot: http://regmedia.co.uk/2011/07/25/apple_osx_lion_mail_b.png
- https://code.google.com/p/bangarangissuetracking/issues/detail?id=288
- https://bugzilla.mozilla.org/show_bug.cgi?id=22871
- Google search: https://www.google.com/search?q=%22em+dash%22+%22window+title%22

Comment 4

[Cameron McCormack (:heycam)]

This is more of a browser UI issue than a text rendering issue.  FWIW it looks like the separator used is defined here:

https://searchfox.org/mozilla-central/rev/8affe6e83188787eb61fe0528eeb6eef6081ba06/browser/locales/en-US/chrome/browser/browser.dtd#13

I'm not familiar enough with our localization architecture to know whether this definition is duplicated in other locale DTD files too.

Comment 5

[h-h]

> FWIW it looks like the separator used is defined here:
> 
> https://searchfox.org/mozilla-central/rev/8affe6e83188787eb61fe0528eeb6eef6081ba06/browser/locales/en-US/chrome/browser/browser.dtd#13

Yes. I, too, tracked down *that* file. But there are also a number of .properties files that need a copy of the dash information. That is, there are multiple places that need to be changed for consistency in the dash usage.

> I'm not familiar enough with our localization architecture to know whether this definition is duplicated in other locale DTD files too.

Every localization seems to have its own copy of "browser.dtd" and the .properties files: https://hg.mozilla.org/l10n-central/en-GB/file/tip/browser/chrome/browser/browser.dtd.

---

I successfully built Firefox with adjusted seperator dashes.

Comment 6

[h-h]

Attachment: Bug 1279647 - Wider dash in the Firefox title bar.

This is supposed to be the beginning of a change of separator dash usages in all languages.

I will probably copy the localization note from `&mainWindow.titlemodifiermenuseparator;` in "browser.dtd" of the approved patch into the `comm-central` repo, every `l10n-central` repo and, if necessary, even more repos. Some rephrasing may be indicated, depending on the context.

I plan to research which language uses which kind of separator dash -- with Wikipedia as the main source and the em dash (—, U+2014) as the fallback. (I've already done this for summarizing purposes on the bug webpage.)

I will reference the bug webpage or the merge commit in every patch for another repo.

---

While I was at it, I restructed "browser.dtd" for improved readability. I changed indentation (alignment), paragraph width (line breaks after 80 columns) and punctuation/spelling. Every change after the definition of `&mainWindow.titlemodifiermenuseparator;` at the beginning of the file should fall into one of these categories.

To reduce the amount of changes the diff viewer displays, a reviewer should ignore whitespace changes. I used the option "Ignore all whitespace changes" in TortoiseMerge.

Additionally, to ignore line break changes in XML comments, a reviewer can apply this regex to temporary copies of the left and right files which removes just the line breaks between `<!--` and `-->`:
- Regex       (between "): "(<!--(?:(?!-->).)*?)\R *"
- Replacement (between "): "$1 " (Hit "Replace all" until there are no occurences left.)

Review commit: https://reviewboard.mozilla.org/r/246076/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/246076/

Comment 7

[h-h]

Attachment: Screenshots. 1. <title> tag with em dash

Comment 8

[h-h]

Attachment: Screenshots. 2. <title> tag with en dash

Comment 9

[h-h]

Attachment: Screenshots. 3. <title> tag with hyphen

Comment 10

[h-h]

Attachment: Screenshots. 4. Tooltip from Windows 10 fly-out window

Comment 11

[h-h]

Attachment: Screenshots. 5. Tooltip of container tab

Comment 12

[h-h]

Attachment: Screenshots. 6. Scaled image

Comment 13

[h-h]

Attachment: Screenshots. 7. Page Info dialog

Comment 14

[h-h]

Attachment: Screenshots. 8. Frame Info dialog

Comment 15

[h-h]

Attachment: Screenshots. 9. Dev tools

Comment 16

[h-h]

Note: I chose the long em dash for the en-US locale only. For other English locales as en-GB, I would choose the en dash.

Dashes are allegedly "treated differently in the US and the UK, with the former preferring the use of an em dash with no additional spacing and the latter preferring a spaced en dash. ... [A] Canadian ... recommends the spaced en dash ... In the United Kingdom, the spaced en dash is the house style for certain major publishers." (https://en.wikipedia.org/wiki/Dash#En_dash_versus_em_dash) Even though in the US no spaces around an em dash is the preferred style in running text, the evidence list I provided in an earlier comment shows that, as a separator dash in only a little bit of text, putting spaces around the em dash is obviously the preferred style.

Comment 17

[Markus Jaritz [:markus] (UX)]

Comment on attachment 8979882 [details]
Bug 1279647 - Wider dash in the Firefox title bar.

Michelle will have an opinion on what dash to use in what context.
Forwarding the ui-review to her.

Comment 18

[Matthew N. [:MattN]]

Comment on attachment 8979882 [details]
Bug 1279647 - Wider dash in the Firefox title bar.

https://reviewboard.mozilla.org/r/246076/#review252264

Note that you probably didn't need to flag so many reviewers, especially before UX and/or the content team agree to it.

::: browser/locales/en-US/chrome/browser/browser.dtd:26
(Diff revision 1)
> -<!ENTITY appmenu.tooltip                     "Open menu">
> -<!ENTITY navbarOverflow.label                "More tools…">
> +<!ENTITY appmenu.tooltip                    "Open menu">
> +<!ENTITY navbarOverflow.label               "More tools…">
>  
>  <!-- Tab context menu -->
> -<!ENTITY  reloadTab.label                    "Reload Tab">
> -<!ENTITY  reloadTab.accesskey                "R">
> -<!ENTITY  reloadAllTabs.label                "Reload All Tabs">
> -<!ENTITY  reloadAllTabs.accesskey            "A">
> +<!ENTITY reloadTab.label                    "Reload Tab">
> +<!ENTITY reloadTab.accesskey                "R">
> +<!ENTITY reloadAllTabs.label                "Reload All Tabs">
> +<!ENTITY reloadAllTabs.accesskey            "A">
>  <!-- LOCALIZATION NOTE (duplicateTab.label): This is a command to duplicate

Please revert the indentation changes to lines that you aren't actually changing the content of and keep this commit focused on the dash for easier reviewing the later reviewing of commit history. Large cleanup patches like this should be done in a separate commit but really I would discourage you from doing so as I think it's more harmful than helpful to change the blame and these strings will all be migrated to the new localization system (Fluent) eventually and that would be the best time to clean them up.

::: devtools/shared/locales/en-US/gclicommands.properties:1090
(Diff revision 1)
>  # on what it does.
>  #
>  # NOTES: The keywords collapse, expand, end-expand and expand-strict should not
>  # be translated. "even if it will break your code" means that the resulting code
>  # may no longer be functional.
> -jsbBraceStyleManual2=Select the coding style of braces: collapse - put braces on the same line as control statements; expand - put braces on own line (Allman / ANSI style); end-expand - put end braces on own line; expand-strict - put braces on own line even if it will break your code.
> +jsbBraceStyleManual2=Select the coding style of braces: collapse\u2014put braces on the same line as control statements; expand\u2014put braces on own line (Allman/ANSI style); end-expand\u2014put end braces on own line; expand-strict\u2014put braces on own line even if it will break your code.

I believe this file is going to be deleted soon as the GCLI feature is being removed (see the post on the firefox-dev mailing list).

Overall I think if this is a change that's really important to make then it's probably only worthwhile if it has a test to enforce it for future strings. See https://dxr.mozilla.org/mozilla-central/source/browser/base/content/test/static/browser_misused_characters_in_strings.js for a test you could add to. I would wait for Michelle to approve this first before doing more work on it.

Comment 19

[h-h]

Attachment: Bug 1279647 - Period instead of em dash.

Review commit: https://reviewboard.mozilla.org/r/246376/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/246376/

Comment 20

[h-h]

Comment on attachment 8980229 [details]
Bug 1279647 - Period instead of em dash.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/246376/diff/1-2/

Comment 21

[h-h]

Why does this take so long?

Comment 22

[h-h]

Firefox release page using TWO em dashes with spaces around them in the title bar: https://www.mozilla.org/en-US/firefox/54.0/releasenotes/ .

Comment 23

[Jonathan Kew [:jfkthame]]

Comment on attachment 8980229 [details]
Bug 1279647 - Period instead of em dash.

https://reviewboard.mozilla.org/r/246376/#review256822

::: dom/locales/en-US/chrome/dom/dom.properties:23
(Diff revision 2)
>  WaitForScriptButton=Continue
>  DontAskAgain=&Don’t ask me again
>  JSURLLoadBlockedWarning=Attempt to load a javascript: URL from one host\nin a window displaying content from another host\nwas blocked by the security manager.
>  WindowCloseBlockedWarning=Scripts may not close windows that were not opened by script.
>  OnBeforeUnloadTitle=Are you sure?
> -OnBeforeUnloadMessage=This page is asking you to confirm that you want to leave - data you have entered may not be saved.
> +OnBeforeUnloadMessage=This page is asking you to confirm that you want to leave\u2014data you have entered may not be saved.

Drive-by comment: ISTM a semicolon would be better than a dash here. It's not a "separator" in the sense of the other examples this patch is modifying.

Comment 24

[h-h]

Comment on attachment 8980229 [details]
Bug 1279647 - Period instead of em dash.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/246376/diff/2-3/

Comment 25

[h-h]

@ Jonathan Kew (:jfkthame)

It wasn't supposed to be a separator, but a regular em dash in running text. I just just kept the original intended punctuation from before my review commit. But I agree that an em dash at this point is a bit odd. I like semicolons, too, but I've gone a step further and changed the em dash into a period.

Comment 26

[Mike Conley (:mconley) (:⚙️)]

ni?ing to mkaply to get this looked at by someone in content strategy.

Comment 27

[Meridel [:meridel]]

I see two separators in the web page's title tag. To be clear, I believe we only control the second separator, which appears between the website and our product name (ex: between "GitPython 2.1.10 Documentation" and "Nightly").

This second separator should be an em dash, per Photon guidelines: https://design.firefox.com/photon/copy/punctuation.html

The em dash would be the standard for English. We should adjust for other locales as necessary. Flod, can you please weigh in on this issue?

Comment 28

[Francesco Lodolo [:flod]]

(In reply to Meridel from comment #27)

I see two separators in the web page's title tag. To be clear, I believe we only control the second separator, which appears between the website and our product name (ex: between "GitPython 2.1.10 Documentation" and "Nightly").

This second separator should be an em dash, per Photon guidelines: https://design.firefox.com/photon/copy/punctuation.html

The em dash would be the standard for English. We should adjust for other locales as necessary. Flod, can you please weigh in on this issue?

I'd be OK with changing the existing strings without new IDs, so that we don't invalidate existing translations (they can be updated as necessary by each locale).

Note that the patch attached here is really obsolete by now, and the window's title has different behavior depending on OS, and being in private mode. I don't know if we have it still hard-coded in some places.

Comment 29

[Mike Kaply [:mkaply]]

I'll do the new patch.

Comment 30

[Mike Kaply [:mkaply]]

Attachment: Bug 1279647 - Switch titlebar and tooltip separators to emdash.

Comment 31

[Mike Kaply [:mkaply]]

FYI, the one thing I did not change with this patch that was in the previous patch was this:

https://searchfox.org/mozilla-central/rev/9c72508fcf2bba709a5b5b9eae9da35e0c707baa/dom/locales/en-US/chrome/dom/dom.properties#22

They switch the emdash to period/new sentence which I felt was outside the scope here.

Comment 32

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/6e63ffafb422
Switch titlebar and tooltip separators to emdash. r=flod,fluent-reviewers

Comment 33

[Alexandru Michis [:malexandru]]

Backed out changeset 6e63ffafb422 (Bug 1279647) for causing multiple failures.

Backout link: https://hg.mozilla.org/integration/autoland/rev/07cdb26af0a309a0de360727d6a392ab438b5209

Push with failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&group_state=expanded&resultStatus=testfailed%2Cbusted%2Cexception%2Crunnable&tochange=07cdb26af0a309a0de360727d6a392ab438b5209&fromchange=44fea8486cb1cbd21a2ca8b167007b2f5c931cf5&selectedTaskRun=En_KVFVGRZy6YzrkSS8d7A.0

Failure logs:

• bc: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=318747581&repo=autoland&lineNumber=3380
• dt: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=318746935&repo=autoland&lineNumber=2624

Comment 34

[Mike Kaply [:mkaply]]

mach try fuzzy missed a couple tests. Repushing.

Comment 35

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7dbc11b10cb0
Switch titlebar and tooltip separators to emdash. r=flod,fluent-reviewers

Comment 36

[Razvan Maries]

https://hg.mozilla.org/mozilla-central/rev/7dbc11b10cb0

Comment 37

[TeamBlue]

This change really breaks Auto-Fill of account/passwords by tools like Keepassx(c) that uses the Window Title to propose account/passwords to Auto-Fill.

Comment 38

[Mike Kaply [:mkaply]]

Did you report the bug to them?

Comment 39

[TeamBlue]

I DID report the issue with the longer dash in firefox 83/English with the keepassxc project via

https://github.com/keepassxreboot/keepassxc/issues/5736

but I suppose the Keepassxc project can't do a lot for this bug, besides developing code to find/replace the dash to a wide dash for the whole account database. It would be a lot simpler to have a configurable window separator in Firefox accessible via a about:config.

Even if for mozilla it was a 5 year mission, this "Wider dash" surprised a lot of users.

Comment 40

[TeamBlue]

bug / feature request at Keepassxc to avoid duplicates :

https://github.com/keepassxreboot/keepassxc/issues/5735