Skip to content

Avoid orphaned punctuation using non-breaking whitespace #11929

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aduth merged 2 commits into from
Feb 27, 2025
Merged

Avoid orphaned punctuation using non-breaking whitespace #11929

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
88114ef
Avoid orphaned punctuation using non-breaking whitespace
aduth Feb 27, 2025
ebf8214
Inline lock icon rendering in banner
aduth Feb 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 0 additions & 7 deletions app/views/shared/_banner-lock-icon.html.erb
View file
Open in desktop

This file was deleted.

12 changes: 11 additions & 1 deletion app/views/shared/_banner.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,17 @@
<div class="usa-media-block__body">
<p>
<strong><%= t('shared.banner.secure_heading') %></strong>
<br> <%= t('shared.banner.secure_description_html', lock_icon: render('shared/banner-lock-icon')) %>
<br>
<%= t(
'shared.banner.secure_description_html',
lock_icon: image_tag(
asset_path('lock.svg'),
width: 9,
height: 12,
class: 'usa-banner__lock-image',
alt: t('shared.banner.lock_description'),
),
) %>
Comment on lines -52 to +62
Copy link
Copy Markdown
Contributor Author

@aduth aduth Feb 27, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change addresses an edge-case where we previously relied on HTML whitespace collapsing with the space around the embedded lock and the final newline of the lock icon partial file. Using non-breaking spaces, the collapse doesn't occur, and therefore without these changes there's a slight increase in the amount of space to the right of the icon. The fix here inlines the icon rendering to avoid the trailing newline from the partial.

Before After
image image

It might also have a slight performance benefit of avoiding another partial load, and avoids some indirection for a partial that's not otherwise reused outside the banner.

</p>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion config/locales/en.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1561,7 +1561,7 @@ shared.banner.how: Here’s how you know
shared.banner.landmark_label: Official government website
shared.banner.lock_description: A locked padlock
shared.banner.official_site: An official website of the United States government
shared.banner.secure_description_html: A <strong>lock</strong> ( %{lock_icon} ) or <strong>https://</strong> means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.
shared.banner.secure_description_html: A <strong>lock</strong> ( %{lock_icon} ) or <strong>https://</strong> means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.
shared.banner.secure_heading: Secure .gov websites use HTTPS
shared.footer_lite.gsa: US General Services Administration
shared.skip_link: Skip to main content
Expand Down
2 changes: 1 addition & 1 deletion config/locales/es.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1573,7 +1573,7 @@ shared.banner.how: Así es como usted puede saberlo
shared.banner.landmark_label: Sitio web oficial del Gobierno
shared.banner.lock_description: Un candado cerrado
shared.banner.official_site: Un sitio web oficial del Gobierno de los Estados Unidos
shared.banner.secure_description_html: Un <strong>candado</strong> ( %{lock_icon} ) o <strong>https://</strong> significa que se conectó de forma segura a un sitio web .gov. Comunique información confidencial solo en los sitios web oficiales protegidos.
shared.banner.secure_description_html: Un <strong>candado</strong> ( %{lock_icon} ) o <strong>https://</strong> significa que se conectó de forma segura a un sitio web .gov. Comunique información confidencial solo en los sitios web oficiales protegidos.
shared.banner.secure_heading: Los sitios web .gov protegidos usan HTTPS
shared.footer_lite.gsa: Administración General de Servicios de los EE. UU.
shared.skip_link: Saltar al contenido principal
Expand Down
6 changes: 3 additions & 3 deletions config/locales/fr.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1477,11 +1477,11 @@ notices.signed_up_but_unconfirmed.first_paragraph_end: avec un lien pour confirm
notices.signed_up_but_unconfirmed.first_paragraph_start: Nous avons envoyé un e-mail à
notices.signed_up_but_unconfirmed.resend_confirmation_email: Renvoyer le courriel de confirmation
notices.timeout_warning.partially_signed_in.continue: Continuer la connexion
notices.timeout_warning.partially_signed_in.live_region_message_html: Vous serez déconnecté dans %{time_left_in_session_html}. Sélectionnez « Gardez ma connexion active » pour rester connecté. Sélectionnez « Déconnectez-moi » pour vous déconnecter.
notices.timeout_warning.partially_signed_in.live_region_message_html: Vous serez déconnecté dans %{time_left_in_session_html}. Sélectionnez « Gardez ma connexion active » pour rester connecté. Sélectionnez « Déconnectez-moi » pour vous déconnecter.
notices.timeout_warning.partially_signed_in.message_html: Pour votre sécurité, nous annulerons votre connexion dans %{time_left_in_session_html}.
notices.timeout_warning.partially_signed_in.sign_out: Annuler la connexion
notices.timeout_warning.signed_in.continue: Gardez ma connexion active
notices.timeout_warning.signed_in.live_region_message_html: Vous serez déconnecté dans %{time_left_in_session_html}. Sélectionnez « Gardez ma connexion active » pour rester connecté. Sélectionnez « Déconnectez-moi » pour vous déconnecter.
notices.timeout_warning.signed_in.live_region_message_html: Vous serez déconnecté dans %{time_left_in_session_html}. Sélectionnez « Gardez ma connexion active » pour rester connecté. Sélectionnez « Déconnectez-moi » pour vous déconnecter.
notices.timeout_warning.signed_in.message_html: Pour votre sécurité, nous vous déconnecterons dans %{time_left_in_session_html}, sauf en cas d’avis contraire de votre part.
notices.timeout_warning.signed_in.sign_out: Déconnectez-moi
notices.totp_configured: Une appli d’authentification a été ajoutée à votre compte.
Expand Down Expand Up @@ -1561,7 +1561,7 @@ shared.banner.how: Voici comment le savoir
shared.banner.landmark_label: Site Web officiel des autorités
shared.banner.lock_description: Un cadenas fermé
shared.banner.official_site: Un site Web officiel de l’administration des États-Unis
shared.banner.secure_description_html: La présence d’un <strong>cadenas</strong> ( %{lock_icon} ) ou de <strong>https://</strong> signifie que vous êtes connecté en toute sécurité au site Web .gov. Ne partagez des informations sensibles que sur des sites Web officiels et sécurisés.
shared.banner.secure_description_html: La présence d’un <strong>cadenas</strong> ( %{lock_icon} ) ou de <strong>https://</strong> signifie que vous êtes connecté en toute sécurité au site Web .gov. Ne partagez des informations sensibles que sur des sites Web officiels et sécurisés.
shared.banner.secure_heading: Les sites Web sécurisés .gov utilisent HTTPS
shared.footer_lite.gsa: Administration des services généraux des États-Unis
shared.skip_link: Passer au contenu principal
Expand Down
2 changes: 1 addition & 1 deletion config/locales/zh.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1574,7 +1574,7 @@ shared.banner.how: 这里告诉你如何知道
shared.banner.landmark_label: 官方政府网站
shared.banner.lock_description: 锁上的锁头
shared.banner.official_site: 美国政府的一个官方网站
shared.banner.secure_description_html: 一把 <strong>锁</strong>（ %{lock_icon} ）或者 <strong>https://</strong> 意味着你已安全连接到 .gov 网站。只在官方、安全的网站上分享敏感信息。
shared.banner.secure_description_html: 一把 <strong>锁</strong>（ %{lock_icon} ）或者 <strong>https://</strong> 意味着你已安全连接到 .gov 网站。只在官方、安全的网站上分享敏感信息。
shared.banner.secure_heading: 安全的 .gov 网站使用 HTTPS
shared.footer_lite.gsa: 美国联邦总务管理局
shared.skip_link: 跳到主要内容
Expand Down
30 changes: 30 additions & 0 deletions spec/i18n_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
'<' => '>',
'（' => '）',
'“' => '”',
'«' => '»',
}.freeze

# A set of patterns which are expected to only occur within specific locales. This is an imperfect
Expand Down Expand Up @@ -182,6 +183,35 @@ def allowed_untranslated_key?(locale, key)
)
end

it 'does not leave orphaned punctuation characters' do
patterns = PUNCTUATION_PAIRS.flat_map do |opening_punctuation, closing_punctuation|
[
/#{Regexp.escape(opening_punctuation)}\s+/,
/\s+#{Regexp.escape(closing_punctuation)}/,
]
end
pattern = Regexp.union(patterns)

orphaned_whitespace = []
i18n.locales.each do |locale|
i18n.data[locale].key_values.each do |key, value|
Array(value).each do |value|
next if !pattern.match?(value)
orphaned_whitespace.push("#{[locale, key].join('.')}: #{value}")
end
end
end

expect(orphaned_whitespace).to(
be_empty,
<<~STR,
Unexpected orphaned punctuation. Ensure that you use non-breaking whitespace within punctuation characters (` ` unicode character or `&nbsp;` HTML entity).

#{orphaned_whitespace.join("\n")}"
STR
)
end

it 'does not have missing keys' do
expect(missing_keys).to(
be_empty,
Expand Down