Make WordPress Core

Opened 5 years ago

Closed 4 months ago

#48062 closed defect (bug) (wontfix)

Twenty Nineteen: "NonBreakingSpaceOverride" breaks "ch" CSS unit

Reported by: andy-schmidt's profile Andy Schmidt Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.2.3
Component: Bundled Theme Keywords: dev-feedback 2nd-opinion close
Focuses: Cc:

Description

Took me a while to figure out why some of our columnar layouts were all broken and wrapping in odd places with the new theme. Turns out, the Twenty Nineteen theme prevents usage of the "ch" CSS unit, because it replies on your "NonBreakSpaceOverride" font.

In Chrome, Mobile Safari (and Edge/IE11), the ch width is calculated as TWICE the correct width vs. the native Hoefler font. In Firefox it renders identical.

On the other hand, the ex width is calculated slightly smaller (incl. Firefox, but NOT Mobile Safari), but that would be tolerable.

This sample page will render the FIRST set of DIVs precisely - the SECOND set of DIVs demonstrates the problem:

<html>
	<head>
		<style>
			@font-face {
			  font-family: 'NonBreakingSpaceOverride';
			  src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMoAA0AAAAACDQAAALTAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCahEICjx3CywAATYCJANUBCAFhiEHgWwbXQfILgpsY+rQRRARwyAs6uL7pxzYhxEE+32b3aeHmifR6tklkS9hiZA0ewkqGRJE+H7/+6378ASViK/PGeavqJyOzsceKi1s3BCiQsiOdn1r/RBgIJYEgCUhbm/8/8/h4saPssnTNkkiWUBrTRtjmQSajw3Ui3pZ3LYDPD+XG2C3JA/yKAS8/rU5eNfuGqRf4eNNgV4YAlIIgxglEkWe6FYpq10+wi3g+/nUgvgPFczNrz/RsTgVm/zfbPuHZlsuQECxuyqBcQwKFBjFgKO8AqP4bAN9tFJtnM9xPcbNjeXS/x1wY/xU52f5W/X1+9cnH4YwKIaoRRAkUkj/YlAAeF/624foiIDBgBmgQBeGAyhBljUPZUm/l2dTvmpqcBDUOHdbPZWd8JsBAsGr4w8/EDn82/bUPx4eh0YNrQTBuHO2FjQEAGBwK0DeI37DpQVqdERS4gZBhpeUhWCfLFz7J99aEBgsJCHvUGAdAPp4IADDCAPCEFMGpMZ9AQpTfQtQGhLbGVBZFV8BaqNyP68oTZgHNj3M8kBPfXTTC9t90UuzYhy9ciH0grVlOcqyCytisvbsERsEYztiznR0WCrmTksJwbSNK6fd1Rvr25I9oLvctUoEbNOmXJbqgYgPXEHJ82IUsrCnpkxh23F1rfZ2zcRnJYoXtauB3VTFkFXQg3uoZYD5qE0kdjDtoDoF1h2bulGmev5HbYhbrjtohQSRI4aNOkffIcT+d3v6atpaYh3JvPoQsztCcqvaBkppDSPcQ3bw3KaCBo1f5CJWTZEgW3LjLofYg51MaVezrx8xZitYbQ9KYeoRaqQdVLwSEfrKXLK1otCWOKNdR/YwYAfon5Yk8O2MJfSD10dPGA5PIJJQMkah0ugMJiv6x4Dm7LEa8xnrRGGGLAg4sAlbsA07sAt76DOsXKO3hIjtIlpnnFrt1qW4kh6NhS83P/6HB/fl1SMAAA==) format("woff2"), url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAUQAA0AAAAACDQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAE9AAAABwAAAAchf5yU0dERUYAAATYAAAAHAAAAB4AJwAbT1MvMgAAAaAAAABJAAAAYJAcgU5jbWFwAAACIAAAAF4AAAFqUUxBZ2dhc3AAAATQAAAACAAAAAgAAAAQZ2x5ZgAAApAAAAAyAAAAPL0n8y9oZWFkAAABMAAAADAAAAA2Fi93Z2hoZWEAAAFgAAAAHQAAACQOSgWaaG10eAAAAewAAAAzAAAAVC7TAQBsb2NhAAACgAAAABAAAAAsAOQBAm1heHAAAAGAAAAAHQAAACAAWQALbmFtZQAAAsQAAAF6AAADIYvD/Adwb3N0AAAEQAAAAI4AAADsapk2o3jaY2BkYGAA4ov5mwzj+W2+MnCzXwCKMNzgCBSB0LfbQDQ7AxuI4mBgAlEAFKQIRHjaY2BkYGD3+NvCwMDBAALsDAyMDKhAFAA3+wH3AAAAeNpjYGRgYBBl4GBgYgABEMnIABJzAPMZAAVmAGUAAAB42mNgZlJhnMDAysDCKsKygYGBYRqEZtrDYMT4D8gHSmEHjgUFOQwODAqqf9g9/rYwMLB7MNUAhRlBcsxBrMlASoGBEQAj8QtyAAAAeNrjYGBkAAGmWQwMjO8gmBnIZ2NA0ExAzNjAAFYJVn0ASBsD6VAIDZb7AtELAgANIgb9AHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMCwQIFLQV8hXvXP//9AcRCfAcb///h/ygPW+w/vb7olBjUHCTCyMcAFGZmABBO6AogThgZgIUsXAEDcEzcAAHjaY2BgECMCyoEgACZaAed42mNgYmRgYGBnYGNgYAZSDJqMgorCgoqCjECRXwwNrCAKSP5mAAFGBiRgyAAAi/YFBQAAeNqtkc1OwkAUhU/5M25cEhcsZick0AwlBJq6MWwgJkAgYV/KAA2lJeUn+hY+gktXvpKv4dLTMqKycGHsTZNv7px7z50ZAFd4hYHjdw1Ls4EiHjVncIFnzVnc4F1zDkWjrzmPW+NNcwGlzIRKI3fJlUyrEjZQxb3mDH2fNGfRx4vmHKqG0JzHg6E0F9DOlFBGBxUI1GEzLNT4S0aLuTtsGAEUuYcQHkyg3KmIum1bNUvKlrjbbAIleqHHnS4iSudpQcySMYtdFiXlAxzSbAwfMxK6kZoHKhbjjespMTioOPZnzI+4ucCeTVyKMVKLfeAS6vSWaTinuZwzyy/Dc7vaed+6KaV0kukdPUk6yOcctZPvvxxqksq2lEW8RvHjMEO2FCl/zy6p3NEm0R9OFSafJdldc4QVeyaaObMBO0/5cCaa6d9Ggyubxire+lEojscdjoWUR1xGOy8KD8mG2ZLO2l2paDc3A39qmU2z2W5YNv5+u79e6QfGJY/hAAB42m3NywrCMBQE0DupWp/1AYI7/6DEaLQu66Mrd35BKUWKJSlFv1+rue4cGM7shgR981qSon+ZNwUJ8iDgoYU2OvDRRQ99DDDECAHGmGCKmf80hZSx/Kik/LliFbtmN6xmt+yOjdg9GztV4tROnRwX/Bsaaw51nt4Lc7tWaZYHp/MlzKx51LZs5htNri+2AAAAAQAB//8AD3jaY2BkYGDgAWIxIGZiYARCESBmAfMYAAR6AEMAAAABAAAAANXtRbgAAAAA2AhRFAAAAADYCNuG) format("woff");
			}

			.hoefler {
				font-family: "Hoefler Text";
			}

			.nbspover {
				font-family: "NonBreakingSpaceOverride", "Hoefler Text";
			}
			
			.w20ch {
				width: 20ch;
				height: 1em;
				border: 1px solid red;
			}

			.w20ex {
				width: 20ex;
				height: 1em;
				border: 1px solid green;
			}
		</style>
	</head>
	<body>
		<div class="hoefler">
			<p>00000000000000000000</p>
			<p>xxxxxxxxxxxxxxxxxxxx</p>
			<div class="w20ch">&nbsp;</div>
			<div class="w20ex">&nbsp;</div>
		</div>
		<div class="nbspover">
			<p>00000000000000000000</p>
			<p>xxxxxxxxxxxxxxxxxxxx</p>
			<div class="w20ch">&nbsp;</div>
			<div class="w20ex">&nbsp;</div>
		</div>
	</body>
</html>

Change History (10)

#1 @SergeyBiryukov
5 years ago

  • Component changed from Themes to Bundled Theme

#2 @SergeyBiryukov
5 years ago

  • Summary changed from "NonBreakingSpaceOverride" of Twenty Nineteen theme breaks "ch" CSS unit to Twenty Nineteen: "NonBreakingSpaceOverride" breaks "ch" CSS unit

This ticket was mentioned in Slack in #core-themes by joyously. View the logs.


5 years ago

This ticket was mentioned in Slack in #core-themes by niels. View the logs.


5 years ago

#5 @poena
10 months ago

  • Severity changed from major to normal

Twenty Twenty also use the NonBreakingSpaceOverride. It was discussed during the development of the theme in this GitHub issue #347, but no solution was found.

#6 @karmatosed
7 months ago

  • Keywords dev-feedback needs-testing added

#7 @karmatosed
5 months ago

  • Milestone changed from Awaiting Review to Future Release

#8 @karmatosed
5 months ago

  • Keywords 2nd-opinion added; needs-testing removed

I think this needs opinions and consideration at this point, so adding that keyword. We ideally need a consensus and that either is going to be to agree this is the way both themes do this or to fix both.

#9 @karmatosed
4 months ago

  • Keywords close added

For now I would recommend that this is closed as this was also in another theme and to change this now seems to me like it would impact an existing theme(s) too much. I am more than happy for that to be countered though, that said we should be ok about closing and moving on with a decision.

#10 @karmatosed
4 months ago

  • Milestone Future Release deleted
  • Resolution set to wontfix
  • Status changed from new to closed

I am going to follow through with closing this thank you everyone. We can always consider reopening. Thank you everyone for your collaboration.

Note: See TracTickets for help on using tickets.