Hi
Please consider adding to gramps-web the right to left (RTL) layout ability for languages such as Hebrew and Arabic.
Thank you
Avi
1 Like
Isn’t it a matter of adding a few rules to narrative-screen.css (and perhaps narrative-print.css) style sheets?
If you have the required CSS/HTML skills, you can have a try at it. The files are located in the css subdirectory of the generated set of HTML pages.
Hey Avi, totally necessary.
I think we should just flip the whole thing (direction:rtl) and see where do we need to fix things manually.
From what I recall there’s a way to determine the site language using some variable in JS and reading it using the var() function in CSS, that way the CSS is dynamic enough to support both RTL and LTR without being reloaded or using a different file.
Unfortunately my coding skills are quite poor but i was able to add to the .HTML pages (locally)
just to see if it works at all, well it did but every new page goes ltr again…
so yes we need a better solution
so yes we need a better solution
I have some experience, are you up for mentorship?
1 Like
Sure…
so this is how you finally became a coder,
you start translating stuff and pretty soon you find yourself coding…
I have this js scrjpt so fare:
// Check if the page is in RTL language (e.g., Arabic, Hebrew, Farsi, Urdu,…)
function isRtlLanguage() {
const rtlLanguages = [“ar”, “he”, “fa”, “ur”]; // Add more RTL language codes as needed
const lang = document.documentElement.lang;
return rtlLanguages.includes(lang);
}
// Apply RTL direction and TRL alignment
function applyRtlDirection() {
if (isRtlLanguage()) {
document.documentElement.dir = “rtl”;
document.documentElement.style.textAlign = “right”;
} else {
document.documentElement.dir = “ltr”;
document.documentElement.style.textAlign = “left”;
}
}
// Run the function when the page is loaded
document.addEventListener(“DOMContentLoaded”, applyRtlDirection);
then i add a call from the index.html file in the header section like so.
<script src="rtl-switch.js"></script>
and of course
IT DOES NOT WORK
Which particular flavor of “it does not work”?
From investigating the page it seems that the .js script does not kick in. So pages are still directed Left to Right.
If i strip down all style and div, like so:
<!DOCTYPE html>
<html lang="he">
<head>
<meta charset="UTF-8">
<!-- Other head elements -->
<script src="rtl-switch.js"></script>
</head>
<body>
<!-- website content -->
"The White Terror in Hungary was a two-year period (1919–1921) of repressive violence by counter-revolutionary soldiers, "
בלה בלב בלה בלה בלה
</body>
</html>
and the .js script:
// Check if the page is in RTL language (e.g., Arabic, Hebrew)
function isRtlLanguage() {
const rtlLanguages = ["ar", "he", "fa", "ar"]; // Add more RTL language codes as needed
const lang = document.documentElement.lang;
return rtlLanguages.includes(lang);
}
// Apply RTL direction and TRL alignment
function applyRtlDirection() {
if (isRtlLanguage()) {
document.documentElement.setAttribute("dir", "rtl");
} else {
document.documentElement.setAttribute("dir", "ltr");
}
}
// Run the function when the page is loaded
document.addEventListener("DOMContentLoaded", applyRtlDirection);
then it is switching LTR <==> RTL.
So i guess there is a .css that the page calls somewhere which is forcing a dir=“ltr”
Then I did the same to ‘our’ index.HTML, like so:
<!DOCTYPE html>
<html lang="he">
<head>
<meta charset="UTF-8">
<script src="rtl-switch.js"></script>
<title>אילן היוחסין שלי - אדם הבית</title>
<meta name ="viewport" content="width=device-width; height=device-height; initial-scale=1.0; minimum-scale=0.5; maximum-scale=10.0; user-scalable=yes" />
<meta name ="apple-mobile-web-app-capable" content="yes" />
<meta name="generator" content="Gramps 5.1.6 http://gramps-project.org/" />
<meta name="author" content="" />
<link href="images/favicon2.ico" rel="shortcut icon" type="image/x-icon" />
<link href="css/narrative-print.css" media="print" rel="stylesheet" type="text/css" />
<link href="css/narrative-screen.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="out...........
...........
Which surprisingly worked, well, partially anyway: media objects stay constant, so is the menu bar.
this apply to the index.html page (none of the other pages are affected of course)
Remember to add specific people to such inquiries. Discourse may send a notification to them if they’ve registered their eMail address. Otherwise, they may not see your inquiry until their next visit.
Type the @ symbol and their username to push a notification. So… since @yaron volunteered mentoring above, we will use him as a good example pushing a notification.
1 Like
Well, anyway @yaron, @emyoulation at all, I do not mind messing with it some more (not that it will do much without direction), but at the same time i do believe that a more ‘elegant’ solution to this LTR<==>RTL issue will be generating the trigger at source.
Because no matter how you look at it, it is not an easy (nor reasonable) process one would expext an average user to perform each time they desire to regenerate a new version of their Gramps Web site.
2 Likes
@avma Are we talking about the Narrative Web report or the Gramps Web server?
If it is just the Narrative Web report, I’ll change the title and category.
We are talking about the web report generated from the report menu under web pages…
1 Like
The simplest way to do that is to add in the html srtucture dir=“rtl”
i.e:
<html xml:lang="ar" dir="rtl" lang="ar" php_session="None" xmlns="http://www.w3.org/1999/xhtml">
Can you make a bug report for that.
My question now is what language needs it:
I only see Hebrew and Arabic. Are there other languages that we support?
The W3.org provides RTL style guidance… including an incomplete list of RTL languages in the last 2 sentences of the first section.
A list of the main languages that use right to left scripts (there are more)
Arabic
Aramaic
Azeri
Dhivehi/Maldivian
Hebrew
Kurdish (Sorani)
Persian/Farsi
Urdu
1 Like
The simplest way should be to use dir=“auto”
If you want to test it, you can add the following line in the basepage.py at line 1632:
page, head, body = Html.page(
"%s - %s" % (html_escape(self.title_str.strip()), html_escape(the_title)),
self.report.encoding,
xmllang,
cms=self.usecms,
php_session=note,
dir="auto", # <=====
)
This will work if the first letter of the title is in Arabic, Hebrew,…
1 Like
@SNoiraud
just to make sure i pasted it in the right place…
(actually i found 2 basepage.py files)
@emyoulation @SNoiraud (The Gramps Project (Discourse Forum & Mailing List) - Collecting our past.)I repeated the process of generating the Web site several times, making sure the title is in Hebrew, no leading space or special chars in the title, changed options params from minimal to mark it all, but unfortunately the result stays the same. No Tight to Left
Hey, can you please explain and possibly add more screenshot, feel free to add some explanations in Hebrew if you think it’ll be easier for you and I’ll take it from there.
Thank you 