lug/invidious
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix RTL text in video titles on Firefox

Browse Source 
The behavior was as follow: on Right-To-Left text (e.g Arabic) that is wrapped
(because it's too long to fit on one line), the second row and following rows
may or may not be right aligned (as RTL text should be). Opening the devtools
fixes that alignement, as consistently as closing the devtool breaks it.

This problem seems to arrive only in the following configurations (link nested
in a paragraph, both of which may or may not have the dir= attribute):

* `<p><a href="some_link">RTL_TEXT</a></p>`
* `<p><a href="some_link" dir="auto">RTL_TEXT</a></p>`
* `<p dir="auto"><a href="some_link">RTL_TEXT</a></p>`

with the following CSS:

```
p {
	unicode-bidi: plaintext;
	text-align: start;
}
```

Changing the HTML to the following configuration (a paragraph with the dir=
attribute, nested in a link) seems to fix it:

`<a href="some_link"><p dir="auto">RTL_TEXT</p></a>`
This commit is contained in:
Samantaz Fox 2021-06-25 02:03:05 +02:00
parent 1b1932f787
commit 9cef7945c0
No known key found for this signature in database
GPG Key ID: F42821059186176E
1 changed files with 22 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/invidious/views/components/item.ecr
View File

@ -2,13 +2,13 @@
<div class="h-box">
<% case item when %>
<% when SearchChannel %>
<a style="width:100%" href="/channel/<%= item.ucid %>">
<a href="/channel/<%= item.ucid %>">
<% if !env.get("preferences").as(Preferences).thin_mode %>
<center>
<img style="width:56.25%" src="/ggpht<%= URI.parse(item.author_thumbnail).request_target.gsub(/=s\d+/, "=s176") %>"/>
</center>
<% end %>
<p><%= item.author %></p>
<p dir="auto"><%= HTML.escape(item.author) %></p>
</a>
<p><%= translate(locale, "`x` subscribers", number_with_separator(item.subscriber_count)) %></p>
<% if !item.auto_generated %><p><%= translate(locale, "`x` videos", number_with_separator(item.video_count)) %></p><% end %>
@ -27,15 +27,13 @@
<p class="length"><%= number_with_separator(item.video_count) %> videos</p>
</div>
<% end %>
<p><%= item.title %></p>
<p dir="auto"><%= HTML.escape(item.title) %></p>
</a>
<a href="/channel/<%= item.ucid %>">
<p dir=auto"><b><%= HTML.escape(item.author) %></b></p>
</a>
<p>
<b>
<a style="width:100%" href="/channel/<%= item.ucid %>"><%= item.author %></a>
</b>
</p>
<% when MixVideo %>
<a style="width:100%" href="/watch?v=<%= item.id %>&list=<%= item.rdid %>">
<a href="/watch?v=<%= item.id %>&list=<%= item.rdid %>">
<% if !env.get("preferences").as(Preferences).thin_mode %>
<div class="thumbnail">
<img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
@ -44,13 +42,11 @@
<% end %>
</div>
<% end %>
<p><%= HTML.escape(item.title) %></p>
<p dir="auto"><%= HTML.escape(item.title) %></p>
</a>
<a href="/channel/<%= item.ucid %>">
<p dir=auto"><b><%= HTML.escape(item.author) %></b></p>
</a>
<p>
<b>
<a style="width:100%" href="/channel/<%= item.ucid %>"><%= item.author %></a>
</b>
</p>
<% when PlaylistVideo %>
<a style="width:100%" href="/watch?v=<%= item.id %>&list=<%= item.plid %>">
<% if !env.get("preferences").as(Preferences).thin_mode %>
@ -76,13 +72,11 @@
<% end %>
</div>
<% end %>
<p><a href="/watch?v=<%= item.id %>"><%= HTML.escape(item.title) %></a></p>
<p dir="auto"><%= HTML.escape(item.title) %></p>
</a>
<a href="/channel/<%= item.ucid %>">
<p dir=auto"><b><%= HTML.escape(item.author) %></b></p>
</a>
<p>
<b>
<a style="width:100%" href="/channel/<%= item.ucid %>"><%= item.author %></a>
</b>
</p>
<h5 class="pure-g">
<% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp.try &.> Time.utc %>
@ -98,8 +92,8 @@
</div>
</h5>
<% else %>
<% if !env.get("preferences").as(Preferences).thin_mode %>
<a style="width:100%" href="/watch?v=<%= item.id %>">
<% if !env.get("preferences").as(Preferences).thin_mode %>
<div class="thumbnail">
<img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
<% if env.get? "show_watched" %>
@ -134,12 +128,13 @@
<p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
<% end %>
</div>
</a>
<% end %>
<p><a href="/watch?v=<%= item.id %>"><%= HTML.escape(item.title) %></a></p>
<p dir="auto"><%= HTML.escape(item.title) %></p>
</a>
<div style="display: flex">
<b style="flex: 1;">
<a style="width:100%" href="/channel/<%= item.ucid %>"><%= item.author %></a>
<a dir="auto" href="/channel/<%= item.ucid %>"><p dir="auto"><%= HTML.escape(item.author) %></p></a>
</b>
<div class="icon-buttons">
<a title="<%=translate(locale, "Watch on YouTube")%>" href="https://www.youtube.com/watch?v=<%= item.id %>">