Table legibility on page is poor - use color to differentiate?

[grnassar]

From manual page: https://php.net/types.comparisons

Sorry I couldn't submit a pull request to go along with this feature request; I honestly do not know how the XML docs work well and so don't know the best/most straightforward way to implement this.

The tables on this page, all three but especially the last two "loose comparisons" and "strict comparisons," are pretty hard to read as they are, populated with just the bold "true" and "false" text. I would like to suggest that each table cell also receive an identifying background color to ease reading those tables. So for example cells containing "true" could be set to a green background color and "false" to red.

[yusuf-saif]

Hmmm i doubt so looks fine to me

[peterdd]

For styling this either add class to the td cells when generating the HTML, e.g.

<td class="true">

<td class="false">

Then the CSS for example:

#types\.comparisons td.true{ background-color:#cfc;}

Or use javascript for that, either pure js approach or jquery $('td strong code:contains("true")') selectors and add the style dynamic.

Another approach could be to add a :hover on the row, for example

#types\.comparisons tr:hover {backgound-color:#fff;} to highlight the current hovered row.

[cmb69]

I have no problem with the way it is displayed now, and adding colors might even reduce legibility (see e.g. the menu with purple on black); but if you want to change something in this regard, please have a look at https://github.com/php/phd.

[peterdd]

vanilla js approach:

document.querySelectorAll('#types\\.comparisons td').forEach(function(el) {
  if (el.innerText == 'true') {
    el.style.backgroundColor = "#cfc";
  }
});
document.querySelectorAll('#types\\.comparisons td').forEach(function(el) {
  if (el.innerText == 'false') {
    el.style.backgroundColor = "#ccf";
  }
});

[peterdd]

[grnassar]

I think this looks much, much clearer. Thank you! This is an excellent example of the suggestion. (Just as an example of improved legibility: compare finding the difference of behavior between null and false on the no-color text versus this color example; I find the eye catches the differences much more easily in this example.)

[cmb69]

I think this looks much, much clearer.

Maybe, but certainly not for some visually impaired people. Maybe it is a good idea to replace true/false here with some more easily recognizable symbols?

[grnassar]

I think this looks much, much clearer.

Maybe, but certainly not for some visually impaired people. Maybe it is a good idea to replace true/false here with some more easily recognizable symbols?

Which visual impairments did you have in mind? I must admit I only checked against the common types of colorblindness using https://www.toptal.com/designers/colorfilter, but the above version degraded pretty elegantly across all scenarios, with the "worst case" being nearly identical to how the page appears right now. If there were other impairments that might be affected by color backgrounds that I should be testing, please let me know.