Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding Right-to-Left support for template #875

Merged
merged 5 commits into from Nov 1, 2020

Conversation

hamidrezakp
Copy link
Contributor

@hamidrezakp hamidrezakp commented Oct 30, 2020

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
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
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
Owner

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

@hamidrezakp
Copy link
Contributor Author

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

Copy link
Owner

@phil-opp phil-opp left a comment

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:

blog/static/css/main.css Outdated Show resolved Hide resolved
blog/static/css/main.css Outdated Show resolved Hide resolved
blog/templates/second-edition/page.html Outdated Show resolved Hide resolved
blog/templates/second-edition/page.html Outdated Show resolved Hide resolved
@hamidrezakp
Copy link
Contributor Author

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

@phil-opp
Copy link
Owner

phil-opp commented Nov 1, 2020

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.

None yet

2 participants