Eink Module Online Documentation
Eink module is a front-end javaScript module for web designers to quickly apply a responsive web design (RWD) for E Ink devices, making the user experience better on E Ink devices.
Eink module make your website looks more like an eBook and make immersive reading on the web possible.
Though it's originally designed for E Ink device users, this module can enhance the reading experience on your websites for ANY devices.
- Paginated rather than scrolling overflow of web contents.
- Easy text-resizing and readibility is maintained after resizing.
- Highlighting and annotation tools.
- Immediate writing with stylus and pressure sensitivity support.
- WYSIWYG printing and PDF saving.
- Rich gesture support.
- Rich keyboard shortcuts.
- Support EinkBro E Ink browser.
To better catch the spirit of this module, you can see a thorough explanation of this module and also a live demonstration at my blog: Eink Mode Demonstration
- This module depends on jQuery, so please include the latest version of jQuery to your site first.
- Download the Book.js and Eink.js scripts and upload them to your web server or websites. Put the script in the same folder of your webpage.
-
Reference them with
<script>tag in the<head>section.
1<head>
2<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
3<script src="Book.js"></script>
4<script src="Eink.js"></script>
5</head>
-
Initialize Eink by make a new instance of Eink class and call
initmethod, this will give you aneinkbutton for users to click and enter Eink mode. (This also enables the swipe left-to-right gesture to enter Eink mode.)
const eink = new Eink();
eink.init();
-
You can customize the position of the eink button by 3 ways:
- Make an element with class "einkBtn", the eink button will be "append" to it.
-
Use
setupEinkBtn({position,top,left,right,bottom})method to adjust the position of the button. -
Directly use CSS or javaScript to control its position.
-
Now you can add CSS styles to adjust the display and look of your websites
under Eink Mode by simply using the
@mediaCSS media queries with the media typeeink. These styles will be rendered only when the users enter Eink mode. Therefore you can keep 2 different styles for your website, one under scrolling mode, one under paginated Eink mode and you can manage these styles very easily.
1/* Styles under eink mode */
2
@media eink {
3.main_section {
4--display: mainBook;
5font-size: 16px;
6color: black;
7}
8
9#article {
10--display: book-content;
11margin-top: 0px;
12}
13.svg-14 {
14--display: book-UI;
15}
16
17.figure {
18--display: book-Item;
19}
20}
21
22/* Styles under scrolling mode */
23.main_section {
24display: block;
25font-size: 14px;
26color: #512e5f;
27}
28
The --display property is quite similar to the display CSS property. The main feature of Eink mode is to display your website in a paginated fashion rather than scrolling, so there's a display style called book. You can specify the main content of your website to be displayed like a
book by giving it the --display CSS property with values mainBook. And also you can make other sub-sections or elements to be displayed in a
paginated manner, just giving them the --display property with the value of book.
There are 5 keyword values for this property, the main difference for these values are listed below:
- mainBook mainBook is used to display the main content of your webpage (the main view). Users can enter scroll mode by swiping from right to left "only" when the focused book is mainBook. (Or when they press the Esc key.)
-
book book is used to display the sub-sections or other elements that you
want to be displayed in a paginated fashion. When users swipe from right to
left or press the Esc key from the view of any book, they will return to the
view of mainBook.
Important
Please assign the closest container of the main content on the webpage as mainBook or book as possible. That is, try not include any layout structures or elements that are not relevant or not displayed such as <script> <style> in the book. This will improve the overall performance of this module and make it work as expected.
Tip
If there are several sections on the webpage, such as <aside> <header> <footer>, display them separately as different books (windows) and navigate these books by UI or gestures will enhance the immersive reading experience.
-
book-content book-content is the contents of the book. It is the target to be
re-arranged in a paginated fashion. If not specified, the default content
will be all elements contained in the book and most of the time you don't
need to specify an element to be the book-content.
If you don't want some elements to be re-arranged by the paging algorithm and thus be turned out of view when the users turn the page, you can specify the content element by this value and those elements not contained by this book-content element will be fixed on the book's page. (Similar to the effect of CSS display: fixed.)
Note
Book-content must be the direct descendant element of the book element. And make sure your content container's padding-left and padding-right should be 0 to let printing function works normally.
- book-item If you want an element and its descedants to be regarded as a whole to be re-arranged by the paging algorithm, that is to say, you don't want them to be broken by the page, you can assign the element to be a book-item. It's similar to the CSS "break-inside: avoid", but the main difference is that when you have a picture or a video in the book-item, these media will be resized to make the whole book-item element fit into a page. This is especially useful when you have a picture with a caption and you want them to fit into a page as possible.
- book-UI If you want clickable UI elements within a book to be clicked without page-turning (which will be disturbing for the users), simply assign them as book-UI can prevent the default page-turning action of the book.
The below CSS properties will work only if you write them in the same CSS rule
with --display: mainBook; or --display: book;. These properties are used to configure the book.
Same as the --display: book-content;, but you can specify the contents of the book more directly.
-
valueCSS selectors or DOM elements. -
defaultAll elements contained in book.
Specify the page margin of the book. There's no --rightMargin because by default it will be the same as --leftMargin.
-
value<length> CSS data type. -
default30px.
Specify whether to display the book in full screen.
-
valueBoolean -
defaulttrue
Specify whether to auto-generate a content table for this book or not.
-
valueBoolean -
defaulttrue
Note
Content table will be auto-generated only when there are more than 3 headers in the book even when this property is true.
Specify whether to auto-formatting the footnotes.
-
valueBoolean -
defaulttrue
Note
Footnotes will be auto-formatted to the footnote section only when there are footnotes written in the specified format in the book even when this property is true.
The title header of the webpage or website. This is used for the title of the highlight notebook. And when you use content table, this header won't be included in the content table.
-
valueA CSS selector for the title element. -
defaultThe first <h1> element in the webpage or website, if no <h1>, <h2> instead, etc.
This is used for the author name in the highlight notebook.
-
valueString -
default""
- jQuery 3.7.1
If you like this project. You can support this project by giving feedback, being a contributor to this project or by donation.
If you succesfully apply this module to your website and your website is public, please share it with me. I will be glad to see the project works well.
For any suggestions, feed backs, please email me at jacks101311@gmail.com
About the Author
Jack Black
|
Driven by a passion for physics, science, and engineering, I seek to leverage my medical experience to advance human health and environmental sustainability. |
|
If you liked what I wrote, feel free to support me. It'll give me more motivation to create. Thanks! |
|
發表文章
留言
張貼留言