rlv-dan/Snap2HTML

RTL support

Stamimail opened this issue · 5 comments

It will be good to have a hotkey/button to Toggle LTR/RTL view.
RTL languages (as Hebrew and Arabic ) has a different view of Windows Explorer (RTL view).
In fact, it is more correct and will be much better to have both LTR+RTL views, to make it more readable for both LTR/RTL languages.
When it is LTR view it is more convenient to read LTR filenames
When it is RTL view it is more convenient to read RTL filenames

LTR / RTL
(ignore the pop-up menu)

While I would not mind this, it would be better if someone else who actually uses RTL did it since I know nothing about it.

I don't think it will be difficult.
As far as I understand, it just needs to inject, dir attribute (dir="rtl"), where needed.

https://www.w3schools.com/tags/att_global_dir.asp
https://www.w3schools.com/cssref/pr_text_direction.asp
https://www.w3schools.com/jsref/prop_style_direction.asp

The difficulty (for me) will be:

  1. How to make the Toggle mechanism
  2. Identify exactly which <div>s need to to be flipped
    and making them <div dir="rtl">

Searching the web, I can see they played with the CSS:
https://www.youtube.com/watch?v=3qQeCPl3cjk
http://www.moreonfew.com/how-to-convert-ltr-website-to-rtl-website/

@Stamimail Add this into the template.html file:

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
  var location = document.getElementsByClassName("app_header_stats")[0];
  var button = document.createElement("button");
  button.appendChild(document.createTextNode("Toggle LTR - RTL"));
  button.onclick = LtrRtlToggle;
  location.appendChild(button)
});

function LtrRtlToggle() {
  var button = document.getElementById("wrapper");
  button.dir = button.dir == "rtl" ? "ltr" : "rtl";
}
</script>

Does that work as expected?

@pyrescene It does make changes and toggling LTR / RTL.
The problem is how to mark those elements that should be inverted, and which not.

  1. Identify exactly which <div>s need to to be flipped
    and making them <div dir="rtl">

For example:
The whole header shouldn't be inverted.
The navigation pane should be to the right of the main pane.
Folders and files in the NameColumn should be aligned to the right, with their icon to the right.

Maybe we'll try to use class, inserting class in some elements, something like:
class="RTL_mark"
Can you make a script for class?
I guess a hotkey (Alt+V, View) for toggling LTR / RTL will be better for testing than a button.
Perhaps by trial and error of class injection we can solve this out.