<p dir="auto">The problem and links to previous solutions are in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="712639038" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/2869" data-hovercard-type="issue" data-hovercard-url="/openstreetmap/openstreetmap-website/issues/2869/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/issues/2869">#2869</a>. Changeset descriptions were made to use italics "to make them look more like quotes" but that doesn't work well with Chinese and maybe other writing systems and large blocks of italics don't look good. How else can the descriptions be rendered? I tried a few options:</p>
<ul dir="auto">
<li>Bold font: looks too bold. Intermediate font weights: not clear if they are going to be available with every font and writing system that might be in use.</li>
<li>Decorations like underline: can't use them because descriptions sometimes are links, sometimes are not links, sometimes they contain links inside.</li>
<li>Colors: also don't look right. Primary color is blue, that looks like a link. Secondary is gray we use for deemphasising. Other colors we mostly don't use, they stick out too much.</li>
</ul>
<p dir="auto">How about font size then? Let's make the font slightly bigger.</p>
<p dir="auto">However that may make another problem worse. The text is now more likely not to fit horizontally. You can't always force words to wrap, but then horizontal scrolling should work fine just for the overflowing descriptions. Except it won't work fine when stretched links are used, and they are used in changeset lists. In this case let's truncate the text while still letting it to wrap if possible.</p>
<p dir="auto">Screenshots in Chromium, because it shows scrollbars:<br>
<a href="https://github.com/openstreetmap/openstreetmap-website/assets/4158490/3a771cc2-2e4d-4dd3-9171-32f429e1d557">image.png (view on web)</a><br>
<a href="https://github.com/openstreetmap/openstreetmap-website/assets/4158490/5659446b-9a5e-4855-aceb-b373eae464b6">image.png (view on web)</a><br>
<a href="https://github.com/openstreetmap/openstreetmap-website/assets/4158490/a52611ca-9be5-4570-989e-9c7b12e1b4ae">image.png (view on web)</a></p>
<hr>
<h4>You can view, comment on, or merge this pull request online at:</h4>
<p> <a href='https://github.com/openstreetmap/openstreetmap-website/pull/4813'>https://github.com/openstreetmap/openstreetmap-website/pull/4813</a></p>
<h4>Commit Summary</h4>
<ul>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4813/commits/fd3c7b23c50df8d4bb6345087ff7aa217e562482" class="commit-link">fd3c7b2</a> Use font size instead of italic for changeset/trace descriptions</li>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4813/commits/81732d6b0f9f716fb688692662c8316db0d85272" class="commit-link">81732d6</a> Let descriptions be horizontally scrollable on changeset/element pages</li>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4813/commits/98ff2c0b9c28b7a039b55573540f85ea84eb9fca" class="commit-link">98ff2c0</a> Truncate descriptions horizontally in changeset lists</li>
</ul>
<h4 style="display: inline-block">File Changes </h4> <p style="display: inline-block">(<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4813/files">4 files</a>)</p>
<ul>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4813/files#diff-9dea4ffe487a631e3df942ebeec041974e762348f767704f27c52bc97e89052f">app/views/browse/_common_details.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4813/files#diff-8c20483714803e1b221a61b2af55ca1cf6f488ec46cfefe331013ff0fc8c42a7">app/views/changesets/_changeset.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4813/files#diff-9a5f2cb48e3a30fd0197d016bd900f26d7183d6714f3a747613c9cbe4a9c8f9d">app/views/changesets/show.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4813/files#diff-f698347c73e920a2c1e10d03873cedbde14208bd883574b5567748dfd3037594">app/views/traces/_trace.html.erb</a>
(2)
</li>
</ul>
<h4>Patch Links:</h4>
<ul>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/4813.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/4813.patch</a></li>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/4813.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/4813.diff</a></li>
</ul>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/4813">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLPYS44FE77UZEBGCOLZC6DI3AVCNFSM6AAAAABH5TOHKWVHI2DSMVQWIX3LMV43ASLTON2WKOZSGMYDIMJXGAZTOOA">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLOZEVKH7WLLJEROZXDZC6DI3A5CNFSM6AAAAABH5TOHKWWGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHISVWZRI.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/4813</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/4813",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/4813",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>