Skip to content

Adding Right-to-Left support for template - #875

Merged
phil-opp merged 5 commits into
phil-opp:masterfrom
sirjantech-osgroup:master
Nov 1, 2020
Merged

phil-opp merged 5 commits into
phil-opp:masterfrom
sirjantech-osgroup:master

Conversation

@hamidrezakp

@hamidrezakp hamidrezakp commented Oct 30, 2020 •

Copy link
Copy Markdown
Contributor

Adding Right-to-Left support for template. This is not a full solution to RTL problem because some English paragraphs are also Right-to-Left and must be fixed.

Now every post that want to be RTL must add an rtl = true in the extra section of post.

to RTL problem because some English paragraphs are also Right-to-Left
and must be fixed.

Now every post that want to be RTL must add an `rtl = true` in the
`extra` section of post.
@phil-opp

Copy link
Copy Markdown
Owner

Thanks! Using an extra.rtl setting for specifying the text direction is a good idea.

Instead of adding a separate CSS file and applying the rtl layout to all text, I would prefer solving this via classes. We could add a right-to-left classes in our HTML and then use a rule like this in our existing main.css:

.right-to-left p, .right-to-left h1, … {
	direction: rtl;
	font-family: "Vazir, Sahel, Yekan";
}

This should allow us to set the text direction per block. In the page.html template, we could then apply the text direction only to the page.content and page.title.

We could also add a left-to-right class that can be used for overriding the text direction within right-to-left blocks. Since CSS always applies the most specific rule, this should allow us to arbitrarily nest ltr and rtl blocks.

@hamidrezakp

Copy link
Copy Markdown
Contributor Author

Yeah you are right, using a right-to-left class in main.css is way better. also the left-to-right class is so good because we have some code blocks inside p elements and we can nicely use nested rtl and ltr in text.

However i don't know how we can apply right-to-left classes to page.content. i searched Zola documents but didn't find anything useful. can you give and example?
thanks

@phil-opp

Copy link
Copy Markdown
Owner

We could just add an additional <div> element around it, to which we can add the class then.

@hamidrezakp

Copy link
Copy Markdown
Contributor Author

Ok, i have done changes based on Classes. let me know if there is any other issue.

@phil-opp phil-opp left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the update! I left some simplification suggestions inline:

Comment thread blog/static/css/main.css Outdated
Comment thread blog/static/css/main.css Outdated
Comment thread blog/templates/second-edition/page.html Outdated
Comment thread blog/templates/second-edition/page.html Outdated
@hamidrezakp

Copy link
Copy Markdown
Contributor Author

Thanks a lot for suggestions!, now code is cleaner and so straight forward.

@phil-opp

phil-opp commented Nov 1, 2020

Copy link
Copy Markdown
Owner

Thanks!

@phil-opp
phil-opp merged commit caecc2c into phil-opp:master Nov 1, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants