Reformat OS table for mobile use

rbessems commented 10 months ago

Collapse table when too narrow into a list. (CSS)

DRx3D commented 10 months ago

This discussion refers to the table at the end of the primary index page (https://openxr-tutorial.simul.co/). The table is at the bottom, just above the Version statement.

There are a number of issues with the table. This fundamentally arises because it is too wide for narrow devices (portrait phones).

Some of the cell contents break in the middle of words
1. add space before, after, or both around the slashes (/)
2. change the '/' to a ', ' (comma space) to allow the browser to better flow the text
3. Recommend to not change cell contents to a single uniform link (e.g., Select button)
Change the table as follows
1. Add minimum cell width so that words do not wrap (after above changes)
2. Reduce cell padding (interior blank space inside the cell boundaries) when the display is narrow
3. Use non-blanking space ( ) in terms that are together (e.g., Direct3D 11, OpenGL ES)
It is anticipated that the above changes will not produce a good looking table on narrow displays. The table should be replaced with a multi-level list where the row labels (OS) are the major entries and the column labels (graphics) are the minor entries that apply for the major entry. This needs to be done with CSS media tags that hides the table when on narrow displays and hides the list on wider ones.

rvkennedy commented 10 months ago

I initially implemented an alternate table for width<1100px with a single column, and reduced the cell margins in this case. I've replaced this with the multi-level list, but both look acceptable. The '/' have been changed to ', ' (comma space) in the link text.