xiaoyifang / goldendict-ng

The Next Generation GoldenDict
https://xiaoyifang.github.io/goldendict-ng/
Other
1.69k stars 94 forks source link

Forced Alignment #1929

Closed samvan11 closed 2 days ago

samvan11 commented 3 days ago

Hello,

RTL scripts are normally right-aligned, but when there are multiple lines of different scripts that are supposed to be paired vertically, having different alignments makes them look scattered. In the original version of GD, the default alignmet is left which makes it more suitable for such content.

Original vs NG

gd1

gd2

Is there a way to force alignment for specific dictionaries in GoldenDict-ng? If not, it would be nice to have one.

xiaoyifang commented 2 days ago

Is there a way to force alignment for specific dictionaries in GoldenDict-ng? If not, it would be nice to have one.

align the text based on Language is a feature of modern web browser. old goldendict has done it wrong.

One way to confirm this result is save the article and open it in Chrome and check the result.

samvan11 commented 2 days ago

Is there a workaround for this? Can we trick GD-ng to force alignment with a CSS file, or modify a dictionary by adding some invisible Unicode characters to its lines to change the alignment?

xiaoyifang commented 2 days ago

check this https://xiaoyifang.github.io/goldendict-ng/topic_userstyle/ use article-style.css and rewrite the css and force the text to align left. maybe with align:left !important(not tested) etc;

samvan11 commented 2 days ago

Thanks. Adding the code below to article-style.css did the trick.

body
{
  text-align: left;
}

How can I restrict that rule so that it is applied only to a single dictionary (say, test.dsl)?

xiaoyifang commented 2 days ago

applied only to a single dictionary (say, test.dsl)?

right click on the dictionary in the web view. and choose inspect element . You should see a unique container(div) id which identify this dictionary. restrict the css to this specific container id.

samvan11 commented 2 days ago

restrict the css to this specific container id.

The ID is 63bf4a4a3ac85f14824bebf2d47127bc. There are "gdarticle" , "dsl_article" and "dsl_definition" classes all of which cover the area I want to apply the rule on. How should I merge them with the previous code?

I tried these but no luck.

#gdfrom-63bf4a4a3ac85f14824bebf2d47127bc .gdarticle body {
   text-align: left;
}
#gdfrom-63bf4a4a3ac85f14824bebf2d47127bc body {
   text-align: left;
}
shenlebantongying commented 2 days ago

Descendant combinator ` and Universal selector*` will apply to all children.

#gdfrom-63bf4a4a3ac85f14824bebf2d47127bc * {
   text-align: left;
}

No idea if we should do something about this, Firefox do has a feature that "switch page direction" (install arabic lang pack then uninstall it, this option will persist, a bug 😅).

samvan11 commented 2 days ago

Thank you. As there is an efficient workaround to the problem, you could close the issue if you want.

shenlebantongying commented 2 days ago

Ok.

If someone want to implement a reasonable "switch page direction" like Firefox, PR welcomed. I have little idea about the RTL languages.