Comments (10)
One possible fix is : each time the user change the font size and each time we load a chapter, we iterate through all CSS rules to find all font-size [xx-small,x-small,small,medium,large,x-large,xx-large] and replace them by the corresponding rem value :
absolute value | rem value |
---|---|
xx-small | 0.5625rem |
x-small | 0.6250rem |
small | 0.8125rem |
medium | 1rem |
large | 1.125rem |
x-large | 1.5rem |
xx-large | 2rem |
However, this won't be perfect. If there is a dynamically loaded CSS or a script changing a style
attribute after we parse the CSS rules, these sizes will stay as-is.
from readium-shared-js.
Another solution would be to use – when available – the text-size-adjust
CSS property, instead of changing directly the font size.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
An example working on iOS and probably Android:
epubDocument.body.style.webkitTextSizeAdjust = "200%";
However it seems to be only available on mobile devices, but maybe there is
an equivalent for desktops.
Mickaël Menu
R&D Engineer
2 rue du Helder - 75009 Paris, France
Tel.: +33 1 42 47 05 61
[email protected]
www.mantano.com
store.mantano.com
cloud.mantano.com
On Wed, Jul 9, 2014 at 3:51 PM, Éric D. [email protected] wrote:
One possible fix is : each time the user change the font size and each
time we load a chapter, we iterate through all CSS rules to find all
font-size [xx-small,x-small,small,medium,large,x-large,xx-large] and
replace them by the corresponding rem value :
absolute value rem value xx-small 0.5625rem x-small 0.6250rem small
0.8125rem medium 1rem large 1.125rem x-large 1.5rem xx-large 2remHowever, this won't be perfect. If there is a dynamically loaded CSS or a
script changing a style attribute after we parse the CSS rules, these
sizes will stay as-is.—
Reply to this email directly or view it on GitHub
#34 (comment)
.
from readium-shared-js.
Also see Bugzilla:
https://app.devzing.com/Readium/bugzilla/show_bug.cgi?id=22
from readium-shared-js.
Hi. I am afraid not to have an account on the bugzilla, and I don't see how to create one. Could you help me on that ?
from readium-shared-js.
Could you please explain why you would need a Bugzilla account?
(development issues are tracked on GitHub) Regards, Daniel
On Monday, July 14, 2014, Éric D. [email protected] wrote:
Hi. I am afraid not to have an account on the bugzilla, and I don't see
how to create one. Could you help me on that ?—
Reply to this email directly or view it on GitHub
#34 (comment)
.
from readium-shared-js.
I don't know, as I don't know what is on the bugzilla.
You posted a reference link that I couldn't follow and that seemed to be related to the issue or its resolution. I don't have any other information : I had the assumption that the work continued there, but I may be wrong (as I don't see anything on the bugzilla).
from readium-shared-js.
Ah, apologies :)
(my email thread doesn't show this part, I had to go on GitHub to be
reminded of the link you are referring to)
Please do not worry about the Bugzilla link, this is for internal tracking
purposes only. The issues are recorded and processed in GitHub.
Sorry for the confusion.
Regards, Daniel
On Monday, July 14, 2014, Éric D. [email protected] wrote:
I don't know, as I don't know what is on the bugzilla.
You posted a reference link that I couldn't follow and that seemed to be
related to the issue or its resolution. I don't have any other information
: I had the assumption that the work continued there, but I may be wrong
(as I don't see anything on the bugzilla).—
Reply to this email directly or view it on GitHub
#34 (comment)
.
from readium-shared-js.
I added a comment in the Git diff, as unfortunately some text elements are not resizing. See:
259126f
from readium-shared-js.
Follow-up of the above comment (so we can track commits for this issue):
afabcf1
from readium-shared-js.
Unless I am mistaken, this issue was fixed by @ryanackley 's code:
https://github.com/readium/readium-shared-js/blob/develop/js/helpers.js#L242
Helpers.UpdateHtmlFontSize = function ($epubHtml, fontSize) {
var factor = fontSize / 100;
var win = $epubHtml[0].ownerDocument.defaultView;
var $textblocks = $('p, div, span, h1, h2, h3, h4, h5, h6, li, blockquote, td, pre', $epubHtml);
var originalLineHeight;
// need to do two passes because it is possible to have nested text blocks.
// If you change the font size of the parent this will then create an inaccurate
// font size for any children.
for (var i = 0; i < $textblocks.length; i++) {
var ele = $textblocks[i],
fontSizeAttr = ele.getAttribute('data-original-font-size');
if (!fontSizeAttr) {
var style = win.getComputedStyle(ele);
var originalFontSize = parseInt(style.fontSize);
originalLineHeight = parseInt(style.lineHeight);
ele.setAttribute('data-original-font-size', originalFontSize);
// getComputedStyle will not calculate the line-height if the value is 'normal'. In this case parseInt will return NaN
if (originalLineHeight) {
ele.setAttribute('data-original-line-height', originalLineHeight);
}
}
}
// reset variable so the below logic works. All variables in JS are function scoped.
originalLineHeight = 0;
for (var i = 0; i < $textblocks.length; i++) {
var ele = $textblocks[i],
fontSizeAttr = ele.getAttribute('data-original-font-size'),
lineHeightAttr = ele.getAttribute('data-original-line-height'),
originalFontSize = Number(fontSizeAttr);
if (lineHeightAttr) {
originalLineHeight = Number(lineHeightAttr);
}
else {
originalLineHeight = 0;
}
$(ele).css("font-size", (originalFontSize * factor) + 'px');
if (originalLineHeight) {
$(ele).css("line-height", (originalLineHeight * factor) + 'px');
}
}
$epubHtml.css("font-size", fontSize + "%");
};
Closing.
from readium-shared-js.
Related Issues (20)
- Chapters getting truncated [iOS - readium-shared-js library] HOT 4
- Absolutely positioned elements are misplaced HOT 5
- Building URL query parameters strips out #fragments HOT 1
- FAQ: custom external font faces
- Hyperlinking: hash fragment identifiers are discarded by internal pagination / scroll offset logic? HOT 3
- Use of reserved word "package" HOT 2
- Turn pages very slow in big html files with Android System Webview 63 HOT 25
- calculatePageIndexDeltaByRectangles has wrong logic calculating pageIndex HOT 6
- Build output: UMD bundle HOT 4
- Internet Explorer very slow to resize document with large spines (100+ pages)
- Please help, openContentUrl() dosen't work well in Electron app when the url contains #. HOT 1
- Rangy dependency not needed strictly-speaking (SMIL experimental feature + Juan's highlighter) HOT 2
- Firefox: Resize Sensor does not trigger when content after expanded element flows into following columns in a certain way
- Highlights HOT 1
- In Redium Reader CFI - is it possible to go exact CFI location in a reflowable document when search text location are multiple in a page HOT 4
- Is there any reason why navigator.epubReadingSystem is writable? HOT 2
- Invalid location/CFI received HOT 2
- Issue with continuous scrolling using (macOs + Safari) trackpad
- The page turn is not done with the readaloud
- API Document
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from readium-shared-js.