Skip to content

Conversation

@epetrow
Copy link
Contributor

@epetrow epetrow commented Oct 22, 2025

closes: #5639

Overview

The usage of unicode characters has intermittently caused issues with strange looking charactes sometimes being displayed. At the moment this can be observed when using the themes from unpkg, where the problem is related to encoding. Since we are minifying the all.css file and relying on SASS's --style=compressed option to do so the @charset declaration at the top of the file is being removed (which is stardard behaviour). The problem stems from the lack of charset in the content-type header of the files from unpkg, but we do not seem to have control over that.

\200b unicode usage patterns

There are two main usage patters for the zero-width space unicode character at the moment:

  1. Wrapper elements (checkbox-wrap, radio-wrap, icon-wrap) - Use ::before with \200b to establish minimum height for flex containers
  2. Text elements (input-value-text, list-item-text, window-title) - Use ::before or &:empty::before with \200b to prevent collapse

What has been tried

  1. Simply removing the unicode character is not a solution because the outlined usage patters break and there are visual degradations. The same can be said about replacing \200b with a simple space " "
  2. Release CSS files that contain "\200b" rather than a special invisible character - We can tell SASS not to parse the zero-width space character and escape it with \\200b however this would cause the literal characters \200b to be displayed.
  3. Set explicit height equal to the calculated line height: This could work, but we should probably use the lh unit instead of calculating the line height ourselves (e.g. var(--kendo-font-size) * var(--kendo-line-height). I have tried the second approach and there are some edge cases that are tricky and in general it does not seem like a good solution since if someone customizes either of these css variables the content will shift (e.g. checkboxes inside ActionSheet).
  4. Explicitly add @charset after minification - We could have some script or use a tool like PostCSS to add the @charset that is being stripped, but that needs to be tested after we ship the css files to unpkg.

@epetrow epetrow requested a review from a team as a code owner October 22, 2025 14:01
@epetrow epetrow self-assigned this Oct 22, 2025
@github-actions
Copy link

github-actions bot commented Oct 22, 2025

Packages Report

core default classic bootstrap material fluent utils html
Size 29.20 KB (0.0%) 769.53 KB (0.0%🔼) 768.24 KB (0.0%🔼) 783.02 KB (0.0%🔼) 916.25 KB (0.0%🔼) 1181.63 KB (0.0%🔼) 625.19 KB (0.0%) 77.78 MB (0.0%)
Gzip Size 4.85 KB (0.0%) 99.38 KB (0.0%) 99.62 KB (-0.0%🔽) 101.32 KB (-0.0%🔽) 112.31 KB (-0.0%🔽) 136.80 KB (0.0%) 52.16 KB (0.0%) 15.95 MB (0.0%)
Compile Time 0.9 s (0.0%) 3.0 s (0.0%) 3.1 s (0.0%) 2.9 s (0.0%) 3.1 s (0.0%) 3.6 s (0.0%) 2.7 s (0.0%) 8.5 s (0.0%)

@epetrow epetrow force-pushed the remove-zwsp branch 2 times, most recently from 16da677 to 2e8318f Compare October 22, 2025 15:20
@epetrow epetrow marked this pull request as draft October 22, 2025 15:27
@epetrow epetrow force-pushed the remove-zwsp branch 10 times, most recently from 85b7edf to 69ecace Compare October 23, 2025 12:26
@epetrow epetrow marked this pull request as ready for review October 23, 2025 13:05
@epetrow epetrow requested a review from Copilot October 23, 2025 13:06
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR removes the use of zero-width space (ZWSP) Unicode character (\200b) across theme components and replaces it with proper CSS height calculations to maintain layout consistency.

Key Changes

  • Replaced all instances of content: "\200b" with content: ""
  • Added explicit height calculations using font-size and line-height variables to preserve spacing behavior
  • Fixed initialization of $kendo-input-sizes variable from null to empty map ()

Reviewed Changes

Copilot reviewed 15 out of 42 changed files in this pull request and generated no comments.

Show a summary per file
File Description
packages/core/scss/components/window/_layout.scss Replaced ZWSP with explicit height calculation for empty window titles
packages/core/scss/components/timeselector/_layout.scss Removed ZWSP from timeselector pseudo-elements
packages/core/scss/components/table/_layout.scss Added height calculation and box-sizing for table group rows
packages/core/scss/components/skeleton/_layout.scss Replaced ZWSP with inline-block display for skeleton text
packages/core/scss/components/radio/_layout.scss Added height calculation for radio button wrapper
packages/core/scss/components/list/_layout.scss Removed ZWSP from list elements
packages/core/scss/components/input/_variables.scss Changed $kendo-input-sizes default from null to empty map
packages/core/scss/components/input/_layout.scss Removed ZWSP from input value text
packages/core/scss/components/icons/_layout.scss Added height calculation for icon wrapper
packages/core/scss/components/gantt/_layout.scss Removed ZWSP from gantt table cells
packages/core/scss/components/dropdowntree/_layout.scss Added size-specific height calculations for multiselecttree
packages/core/scss/components/column-menu/_layout.scss Added height calculation for checkbox wrapper in column menu
packages/core/scss/components/checkbox/_layout.scss Added height calculation for checkbox wrapper
packages/core/scss/components/calendar/_layout.scss Removed ZWSP from calendar pseudo-elements
packages/core/scss/components/action-sheet/_layout.scss Added height calculations for icon and checkbox wrappers

@epetrow epetrow force-pushed the remove-zwsp branch 4 times, most recently from e06db0f to 6992b92 Compare October 24, 2025 08:56
@epetrow epetrow marked this pull request as draft October 24, 2025 10:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] Unprintable symbol in classic-silver theme coming from unpkg

3 participants