Implementing Vertical Form Controls

https://webkit.org/blog/15190/implementing-vertical-form-controls/

by ksec • 2 years ago

167 38 2 years ago

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?

lebean• 2 years ago

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.

laurieg• 2 years ago

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.

ivanjermakov• 2 years ago

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.

fomine3• 2 years ago

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.

0cf8612b2e1e• 2 years ago

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.

jinwoo68• 2 years ago

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...

samatman• 2 years ago

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.

SuperNinKenDo• 2 years ago

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

afavour• 2 years ago

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/

makapuf• 2 years ago

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 ?

matteason• 2 years ago

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.

mcfedr• 2 years ago

The article puts it quite well

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.

palmfacehn• 2 years ago

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.

poisonborz• 2 years ago

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

atonse• 2 years ago

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.

morbicer3• 2 years ago

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.

nkrisc• 2 years ago

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

c-smile2• 2 years ago

past Russian ... imperial impact

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

Could you elaborate on that?

morbicer3• 2 years ago

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

om2• 2 years ago

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.

anilakar• 2 years ago

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.

Implementing Vertical Form Controls

Related Stories