mdn / content

The content behind MDN Web Docs
https://developer.mozilla.org
Other
9.14k stars 22.45k forks source link

Issue with "text-align": Raise visibility of 'start' and 'end' values #7295

Closed r12a closed 3 years ago

r12a commented 3 years ago

MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

What information was incorrect, unhelpful, or incomplete?

It would be helpful for internationalisation of the Web to encourage the use of 'start' and 'end' rather than 'left' and 'right', unless the latter are specifically required.

Specific section or headline?

It would be good to add text-align:start and text-align:end to the CSS Demo. I would recommend moving those values to the top of the list in the Syntax section. They are already at the head of the list in the Values section, which is great, but they are shown as experimental, whereas all major browsers support them now, and 'start' is even the CSS initial value. Change the word 'Left' to 'Start' in the examples section.

Did you test this? If so, how?

https://www.w3.org/International/i18n-tests/results/text-align#start

MDN Content page report details * Folder: `en-us/web/css/text-align` * MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/text-align/index.html * Last commit: https://github.com/mdn/content/commit/8f68c9bf3da43d768420d3f4bec544d4412e53cf * Document last modified: 2021-06-23T15:16:28.000Z
r12a commented 3 years ago

Many thanks for fixing this.

Would you like some Arabic or Hebrew text to use as a second paragraph in the Start alignment example? I can provide, for example, article 1 of the Universal Declaration of Human Rights. Just let me know if you want to. Happy for this to be ignored, otherwise.

teoli2003 commented 3 years ago

I like the idea, but I'll let @rachelandrew decide.

rachelandrew commented 3 years ago

@r12a that would be excellent, I'd be very happy to add that in.

r12a commented 3 years ago

Ok, here's the code with an additional paragraph, plus dir and lang attributes. I split the text into 4 lines, similarly to the Latin text, though it's not one sentence per line. Hopefully, that should do the trick.

<p class="example" lang="la">
  Integer elementum massa at nulla placerat varius.
  Suspendisse in libero risus, in interdum massa.
  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
<p class="example" dir="rtl" lang="he">
  כל בני אדם נולדו בני חורין ושווים
  בערכם ובזכויותיהם. כולם חוננו בתבונה
  ובמצפון, לפיכך חובה עליהם לנהוג
  איש ברעהו ברוח של אחוה.
</p>

It should look something like this when displayed in the box (i hope it's long enough – if not, let me know).

Screenshot 2021-07-28 at 19 23 07

The source is https://unicode.org/udhr/d/udhr_heb.html

hth

r12a commented 3 years ago

@rachelandrew just checking whether you saw this. ^^^