Simple theme: implement RTL #750
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
return42
reviewed
Jan 13, 2022
mrpaulblack
force-pushed
the
simple-rtl
branch
from
f242c9d
to
8e3bf7d
Compare
|
@dalf I added some small fixes on top of your branch; feel free to change/throw away/whatever 👍 The things that still need attention:
|
return42
added a commit
to return42/searxng
that referenced
this pull request
Jan 14, 2022
The less grunt runner silently ignore missing files and continue with the build[1]::
Running "less:production" (less) task
>> Destination css/searxng.min.css not written because no source files were found.
>> 1 stylesheet created.
>> 1 sourcemap created.
Add filter function that calls grunt.fail() if the scr file does not exists.
[1] searxng#750 (comment)
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
mrpaulblack
force-pushed
the
simple-rtl
branch
from
610e77b
to
2e35cf9
Compare
|
The URL are displayed left to right but aligned on the right. Google displays each URL "part" from right to left: Bings displays the full URL from left to right (or is it broken?): The Google version requires to modify get_pretty_url and the CSS (I'm not sure how to do that).
#369 needs to be fixed first |
not-my-profile
pushed a commit
to not-my-profile/searxng
that referenced
this pull request
Jan 15, 2022
The less grunt runner silently ignore missing files and continue with the build[1]::
Running "less:production" (less) task
>> Destination css/searxng.min.css not written because no source files were found.
>> 1 stylesheet created.
>> 1 sourcemap created.
Add filter function that calls grunt.fail() if the scr file does not exists.
[1] searxng#750 (comment)
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
return42
approved these changes
Jan 16, 2022
* disable declaration-empty-line-before https://stylelint.io/user-guide/rules/list/declaration-empty-line-before/ this change allows to mix CSS declarations and LESS mixins without empty lines: #something { display: flex; .ltr-left(60rem); // no mandatory empty line before this one } * disable no-invalid-position-at-import-rule https://stylelint.io/user-guide/rules/list/no-invalid-position-at-import-rule/ this change allows to declare some mixins and then import another .less file: for example: .ltr-left(@offset) { left: @offset; } @import "style.less";
* mirror all inline SVGs so that direction SVGs display correctly on RTL
* set the bold list element in info box to RTL so the colon gets displayed on the right side
* set correct .ltr function for the left border on the search button in #q
* move text to the right in autocomplete
* move search form in lign with result article on RTL
* add the correct padding for img thumbnails in categories like music on RTL
* apply RTL to result table for map results
* align text in tables part of /preferences on RTL
* move burger menu on index page to the left on RTL
* fix positioning of drop down arrow on select boxes on RTL
* align result URL on the right (written LTR)
* align vim hotkeys help on the left since it is not translated
* image detail:
* labels (author, format, URL, etc...) are written on the right,
values are on the left.
* URL are written LTR and overflow on the right
return42
approved these changes
Jan 16, 2022
mrpaulblack
approved these changes
Jan 16, 2022
|
Looks awesome!
In bing, it's reversed. URL must always be LTR and NOT affected by RTL |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What does this PR do?
This PR implements the RTL text direction in the simple theme.
Modern browsers do most of the work, but margin / padding / border and some other properties have to be manage manually.
The usual method seems to be:
IMO, this is error prone and require some copy / paste
There is the
margin-inline-startproperty, but it seems to be supported only recently (except for FF), and it doesn't solve all cases (for examplefloat: right).So this PR uses some LESS mixins:
In LTR version:
In this RTL version:
and so on for the different CSS properties.
Why is this change important?
Add support for RTL languages in the Simple theme.
How to test this PR locally?
Author's checklist
Issue list:
For the last one: I dont' know if there is a way to display LTR text aligned on the left, and RTL text aligned on the right only using CSS.
Currently, the only way I see is to detect the text direction in Python, and then add the
dirHTML attribute.From that, it is possible to add some CSS to display the text either aligned on the right, either aligned on the left.
ping @GreenLunar
Related issues
Close #747