Re: [whatwg/url] Add a neato informative table of various URL pieces (#337)

Okay, thank you. That gave me a helpful starting point.

I don't know how to include HTML in this post, so I've inserted two images of what I've done and then after those images, I provide a link to the HTML file that generated both of them.

Here is @TimothyGu's third table with the changes I suggested and some additional changes:
![url syntax representation- original table proposal modified](https://user-images.githubusercontent.com/40837471/45379612-27c25780-b5c6-11e8-8e28-c727b04c68bc.jpg)
The complete list of changes from his original table is documented in the HTML file linked below. Also, in that HTML file, the red, underlined text is working links.

In addition, I've done some further work to present an alternative proposal, which has three parts.

- **Formulaic representation**: I think this is worth including because it uses the standard system of square brackets to represent optional elements and curly brackets with a vertical line to represent a set of elements to select from. Also, referring to it can assist in understanding the meaning of the graphical representation below it.
- **Graphical representation**: This uses different colors to represent optional elements, with a gradation of lighter colors to represent elements that are optional within other optional elements, and adjacent elements in the same color to represent mutually exclusive choices. The information content is the same as in the formulaic representation, but it is easier for a human to read.
- **Table of element conditions**: This summarizes the rules in section 4.5. "[URL serializing](https://url.spec.whatwg.org/#url-serializing)" of the standard. Again, referring to this table can make it easier to understand both the formulaic and graphical representations.

In the following image, the underlined text is working links in the HTML file linked further below.

![url syntax representation- new proposal](https://user-images.githubusercontent.com/40837471/45383153-fa7aa700-b5cf-11e8-82d6-a4c182a79fcb.jpg)

The two images above were generated in an [HTML file](https://gist.github.com/EnnexMB/5900762da38565b41a2b8b7147caca5d) using the same CSS as the URL standard. However, that didn't handle conversion of the double-brace wrappers used in @TimothyGu's code, so I converted those to `<code>` tags. (I'd be very interested in knowing how to use those double-brace wrappers if someone could direct me to information on that.)

The HTML file is posted at Gist, and I don't see a way to link to it so it can be read directly by your browser. So to see the it as intended, you will have to copy it into your own htm file and view it in your browser from there. If someone will tell me a better way to do this in the future, I will do that.


-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/url/issues/337#issuecomment-420408706

Received on Tuesday, 11 September 2018 20:11:17 UTC