Email inputs with placeholder text

[yuanworks]

Hey there @shadeed, loved your guide on RTL! We've recently had a huge influx of Arabic-speaking users and your guide is incredibly useful. I wanted to ask if it's possible to add a section explaining how placeholder text for email/phone numbers should appear?

Today I learned from your guide that phones/email should still be LTR, but I was wondering if, when inputting the email, but how should the placeholder text look like?

(Sorry if it's mentioned and I missed it). Thanks!

Edit: I noticed FB keeps the email input LTR when there is no placeholder text, but when there is placeholder text, it stays RTL. Is this correct?

[shadeed]

Hello @yuanworks, thank you for reading!

I'm not sure if I got your question correctly, the placeholder should be aligned the same as the email input while typing. Did you have a look at this section?

Let me know please if it's clear or in case I got the question incorrectly!

[yuanworks]

Thanks! I saw this section, sorry for not formulating the question correctly. But what if the placeholder text inside the text input for email is in Arabic (in your example it's mail@example.com), should it be LTR aligned?

[           arabic-placeholder-text]  (RTL)

when typing -->

[typing@myemail.com                ]  (LTR)

Should it work like this?

[shadeed]

Yes, your solution is 100% correct and logical for me. I will make sure to update the section asap with that regard. Thank you :)

[shadeed]

Hello @yuanworks, I updated the section with an example of the use-case you mentioned. Thank you :)

[yuanworks]

Great, thank you so much @shadeed!

[omar-dulaimi]

Hello, Some nice work you have here and on the website.

Just wanted to check if it's possible to set rtl to a placeholder and ltr to an input field using just css, and have them change when typing

@shadeed