rlv-dan / Snap2HTML

Generates directory listings contained in a single, app-like HTML files
http://www.rlvision.com/snap2html
GNU General Public License v3.0
505 stars 91 forks source link

RTL support #20

Open Stamimail opened 4 years ago

Stamimail commented 4 years ago

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)

rlv-dan commented 4 years ago

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.

Stamimail commented 4 years ago

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/

pyrescene commented 2 years ago

@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?

Stamimail commented 2 years ago

@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.

Stamimail commented 2 years ago

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.