561456 - HTML(&nbsp) visible in "what's this?" link in "fr" locale

Status: RESOLVED FIXED

(addons.mozilla.org Graveyard :: Localization, defect, P3)

Description

[krupa raj[:krupa]]

Attachment: screenshot

steps to reproduce:
1.Go to https://preview.addons.mozilla.org/fr/firefox/addon/5677/
2.Notice the what's this? link near "Add to a collection" section

observed behavior:
In french locale,HTML for non-breaking space is visible.See screenshot


This bug does NOT happen in prod(https://addons.mozilla.org/fr/firefox/addon/5677/)

Comment 1

[Wil Clouser [:clouserw]]

This is caused because the fr locale is using   in their msgstr's and we're escaping that in our templates.  Basic rule is, if the English string doesn't have HTML, it's going to be escaped.  This is a security consideration.

I'm assigning this to Alexandre to fix it or comment.  Our code freeze is Tuesday so if there isn't a plan by then, I'll just replace all " " in the file with " ".  Or let me know if you want me to do that anyway.

Comment 2

[:gerard-majax]

I'll review all   usage this week end, as I'll have no other time to do it before tuesday :)

Comment 3

[:gerard-majax]

That should be good, I removed all   that weren't in strings using HTML.

Comment 4

[krupa raj[:krupa]]

This fixed the problem mentioned in comment#0,but changed the formatting of this section.Now the colon besides the "Add to a collection" is in the next line which seems odd.Reopening this bug.I can file a new bug,if necessary.Let me know.

Comment 5

[krupa raj[:krupa]]

Attachment: Formatting of the section-post fix

Comment 6

[Wil Clouser [:clouserw]]

Yeah, that's what the   was avoiding.  Alexandre: Can this text be shorter?  I'm also CCing craig - can we put something in CSS that tells this not to wrap?

Comment 7

[Pascal Chevrel:pascalc]

Note that there is an … entity also visible in the select field. Ajout à une sélection is a possibility and would be 2 letters shorter, but I don't think it can be shorter than that

Comment 8

[:gerard-majax]

The HTML entity has been removed (from every string that has no HTML in the msgid), as reported in bug 562099.

Comment 9

[Wil Clouser [:clouserw]]

This doesn't block 5.10; kicking out

Comment 10

[Wil Clouser [:clouserw]]

CCing potch to see if there is a CSS fix

Comment 11

[Craig Cook (:craigcook)]

(In reply to comment #6)
> Yeah, that's what the   was avoiding.  Alexandre: Can this text be
> shorter?  I'm also CCing craig - can we put something in CSS that tells this
> not to wrap?

The only way to prevent wrapping with CSS is white-space: nowrap, but that can trigger overflow problems when text runs long (usually we want text to wrap in narrow spaces). It seems to me that the more obvious fix is better punctuation. 

The colon should come after the word "collection", not after the "what's this?" link ("Add to collection:" not "Add to collection what's this? :"). 

There probably shouldn't be a space (non-breaking or otherwise) between the end of a question and the question mark ("what's this?" not "what's this ?"). 

I'm seeing other instances of spaced-out terminal punctuation throughout the French site. For example, on that same page, "Besoin d'aide avec ce module ?" and "Qu'en pensez-vous ?" both have a space between the final word and the question mark. If there's no space on which to break, then there won't be any widowed punctuation. But I can't read or write French, so if a space before punctuation is proper French grammar then I stand corrected. It seems wrong to me.

However, the "what's this?" link itself might break in the middle, especially since it's long in French, and that would look bad. So it might be best to set white-space: nowrap on just the link, but not on the whole heading. Then we'd see something like (but in French, of course)...

Add to collection:
What's this?

Which is better than...

Add to collection: What's 
this?

Comment 12

[Wil Clouser [:clouserw]]

Hey Craig, thanks for the comment.

> The only way to prevent wrapping with CSS is white-space: nowrap, but that can
> trigger overflow problems when text runs long (usually we want text to wrap in
> narrow spaces). It seems to me that the more obvious fix is better punctuation. 
> 
> The colon should come after the word "collection", not after the "what's this?"
> link ("Add to collection:" not "Add to collection what's this? :"). 

It does in the code, this looks like a style thing.  Code is:
<a href="/fr/firefox/collections" class="what">
 Qu&#39;est-ce que c&#39;est ?
</a>
<h3>
 <label for="publish_to">Ajouter à une collection :</label>
</h3>

> There probably shouldn't be a space (non-breaking or otherwise) between the end
> of a question and the question mark ("what's this?" not "what's this ?"). 
> 
> I'm seeing other instances of spaced-out terminal punctuation throughout the
> French site. For example, on that same page, "Besoin d'aide avec ce module ?"
> and "Qu'en pensez-vous ?" both have a space between the final word and the
> question mark. If there's no space on which to break, then there won't be any
> widowed punctuation. But I can't read or write French, so if a space before
> punctuation is proper French grammar then I stand corrected. It seems wrong to
> me.

That's how French rolls - space before punctuation is right.

> However, the "what's this?" link itself might break in the middle, especially
> since it's long in French, and that would look bad. So it might be best to set
> white-space: nowrap on just the link, but not on the whole heading. Then we'd
> see something like (but in French, of course)...
> 
> Add to collection:
> What's this?
> 
> Which is better than...
> 
> Add to collection: What's 
> this?

I think that would be great.  I'm fine with having it on two lines.

Comment 13

[Wil Clouser [:clouserw]]

There was some discussion on IRC about this, and someone (potch?) thought it would be a good idea to use the actual UTF-8 character for non breaking spaces (U+00A0) which would pass through as expected (I think!).  What do you guys think about that to avoid encoding and layout issues?

Comment 14

[Wil Clouser [:clouserw]]

UI has changed.  If this comes up again we can pursue comment 13.