[openstreetmap/openstreetmap-website] Put changeset and note comments in <article> elements (PR #5837)

Anton Khorev notifications at github.com
Sat Mar 22 23:45:49 UTC 2025


Our `/changeset/:id` and `/note/:id` pages have comments in the sidebar. Those comments are marked up as list items: 
```html
<ul>
  <li id="c1">...</li>
  <li id="c2">...</li>
  ...
</ul>
```

Turn out there's a drawback to that: list items redefine text alignment inside them. Normally you wouldn't notice that everything is either left-aligned or right-aligned in case of rtl. But if you want mixed ltr and rtl text inside, you'll have to override `text-align`. See https://github.com/openstreetmap/openstreetmap-website/pull/5835#issuecomment-2745310604, see "Add text-align: start; to the mx-2 class CSS." in #5785.

Another way to mark up comments is to use `<article>` elements. There are examples of that on [mdn](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) and in the [html spec](https://html.spec.whatwg.org/multipage/sections.html#the-article-element). If we use `<article>`, #5835 will just need to add `dir="auto"` to paragraphs without modifying css.

```html
<article id="c1">
<article id="c2">
...
```

You can view, comment on, or merge this pull request online at:

  https://github.com/openstreetmap/openstreetmap-website/pull/5837

-- Commit Summary --

  * Put changeset comments in <article> elements
  * Put note comments in <article> elements

-- File Changes --

    M app/views/changesets/show.html.erb (54)
    M app/views/notes/show.html.erb (20)
    M test/controllers/changesets_controller_test.rb (2)
    M test/controllers/notes_controller_test.rb (20)

-- Patch Links --

https://github.com/openstreetmap/openstreetmap-website/pull/5837.patch
https://github.com/openstreetmap/openstreetmap-website/pull/5837.diff

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/5837
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/5837 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20250322/dca51337/attachment.htm>


More information about the rails-dev mailing list