popcode
popcode copied to clipboard
popcodeorg
Non-straight-quotes in HTML should produce more useful error message
In our class today a student's chromebook was, for some reason, set to use the international keyboard setting.
As a result she got an error nag about needing to use "s for her href attribute because the double-quotes were typed with international characters. The tag was visibly correct. Switching the chromebook to US Keyboard setting fixed the issue with visibly different " characters in the IDE.
@stephenhmarsh interesting! i do wonder if the " character in question is in fact valid HTML—I can look into that. Any idea what the codepoint is for the character or how I might reproduce it?
Thanks for the report!
@outoftime welcome! I'll reproduce next time I have access to a Chromebook. In the meantime I can tell you It was typed from the normal " key and the keyboard setting in the bottom-right read "INTL."
Valid: <img src="//placekitten.com/100/100">
Not valid (US international keyboard): <img src=¨//placekitten.com/100/100¨>
The W3C validator gives the following error for on that character:
Line 2, Column 18: an attribute value must be a literal unless it contains only name characters
<img src=¨//placekitten.com/100/100¨>✉ You have used a character that is not considered a "name character" in an attribute value. Which characters are considered "name characters" varies between the different document types, but a good rule of thumb is that unless the value contains only lower or upper case letters in the range a-z you must put quotation marks around the value. In fact, unless you have extreme file size requirements it is a very very good idea to always put quote marks around your attribute values. It is never wrong to do so, and very often it is absolutely necessary.
@stephenhmarsh thank you! seems like, given those quotes aren’t valid HTML, the best thing to do would be to show a specialized error message along the lines of “you can only use standard straight quotes”—would you agree?
@outoftime totally agree, and maybe a hint about checking keyboard settings? If you wouldn't mind pointing me to where the validation happens I can make a PR.
@stephenhmarsh awesome thanks!
Here’s the specific mapper for that error, and here’s where the message is generated
A complication, though—from looking at the code and the message, I’m guessing the linter doesn’t actually give us the value of the attribute it’s complaining about. So it’s not clear how we can actually do the logic to see if we should generate the specialized message… : \
Ah okay, thanks. I'm new to React so I missed the htmllint dependency on first glance. I might actually open an issue with them and suggest they modify https://github.com/htmllint/htmllint/blob/master/lib/rules/attr-quote-style.js to check for non-valid quotes.
@stephenhmarsh worth a try! or just getting htmllint to return the attribute value in question would be sufficient : )