search

shadeed / rtl-styling

An extensive guide on how to style for RTL in CSS
https://rtlstyling.com/
MIT License
351 stars 19 forks source link

Canvas fillText, input dir, etc. #28

Open mapmeld opened 1 year ago

mapmeld commented 1 year ago

Hi ! I really like the RTL styling guide, شكرا for creating it

Ages ago I made a page on pieces I had picked up from working with Arabic text on a few projects ( https://mapmeld.com/rtl-guide/ )

Examples which I think would be worth adding into your list are:

  1. More about input dir="rtl" / dir="auto" - you have sections on form dir and dir="auto" but I didn't see a specific point about input dir="auto" accepting either-direction content in search elements etc.

  2. canvas element's ctx.fillText - the x value will refer to the left edge of the text. So if you were placing RTL text by the start / right-edge coordinate, it would be 

textWidth = ctx.measureText(txtString).width;
ctx.fillText(txtString, xRight - textWidth, yVal);
  1. Numbered lists, such as
  1. Item one
  2. Item two

As a language learner, I had to see this ___ .1 format in real life to be confident that it was correct

  1. Example of a currency symbol
  2. Video players (i.e. playback is still left-to-right)
shadeed commented 1 year ago

Thanks a lot, glad you like it.

The mentioned points are all important. The canvas thing is totally new, good to know.

I will review them and amend to the current update. Thanks again!