Defect #32829

HTML entity is used in CSS string

Added by Alexander Sapozhnikov 9 months ago. Updated 9 months ago.

Status:ClosedStart date:
Priority:NormalDue date:
Assignee:Go MAEDA% Done:

0%

Category:UI
Target version:4.0.7
Resolution:Fixed Affected version:3.3.0

Description

Ordering handles (green arrows ↕) at some administrative pages contains HTML entity   instead of inivisible character of non-breaking space:

Screenshot of page and inspector

Affected pages

  • /roles
  • /trackers
  • /issue_statuses
  • /enumerations
  • /custom_fields

Configuration

How to fix

Edit public/stylesheets/application.css:

.icon-only::after {
  content: " ";
}

replace   with

  • non-breaking space
    or
  • \a0

redmine-410-nbsp.png - Screenshot of page and inspector (38.9 KB) Alexander Sapozhnikov, 2020-01-17 01:09

application-css.patch Magnifier (200 Bytes) Alexander Sapozhnikov, 2020-01-17 01:34

roles-no-problem@2x.png (48.6 KB) Go MAEDA, 2020-01-19 05:56

issue-32829-hidden.png - Hidden entities (33.3 KB) Alexander Sapozhnikov, 2020-01-19 21:56


Related issues

Related to Redmine - Patch #21805: Improve accessibility for icon-only links Closed

Associated revisions

Revision 19440
Added by Go MAEDA 9 months ago

Remove an HTML entity that cannot be used in a CSS string (#32829).

Patch by Alexander Sapozhnikov.

Revision 19441
Added by Go MAEDA 9 months ago

Merged r19440 from trunk to 4.1-stable (#32829).

Revision 19442
Added by Go MAEDA 9 months ago

Merged r19440 from trunk to 4.0-stable (#32829).

History

#1 Updated by Alexander Sapozhnikov 9 months ago

--- application.css~    2019-12-20 17:19:46.000000000 +0500
+++ application.css    2020-01-17 05:28:57.819227647 +0500
@@ -1458,3 +1458,3 @@
 .icon-only::after {
-  content: " ";
+  content: "\a0";
 }

#2 Updated by Go MAEDA 9 months ago

I cannot reproduce the problem. Could you test again without third-party plugins and a theme?

#3 Updated by Alexander Sapozhnikov 9 months ago

I’ve checked with Alternate and Classic themes — there are no visible characters

Hidden entities

But anyway HTML entity should be replaced with allowed character or escape sequence.

https://developer.mozilla.org/en-US/docs/Web/CSS/string

Most characters can be represented literally. All characters can also be represented with their respective Unicode code points in hexadecimal, in which case they are preceded by a backslash (\). For example, \22 represents a double quote, \27 a single quote ('), and \A9 the copyright symbol (©).

Note: HTML entities (such as &nbsp; or &#8212;) cannot be used in a CSS <string>.

See also:

#4 Updated by Go MAEDA 9 months ago

  • Target version set to 4.1.1

Alexander Sapozhnikov wrote:

But anyway HTML entity should be replaced with allowed character or escape sequence.

https://developer.mozilla.org/en-US/docs/Web/CSS/string

Most characters can be represented literally. All characters can also be represented with their respective Unicode code points in hexadecimal, in which case they are preceded by a backslash (\). For example, \22 represents a double quote, \27 a single quote ('), and \A9 the copyright symbol (©).

Note: HTML entities (such as &nbsp; or &#8212;) cannot be used in a CSS <string>.

Thank you for giving me the information. I didn't know that.

Setting the target version to 4.1.1.

#5 Updated by Go MAEDA 9 months ago

  • Target version changed from 4.1.1 to 4.0.7
  • Affected version changed from 4.1.0 to 3.3.0

The change has been made in r15271 (Redmine 3.3.0). Updating the target version to 4.0.7.

#6 Updated by Go MAEDA 9 months ago

  • Related to Patch #21805: Improve accessibility for icon-only links added

#7 Updated by Go MAEDA 9 months ago

  • Subject changed from HTML entities instead of non-breaking space near ordering handles to HTML entity is used in CSS string
  • Status changed from New to Closed
  • Assignee set to Go MAEDA
  • Resolution set to Fixed

Committed the patch. Thank you for posting the patch.

Also available in: Atom PDF