Modify base content font-size + using magnifier.js

[elmimmo]

magnifier.js has two fixed font sizes:

// Constants.
var k = {
  LARGE_FONT_SIZE: "115%",
  NORMAL_FONT_SIZE: Monocle.Styles.content['font-size'] || "100%"
}

I cannot find a parent to Monocle.Styles.content that I can assign a base CSS font-size to, which those percentages would inherit (besides just editing magnifier.js per book style, which does not seem very tidy).

[joseph]

I don't quite understand this. Isn't it whatever styles you have in the component itself? If you have no styles defined in the component, then it's just the user agent stylesheet default values.

[elmimmo]

I will try to rephrase the issue:

I am trying to set up a base font size for all the book content through a custom CSS file (i.e. not modifying the component per book), so that 100% and 115% values that are hardcoded in the component become a percentage of that base font size, instead of percentages of browser default values for 100%.

Is there any style that Monocle.Styles.content cascades from, to which I can assign a font-size in my custom CSS, so that font-size percentages in Monocle.Styles.content are relative to that parent style instead of the browser's default?

In a normal webpage I would assign a base font-size to body, but since Monocle is importing only the contents of the books below that level I cannot use that one.

[joseph]

I'm still not really sure; it sounds a lot more complex than I imagine it. Two suggestions:

 body { font-size: 10px; }

or

 Monocle.Styles.content['font-size'] = '10px';

NB: in Monocle 1.0, these do exactly the same thing. It's just a matter of what's more convenient to you.

The code for this control has substantially altered — I now regard font-sizing as something to normalise, rather than a percentage to uniformly increase every existing size: https://github.com/joseph/Monocle/blob/componentry/src/controls/magnifier.js

I recommend you either use that control (assuming you agree with my standpoint) or write your own.

[joseph]

Marking as closed due to inactivity. Re-open if unaddressed.