Closed Bug 1279647 Opened 7 years ago Closed 2 years ago

Wider dash in the Firefox title bar

Categories

(Firefox :: General, defect)

defect
Not set
normal

Tracking

()

RESOLVED FIXED

People

(Reporter: henrik.hank, Assigned: mkaply)

References

(Regressed 1 open bug)

Details

(Whiteboard: [gfx-noted])

Attachments

(11 files, 2 obsolete files)

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.
Attached image How_ironic.png (obsolete) —
How ironic!
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).
OS: Unspecified → All
Hardware: Unspecified → All
Component: Untriaged → Graphics: Text
Product: Firefox → Core
Whiteboard: [gfx-noted]
Status: UNCONFIRMED → NEW
Ever confirmed: true
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
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.
Component: Graphics: Text → General
Priority: P3 → --
Product: Core → Firefox
> 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.
Attachment #8762228 - Attachment is obsolete: true
Attachment #8979882 - Flags: ui-review?(ux-review)
Attachment #8979882 - Flags: review?(past)
Attachment #8979882 - Flags: review?(markh)
Attachment #8979882 - Flags: review?(dolske)
Attachment #8979882 - Flags: review?(MattN+bmo)
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 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.
Attachment #8979882 - Flags: ui-review?(ux-review) → ui-review?(mheubusch)
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.
Attachment #8979882 - Flags: review?(MattN+bmo)
Attachment #8979882 - Flags: review?(past)
Attachment #8979882 - Flags: review?(markh)
Attachment #8979882 - Flags: review?(dolske)
Attachment #8979882 - Attachment is obsolete: true
Attachment #8979882 - Flags: ui-review?(mheubusch)
Attachment #8980229 - Flags: ui-review?(mheubusch)
Why does this take so long?
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 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.
@ 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.
Attachment #8980229 - Flags: ui-review?(ux-review)
Attachment #8980229 - Flags: ui-review?(mheubusch)

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

Flags: needinfo?(mozilla)
Attachment #8980229 - Flags: ui-review?(ux-review)
Attachment #8980229 - Flags: ui-review?(mheubusch)

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?

Flags: needinfo?(francesco.lodolo)

(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.

Flags: needinfo?(francesco.lodolo)

I'll do the new patch.

Assignee: nobody → mozilla
Status: NEW → RESOLVED
Closed: 2 years ago
Flags: needinfo?(mozilla)
Resolution: --- → FIXED

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.

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

mach try fuzzy missed a couple tests. Repushing.

Flags: needinfo?(mozilla)
Pushed by mozilla@kaply.com:
https://hg.mozilla.org/integration/autoland/rev/7dbc11b10cb0
Switch titlebar and tooltip separators to emdash. r=flod,fluent-reviewers
Regressions: 1671752

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.

Did you report the bug to them?

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.

bug / feature request at Keepassxc to avoid duplicates :

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

See Also: → 1679182
Regressions: 1679286
See Also: → 1751584
Regressions: 1679182
You need to log in before you can comment on or make changes to this bug.