[css-text-4] Japanese text (in #jp-title-break) in Example 24 is unreadable, with dark color-scheme

[dholbert]

If you view https://drafts.csswg.org/css-text-4/#jp-title-break with a dark color-scheme-preference in your browser, the Japanese text in the example is barely readable (light-gray-on-white-background).

This is because that section sets background while letting the default color be inherited through; and if you do that, you end up with a light color in a dark-color-scheme.

Here's the relevant style rule in the markup for this page -- note that we're setting background but not setting color:

csswg-drafts/css-text-4/Overview.bs

Lines 6874 to 6885 in 8932d2e

	<div class="example" id=jp-title-break>
	<style>
	#jp-title-break td samp,
	#jp-title-break td pre {
	font-size: 1.5em;
	width: 6em;
	line-height: 2;
	padding: 0.5em 1em;
	display: block;
	margin: auto;
	border: solid gray 1px;
	background: white;

We perhaps want to add color:black or similar, just before background:white, so that we're not at the mercy of the inherited color-scheme-defined text-color here (which may or may not be hardcoded white background).

[dholbert]

(This is similar to speced/bikeshed#2922 which is about img alt-text being unreadable due to a similar background:white rule that Bikeshed itself applies behind images. Though in that bug, the unreadable alt-text eventually gets replaced with an image [assuming things work out properly], so it's a bit less noticeable.)

[dholbert]

Here's a screenshot of the first box within css-text-4 example 24, showing how this looks right now, when you view this page in a dark color-scheme (regardless of browser):

[frivoal]

Thanks! fixed.