What's still unnecessarily hard to do in HTML?

April 6, 2015 10:02 AM

I've been out of the HTML-writing game for a decade or so. Last time I did it, lots of seemingly simple things were very difficult to do (and not always because of IE! Vertical centering comes to mind, or truncating wrapped text to a fixed number of lines). I'm collecting examples of things that an HTML-naïve designer might want but which are technically impossible, poor-performing, or require crazy contortions to implement. Let's not worry about old browsers, and assume modern technology.
posted by jewzilla to Technology (19 answers total)

Even assuming modern browsers, support for HTML5 features is inconsistent, sometimes requiring mixin frameworks to patch up support, and only where that is available.
posted by a lungful of dragon at 10:08 AM on April 6, 2015

A lot of difficulty stems from the fact that many people, when learning, mistake a markup language for a page description language and expect HTML to do absolute placement of elements gracefully.

With the rise of mobile devices with considerably different screen sizes and shapes, in my opinion it has become even more critical to understand the distinction.
posted by Nerd of the North at 10:10 AM on April 6, 2015 [4 favorites]

One thing I keep wanting and then remembering I can't have is CSS parent selectors. It would be so useful to select only the <p>'s that have <img>'s in them, or whatever... but the link gives good reasons why a parent selector would be terrifyingly inefficient and easy to break your whole page with.

(you can do this with jQuery really easily, but I try not to assume site visitors have Javascript enabled unless I really, really have to)
posted by Alioth at 10:11 AM on April 6, 2015 [2 favorites]

Getting table body rows to scroll while the header rows stay in place.
posted by clawsoon at 10:17 AM on April 6, 2015 [2 favorites]

Grid layouts. There's flexbox and css grids on the horizon, but most grid layouts are still implemented using floats, which is horribly hacky since floats were originally intended to provide a way to place images or pull quotes inside an article and have the body text float around it. I bet 90% of all floats are used for layout positioning. This also has the consequence that making multiple side-by-side columns the same height (independent of how much content is inside each column) requires weird tricks.

But if you want real horrors, try HTML emails. Everything is impossible (sort of). Client support is very patchy for a lot of things forcing you to do preposterous work-arounds. Want to know how to do a simple button in a HTML email? This is for a simple blue button with white text:
<div><!--[if mso]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://example.com/" style="height:40px;v-text-anchor:middle;width:200px;" stroke="f" fillcolor="blue"> <w:anchorlock/> <center> <![endif]--> <a href="http://example.com/" style="background-color:blue;color:white;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Button text</a> <!--[if mso]> </center> </v:rect> <![endif]--></div>
posted by bjrn at 10:28 AM on April 6, 2015 [4 favorites]

Automatic hyphenation is pretty much a solved problem; a suitable algorithm for hyphenation was discovered by Knuth and Liang over thirty years ago. All the major browsers support it, except Chrome. Fully-justified text without hyphenation looks horrible. Chrome's refusal to implement hyphenation pretty much forces all text on the Web to be ragged-right.
posted by 1970s Antihero at 10:50 AM on April 6, 2015 [1 favorite]

This is more rendering-engine than HTML, but: decent justification and hyphenation. Chrome doesn't support CSS hyphens at all, and rendering a paragraph in an aesthetically pleasant way in plain HTML/CSS is still painful. It's perplexing, because the TeX algorithms for line-breaks and hyphenation have been around for a long time, and have been implemented in Javascript, but not HTML. And that is one reason why Kindle books look shit.
posted by holgate at 10:52 AM on April 6, 2015 [1 favorite]

Styling form elements can still require lots of tweaking. I must have spent an entire afternoon last week messing with padding and margins on some text fields and radio buttons just to get them to line up with their corresponding labels across all the main browsers.
posted by pipeski at 11:48 AM on April 6, 2015 [1 favorite]

- Word-wrapping around arbitrary polygons
- Text centered inside arbitrary polygons
- Custom scroll bars
- Diagonal scrolling
- Locating elements based on a percentage of another item's width (supported experimentally by calc)

(Although, nowadays I just assume that the user's browser has HTML5 support and javascript enabled, and will use any polyfills necessary to get it done. If they can view it on a modern iOS/Android device, then that's what matters..)
posted by suedehead at 11:52 AM on April 6, 2015

Footnotes. They either work and look awful, or look right but don't work. [shakes fist]
posted by Charity Garfein at 11:53 AM on April 6, 2015

Vertical-centering objects still requires hack-ish methods in HTML5.
posted by Thorzdad at 11:58 AM on April 6, 2015 [2 favorites]

Emulating Excel-style printing of very wide tables (wider than a single page) is effectively impossible. Google Docs generates PDFs to do it. But, HTML isn't really suited to printing and never was.
posted by BungaDunga at 12:00 PM on April 6, 2015

One thing I keep wanting and then remembering I can't have is CSS parent selectors.

This can be done using CSS preprocessors like LESS or SASS! In LESS,
 .element { .parent & {} }
would target .parent .element.

But yes, use sparingly. CSS is a bizarre non-language to begin with.
posted by theraflu at 1:53 PM on April 6, 2015

I'm not a technical expert, so if I'm wrong on this I hope someone here will correct me. But I've never understood why HTML doesn't have the ability to do simple captions underneath a photo. Something like this:

// img src="smiley.gif" caption="This image of a smiley face was taken in New York City on July 4, 2014. Photo by Alaska Jack." //

Maybe I'm missing something, because this seems so obvious that it would have been implemented many years ago.
posted by Alaska Jack at 5:32 PM on April 6, 2015

But I've never understood why HTML doesn't have the ability to do simple captions underneath a photo.

Amusingly, there is [was*] a caption tag that does exactly what you want, but it's only for tables. *removed in HTML 5.

There is now* a figcaption tag, which does what you want, but in a more verbose way. *added in HTML 5.
posted by clawsoon at 6:04 PM on April 6, 2015

I'd recommend heading over to caniuse and perusing around for neat features without good browser support.

Vertical centering is a snap with flexbox, which is already supported in the current version of every browser, and has been for awhile in Chrome, FF, and Safari. Meanwhile there is basically no support for CSS grid layouts.

Another big one that doesn't have a canonical elegant solution yet is responsive images. The picture element would be a nice solution, but lacks support.
posted by ludwig_van at 6:37 PM on April 6, 2015 [2 favorites]

Date pickers. They're in the spec, but nobody implements them natively.
posted by blue_beetle at 10:21 PM on April 6, 2015

Multiple columns, with content flows between them, is still way too difficult. There's the CSS "column-count" property, but that's only good if your columns are all exactly the same shape and height. This makes some layouts that are pretty standard for magazines and newspapers quite hard to pull off.

Adobe had a proposal that might have made this better, but it hasn't gotten enough support to be really usable.
posted by vasi at 8:37 AM on April 7, 2015

clawsoon - yeah, I was actually aware of the table-caption thing. Still, I just cannot overstate how inexplicable I've always found this. Newpaper photos have captions. Magazine photos have captions. 3rd-grade science-project photos have captions. But it's not a standard HTML attribute?

You know, as I think about it, it seems like this could be done browser-side. Just use whatever is in the alt-text tag as the caption. Run it in italics along the length of the bottom of the photo. Wrap column text around both the photo and the caption. You wouldn't even need all the browser makers to agree.
posted by Alaska Jack at 3:29 PM on April 10, 2015