Code Monkey home page Code Monkey logo

Comments (11)

andrearicci avatar andrearicci commented on June 19, 2024

you don't need a vaiable: just apply the modified style to paragraphs that have 'lang="ja"' - which can be hinerithed from html itself.
in the css the selctor can be
[yourtag]:lang(ja) { css declarations;}
You shall also be able to set the text vertical: top to bottom then right to left.
Setting the correct language shall also help the reader to choose the right dictionary.

from blitz.

ptmkenny avatar ptmkenny commented on June 19, 2024

Thanks, that's a good way to style paragraph elements for a specific language.

But what I'm asking about is adding a way to standardize the bottom margins on all elements, including headings, tables, lists, and paragraphs.

from blitz.

andrearicci avatar andrearicci commented on June 19, 2024

I'm not proficency on FreindsOfEpub styles, but the standard css would be:

* {                             /* select everything - you could use *:lang(ja) to apply the style only to Japanese*/
text-indent: 0;                 /* remove any indentation */
margin-bottom: 1em;             /* add a bottom margin ( I used 1em, you may choose your distance and units)*/
}

from blitz.

andrearicci avatar andrearicci commented on June 19, 2024

never tested, but for vertical it should be:

*:lang(ja) {
    writing-mode: vertical-rl;
 }

Do not forget to tag your texts as Japanese

<p lang="ja">はりねずみ</p>

or even the full HTML

from blitz.

JayPanoz avatar JayPanoz commented on June 19, 2024

@ptmkenny

But what I'm asking about is adding a way to standardize the bottom margins on all elements, including headings, tables, lists, and paragraphs.

There is a rhythm() mixin available, whose doc entry is:

.rhythm(@ font-scale, @ margin-top, @ margin-bottom)
Computes a font-size, a line-height and vertical margins for the element. Unlike .fs (@ font-scale), it enforces vertical rhythm.
The @ font-scale argument must be an integer (zero, positive or negative) telling which step in the typographic scale the element should use.
The @ margin-top and @ margin-bottom arguments can be an integer or a decimal (zero or positive) telling the number of lines which should be used for those margins.

It’s used in typo.less for instance:

Blitz/Blitz_framework/LESS/base/typo.less

Lines 53 to 60 in 5dade12

h4 {
.rhythm(0, 1, 0);
@media @mobi7 {
font-size: medium;
margin: 1em 0 0 0;
}
}

It is meant to recompute the proper em value for margins depending on the font-size of the element, and 1 line = 1 line-height – because some apps don’t support rem properly so we can’t use it.

It’s probably usable for this normalisation but may end up being a little bit verbose as you’ll have to handle all elements you want to cover in CSS selectors. That said, I don’t necessarily see another option, given ems depends on the font-size.

from blitz.

ptmkenny avatar ptmkenny commented on June 19, 2024

@andrearicci Have you tested the paragraph styles with lang on Amazon devices and apps?

I tried the following CSS on a Japanese document.

p:lang(ja) {
  text-indent: 0;
  margin-bottom: 1em !important;
}

Works: iBooks on MacOS Mojave
Does not work: Kindle Previewer 3.34 on MacOS, sideloading as AZK onto iOS, Kindle Mac App

from blitz.

andrearicci avatar andrearicci commented on June 19, 2024

@ptmkenny Hi, actually I'm just a CSS hobbist with a Japanese wife. I've not that experience. My wife says that all the Japanese novels she reads on the kindle are vertically formatted. But I can't tell you how.
I can give you a link to free Japanese novel, where you can download some samples and check their CSS. (This is the publisher that you can download for free on amazon.jp).
https://www.aozora.gr.jp/
by category
alphabetical order

Good luck

from blitz.

ptmkenny avatar ptmkenny commented on June 19, 2024

@andrearicci Ok, thanks. I can do vertical formatting; that is not the problem.

The issue is that the Amazon ecosystem apparently does not support lang-specific CSS.

from blitz.

JayPanoz avatar JayPanoz commented on June 19, 2024

@ptmkenny

Out of curiosity, do your elements have both xml:lang and lang attributes? E.g.

<html xml:lang="ja" lang="ja">

Reminds me of the issue with nav list you committed a few days ago, with Kindle ignoring the CSS namespace.

And there are like 2 options here:

  1. Kindle is handling XHTML as HTML (and CSS epub namespace + xml:lang fail in this context)
  2. They are simply ignored during conversion.

Answering to myself: so yeah, it looks like :lang() will fail if you only have xml:lang set, and you need a lang attribute as well.

from blitz.

ptmkenny avatar ptmkenny commented on June 19, 2024

After some debugging, I found the root cause of this issue: pandoc, which I was using to generate the ebook file, was not applying the lang tag correctly even though I had specified it correctly in a YAML block. This has been fixed from pandoc 2.8.1.

The reason why it worked in iBooks but not in Kindle is that iBooks reads the language attribute (not lang, language) in the meta info of the epub.

I'm going to leave this issue open as a reminder to come up with a good example of code of how to do this.

from blitz.

JayPanoz avatar JayPanoz commented on June 19, 2024

Given the Blitz project is under an “End of Life process”, this issue has been frozen, labeled documentation and wontfix, and won’t be addressed any further. Please check #66 for more details.

from blitz.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.