search

Orange-OpenSource / Orange-Boosted-Bootstrap

Orange Boosted is an accessible, ergonomic and Orange branded framework based on Bootstrap
https://boosted.orange.com/
MIT License
193 stars 56 forks source link

RTL form controls heights in Firefox #626

Open ffoodd opened 3 years ago

ffoodd commented 3 years ago

Our v5 form controls are way too tall in RTL —only in Firefox!?—, because of Helvetica Neue Arabic usage. See our current RTL cheatsheet.

In v4, this does not happen because our form controls have a height, see v4.6 RTL Boostwatch.

Tried font-size-adjust but it's inconsistent. We may need to set height again…

ffoodd commented 3 years ago

Just made v4 sandboxes on CodePen: RTL input versus LTR inputs.

v5 sandboxes can't work for now because I missed to publish font files in our package. -_-

After a few checks:

Weird, isn't it?

ffoodd commented 3 years ago

So FWIW, Helvetica Neue Arabic's baseline is higher: what's obvious in inputs is visible for any text. Ascenders might be cut by an incorrect line-height.

So either there's an easy workaround (don't think so) or each vertical dimension needs to be customized in RTL—starting by adjusting line-height, then padding and margin… almost everywhere!

ffoodd commented 3 years ago

@Nurovek When you'll get there at some point, the Arabic Web UI Kit has been released on Zeplin and Sketch :tada:

yannickcornaille commented 3 years ago

This behavior is also true in Safari (so not only in Firefox). There is a good explanation here : https://www.456bereastreet.com/archive/201108/line-height_in_input_fields/

I agree with @ffoodd's comment https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/626#issuecomment-781233578 I don't think there is an easy workaround either, it would be necessary to customize each height, padding and margin in RTL. The only simple workaround is to change the font-family.

ffoodd commented 3 years ago

No, setting height makes more sense and was working fine in v4.

BTW there are several issues regarding form controls height in Bootstrap v5 too, so height might be reintroduced on their side.