Implementing Vertical Form Controls | Hacker News Reader

Implementing Vertical Form Controls

webkit.org

167 pointsksec38 comments

I find this so interesting mainly as a programmer, to have to think about how they'd have to rethink age-old rendering and interaction models for form controls (rendering logic that's probably been in there for decades) and "flip" it in meaningful ways. This feels more substantial than right-to-left.

I tried to search for the patch because I'm really curious as to exactly how much code had to be redone. If anyone has better luck than me, I'd love to see the overall ticket and patch.

Update: I found this: https://github.com/WebKit/WebKit/commit/f65bcef60fd613c09d7e...

Yeah looks like stuff you'd expect, like changing heights to logical heights, changing "Right" to "end" (not to minimize the work, I'm still intimidated by the sheer thought of designing this), but really interesting.

Of probably broader interest, linked on this post: Safari also now supports a native “toggle” style display for checkboxes. Which feels absolutely huge to me.

https://webkit.org/blog/15054/an-html-switch-control/

I understand having a popular widget is important, but I always fail to see why this is important when you have the simpler checkbox ? what is enabled by the toggle widget ?

This part of the article matches my understanding of the difference:

> Switch versus checkbox

> Generally, we recommend using a switch when the end user understands the user interface element as a setting that is either “on” or “off”. A checkbox is well suited for when the end user would understand the element as something to be selected.

There’s a little more to it than that too. A switch is typically setting something that takes effect immediately, whereas a checkbox is a state setting that needs to be saved to take effect.

Isn't that mostly just a coincidental outcome of smartphone apps preferring the fancy switches while also having "auto-saving" options while less dynamic web forms were stuck with checkboxes as standard elements?

I've definitely seen checkboxes that took effect immediately as well, though rare.

It's a useful distinction to have though, as a user I expect a toggle to take effect immediately, but with a checkbox I don't, it is usually used for a "dirty" state that has to be confirmed by a submit action

There are situations were either behaviour is preferable to the other

That rule means you can't have any other controls on screen, because it's not true for them and you can get into a semi-saved state. I believe it was just a niche designer factoid which sort of made it to reality by posts claiming that it's true. But it's way below the user uncertainty threshold to become a useful rule.

I'm not against immediate effects on switches (or any other controls), but they must clearly signal the immediate action. E.g. I've seen some UIs presenting a short spinner on its button and delaying the colors and/or the shift.

I’ve heard this said before, but I’m too skeptical to add it to my mental Rolodex of “common sense UX.” I see far more sites not doing that with switches, so I’m unsure the general population has that behavior internalized.

The article puts it quite well

Many switch elements are styled in a way where the state is ambiguous. With checkboxes it is visually clear when something is enabled. Use an appropriately styled switch element if you need this feature for your dark pattern UX.

I would like to hear from East Asian people if this is something they find useful.

After 30ish years of internet without it I would assume they got used to LTR.

It feels like this would cause a lot of bugs because devs aren't prepared to handle vertical correctly.

Vertical can be nice for poetry or prose but forms? I believe in Japan/China/Korea most signs, subtitles etc are LTR. Mongolian script is something else but it feels like bringing an antique custom to forcefully override some past Russian and Chinese imperial impact.

I really don't want to sound ignorant or xenophobic and would like to hear from someone native to this.

In case anyone is wondering about Mongolian script, here's a good example: https://president.mn/mng/

> past Russian ... imperial impact

Not sure how "past Russian impact" is at all related to ttb writings ...

Could you elaborate on that?

I am not an expert but Mongolia was under heavy Soviet influence so they adopted Cyrillic alphabet

After USSR dissolution there's an impulse to return to the traditional vertical script which is a bit impractical because compared to say Han it's not possible to write it horizontally.

Wiki can tell it better than me https://en.wikipedia.org/wiki/Mongolian_Cyrillic_alphabet

USSR !== Russian Empire.

Anyway...

Vertical writings are fading out not because someone's political will, but because of their impracticability in modern era.

First commercial typewriter appeared in US in 1874 and it effectively set the end for any non-LTR writing system.

In that respect, can we attach USA to that imperial club that killed TTB writing systems?

USSR is Russia's most successful imperial project. Let's not pretend it was Estonians and Tajiks who ran the business.

They use of horizontal layout is to some extent a chicken and egg problem, since support for vertical writing has been poor in many web browsers.

Vertical writing is often used in books, however, including ePub books that are internally HTML. With good enough support, it would be pretty reasonable to do a vertical layout for a serious news site, and horizontal form controls in the middle of that would likely be out of place. Physical newspapers, magazines, books, and manga in Japan are predominantly vertical.

Interesting to me that WebKit gets vertical form controls before MacOS. I don't have any experience with vertically written languages. How important are these controls to computer usage in Japan? Does Windows have them?

Japan has adopted LTR long ago in TV and the web. Never seen a Japanese site formatted vertically. Newspapers and books are still vertical, but it's not really difficult to read one way or the other.

At least in Japan, not important. Japanese is written vertically in novels, comics, newspapers and some writing in school, but almost everything else is written horizontally. Textbooks, manuals, letters from the bank, websites. Restaurant menus often go vertical for a more Japanese feel or horizontal for a more western one.

That said, I think it's great to see this support added to webkit. A diverse web is good for everyone.

I suspect most of modern Japanese media is horizontal exactly because of a low support for vertical in digital. Multilingual applications and systems rarely favor i18n improvements for a smaller groups of users.

Japan has a pretty strong local tech industry. Microsoft Word needed to add all kinds of features, including both vertical writing and weirder stuff like a dictionary of seasonal greeting phrases to use in formal correspondence (https://learn.microsoft.com/en-us/archive/blogs/office_globa...) to compete successfully with Japanese word processors.

So I suspect the causality is the other way around; there wasn't much demand for vertical form controls for the same reason you don't write emails in cursive.

There's more usage of vertically written Japanese than you listed. Some signboards, some formal letters, many paperbooks (and ebook version), vast majority of non-technical magazines are still vertically written.

Fortunately, for forms, I haven't seen any vertically written forms except school work.

When drafting a formal letter, does the author write it horizontally and present it vertically? Or, is the author expected to have skill at writing a 90 degree rotated character? Or, is the character not rotated, but just written in columns not rows?

> Or, is the character not rotated, but just written in columns not rows?

This one. Think about it - they don't expect the reader to tilt his head 90 degrees to read it :)

Formality is often tied to skill. Writing at a 90 degree angle would require more skill, the ability more rare.

Calligraphy, for example, conveys no extra information but is of higher stature.

How many characters tall is a Japanese book? English paperbacks seem to be similarly sized on the number of characters/words wide. Interface guidelines put an optional number of characters on a screen somewhere between 60-80. Books being taller than they are wide seem like it would stretch the limit to something harder to track for vertical writing.

Note that Japanese characters are much bigger (+ meaning-packed) than Latin characters, so it's also harder to lose track of which line you are at IMHO.

Like 20ish seems common in my experience learning. But you have to consider that most words are 1-3 characters before comparing that to English line lengths.

The article mentions Korean but vertical writing is not used at all in Korea. It went out of fashion many decades ago. I'm not sure why safari decided to add this feature...

There's only one language in common use where vertical writing is effectively mandatory: Mongolian. They also use Cyrillic for historical reasons, and Latin script as a modern convenience for electronic communications, but the native script is vertical.

That's enough reason to support it, imho. Japanese and Chinese are also routinely printed vertically, so that adds another billion and a half people who stand to benefit from it.

At least in Mongolia, Cyrillic is dominant and usage of the traditional script is marginal, though there are efforts to bring it back.

Most users of traditional Mongolian script are in China, where websites are in Chinese by default and Mongolian form elements are rare. They do exist though, and it would be nice if the search bar of this bookstore https://mn.dayangds.com/ could be vertical like everything else.

The Mongolian President’s site[1] has a top-to-bottom search box and it seems to work in Safari fine.

[1] https://president.mn/mng/

Looks like mn.dayangds.com does UA sniffing so you only get the vertical search bar if the user-agent contains the string "Firefox/" followed by at least one digit. Ugh.

Looks like they ninja edited the header picture. While the controls themselves were properly formatted, the Japanese text used normal horizontal left-to-right glyphs. Now four hours later they seem to be vertical as they should.

Nice to see meaningful updates like these. Curious to try these out on a polyglot page.

> Finally, some controls, such as checkbox and radio buttons, did not require any rendering changes. As “glyph-like” controls, they look the same in all writing modes.

That checkbox checkmark begs to differ

Reply on news.ycombinator.com