Skip to content

Instantly share code, notes, and snippets.

@spring-raining

spring-raining/case1.html

Last active May 13, 2023 09:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save spring-raining/bd87a8be261682e0a33415578be4dcb7 to your computer and use it in GitHub Desktop.
Save spring-raining/bd87a8be261682e0a33415578be4dcb7 to your computer and use it in GitHub Desktop.
Download ZIP
EAL two partitions
Raw
case1.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EAL float system example</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="eal-float-start-start">start-start</div>
<div class="eal-float-start-end">start-end</div>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad fuga beatae, odit atque qui rerum molestiae vitae pariatur tempora corporis! Dolorem unde rerum labore laborum dolor ducimus esse doloremque obcaecati.
Odio itaque, ullam quos dolorum mollitia quae animi. Rem non nihil perferendis sunt nisi. Quos quisquam officiis magnam eius molestias, magni velit mollitia perferendis nihil vitae doloribus, deleniti, rerum voluptas!
Omnis expedita repellendus quisquam itaque sunt veritatis soluta sapiente quam vel, pariatur incidunt enim debitis tempora ea adipisci placeat. Porro, illo nemo. Iste, deserunt temporibus ut omnis veritatis inventore quasi?
Temporibus dignissimos inventore libero fugit iste sunt accusamus molestias impedit minima error! Incidunt totam harum libero sit cum in ad doloremque quos voluptatum nostrum assumenda, quaerat quibusdam quo perferendis iure!
Ullam in fuga dicta dolore. Vitae, obcaecati. Animi nostrum consectetur architecto autem expedita ex earum error distinctio. Beatae sint, ut alias, consectetur autem id nisi necessitatibus provident corporis quidem quisquam!
Sit veniam, cupiditate minima repellat eaque ratione facilis tempora quisquam quo doloribus. Ad, sequi laudantium deleniti sint alias temporibus non nemo et ullam vero reprehenderit, eveniet sapiente ratione illum animi.
Sequi perferendis aspernatur officiis nobis adipisci repudiandae necessitatibus architecto ut perspiciatis id esse iure libero aliquid ducimus, odio quidem cum similique rem tempore quam? Nihil totam ea quis asperiores dolore.
Magni optio voluptate mollitia placeat iste nisi at ullam enim odio officiis animi, quasi perspiciatis qui alias porro veniam. Optio quia expedita qui, laborum rem eligendi molestias eaque enim repellendus!
Eveniet, velit voluptates. Eos quas eum natus eligendi, nulla molestias. Consequuntur praesentium eius perspiciatis dolore, molestiae ullam saepe nisi assumenda temporibus possimus maxime maiores similique! Et facere voluptates quod rem.
Eveniet provident dolore illo nam tempore cumque nulla qui, reiciendis magni dolor saepe obcaecati assumenda autem adipisci alias recusandae ratione corporis laboriosam facilis, veritatis beatae iste maxime? Fugiat, rerum. Commodi.
Distinctio exercitationem quidem laudantium. Tempore, facilis impedit accusamus soluta modi maxime eos iste consectetur. Doloribus minima tempora illo quos sed ducimus atque? Architecto praesentium commodi fugiat, consequatur harum quisquam saepe?
Quis vero voluptate architecto qui! Vero atque blanditiis esse eaque quo saepe debitis, iste sunt voluptatum impedit numquam sed! Amet, quod quasi magnam expedita totam cumque in illo facere fugiat.
</p>
</body>
</html>
Raw
case2.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EAL float system example</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="eal-float-start-start">start-start</div>
<div class="eal-float-end-start">end-start</div>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad fuga beatae, odit atque qui rerum molestiae vitae pariatur tempora corporis! Dolorem unde rerum labore laborum dolor ducimus esse doloremque obcaecati.
Odio itaque, ullam quos dolorum mollitia quae animi. Rem non nihil perferendis sunt nisi. Quos quisquam officiis magnam eius molestias, magni velit mollitia perferendis nihil vitae doloribus, deleniti, rerum voluptas!
Omnis expedita repellendus quisquam itaque sunt veritatis soluta sapiente quam vel, pariatur incidunt enim debitis tempora ea adipisci placeat. Porro, illo nemo. Iste, deserunt temporibus ut omnis veritatis inventore quasi?
Temporibus dignissimos inventore libero fugit iste sunt accusamus molestias impedit minima error! Incidunt totam harum libero sit cum in ad doloremque quos voluptatum nostrum assumenda, quaerat quibusdam quo perferendis iure!
Ullam in fuga dicta dolore. Vitae, obcaecati. Animi nostrum consectetur architecto autem expedita ex earum error distinctio. Beatae sint, ut alias, consectetur autem id nisi necessitatibus provident corporis quidem quisquam!
Sit veniam, cupiditate minima repellat eaque ratione facilis tempora quisquam quo doloribus. Ad, sequi laudantium deleniti sint alias temporibus non nemo et ullam vero reprehenderit, eveniet sapiente ratione illum animi.
Sequi perferendis aspernatur officiis nobis adipisci repudiandae necessitatibus architecto ut perspiciatis id esse iure libero aliquid ducimus, odio quidem cum similique rem tempore quam? Nihil totam ea quis asperiores dolore.
Magni optio voluptate mollitia placeat iste nisi at ullam enim odio officiis animi, quasi perspiciatis qui alias porro veniam. Optio quia expedita qui, laborum rem eligendi molestias eaque enim repellendus!
Eveniet, velit voluptates. Eos quas eum natus eligendi, nulla molestias. Consequuntur praesentium eius perspiciatis dolore, molestiae ullam saepe nisi assumenda temporibus possimus maxime maiores similique! Et facere voluptates quod rem.
Eveniet provident dolore illo nam tempore cumque nulla qui, reiciendis magni dolor saepe obcaecati assumenda autem adipisci alias recusandae ratione corporis laboriosam facilis, veritatis beatae iste maxime? Fugiat, rerum. Commodi.
Distinctio exercitationem quidem laudantium. Tempore, facilis impedit accusamus soluta modi maxime eos iste consectetur. Doloribus minima tempora illo quos sed ducimus atque? Architecto praesentium commodi fugiat, consequatur harum quisquam saepe?
Quis vero voluptate architecto qui! Vero atque blanditiis esse eaque quo saepe debitis, iste sunt voluptatum impedit numquam sed! Amet, quod quasi magnam expedita totam cumque in illo facere fugiat.
</p>
</body>
</html>
Raw
case3.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EAL float system example</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="eal-float-start-start">start-start</div>
<div class="eal-float-end-end">end-end</div>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad fuga beatae, odit atque qui rerum molestiae vitae pariatur tempora corporis! Dolorem unde rerum labore laborum dolor ducimus esse doloremque obcaecati.
Odio itaque, ullam quos dolorum mollitia quae animi. Rem non nihil perferendis sunt nisi. Quos quisquam officiis magnam eius molestias, magni velit mollitia perferendis nihil vitae doloribus, deleniti, rerum voluptas!
Omnis expedita repellendus quisquam itaque sunt veritatis soluta sapiente quam vel, pariatur incidunt enim debitis tempora ea adipisci placeat. Porro, illo nemo. Iste, deserunt temporibus ut omnis veritatis inventore quasi?
Temporibus dignissimos inventore libero fugit iste sunt accusamus molestias impedit minima error! Incidunt totam harum libero sit cum in ad doloremque quos voluptatum nostrum assumenda, quaerat quibusdam quo perferendis iure!
Ullam in fuga dicta dolore. Vitae, obcaecati. Animi nostrum consectetur architecto autem expedita ex earum error distinctio. Beatae sint, ut alias, consectetur autem id nisi necessitatibus provident corporis quidem quisquam!
Sit veniam, cupiditate minima repellat eaque ratione facilis tempora quisquam quo doloribus. Ad, sequi laudantium deleniti sint alias temporibus non nemo et ullam vero reprehenderit, eveniet sapiente ratione illum animi.
Sequi perferendis aspernatur officiis nobis adipisci repudiandae necessitatibus architecto ut perspiciatis id esse iure libero aliquid ducimus, odio quidem cum similique rem tempore quam? Nihil totam ea quis asperiores dolore.
Magni optio voluptate mollitia placeat iste nisi at ullam enim odio officiis animi, quasi perspiciatis qui alias porro veniam. Optio quia expedita qui, laborum rem eligendi molestias eaque enim repellendus!
Eveniet, velit voluptates. Eos quas eum natus eligendi, nulla molestias. Consequuntur praesentium eius perspiciatis dolore, molestiae ullam saepe nisi assumenda temporibus possimus maxime maiores similique! Et facere voluptates quod rem.
Eveniet provident dolore illo nam tempore cumque nulla qui, reiciendis magni dolor saepe obcaecati assumenda autem adipisci alias recusandae ratione corporis laboriosam facilis, veritatis beatae iste maxime? Fugiat, rerum. Commodi.
Distinctio exercitationem quidem laudantium. Tempore, facilis impedit accusamus soluta modi maxime eos iste consectetur. Doloribus minima tempora illo quos sed ducimus atque? Architecto praesentium commodi fugiat, consequatur harum quisquam saepe?
Quis vero voluptate architecto qui! Vero atque blanditiis esse eaque quo saepe debitis, iste sunt voluptatum impedit numquam sed! Amet, quod quasi magnam expedita totam cumque in illo facere fugiat.
</p>
</body>
</html>
Raw
main.css
@page {
width: 100mm;
height: 100mm;
}
@-epubx-page-master {
@-epubx-partition body {
-epubx-flow-from: body;
-epubx-required: true;
top: 10mm;
bottom: 10mm;
left: 10mm;
right: 10mm;
}
@-epubx-partition class(float) {
-epubx-flow-from: float-start-start;
inset-block-start: 10mm;
inset-inline-start: 10mm;
}
@-epubx-partition class(float) {
-epubx-flow-from: float-start-end;
inset-block-start: 10mm;
inset-inline-end: 10mm;
}
@-epubx-partition class(float) {
-epubx-flow-from: float-end-start;
inset-block-end: 10mm;
inset-inline-start: 10mm;
}
@-epubx-partition class(float) {
-epubx-flow-from: float-end-end;
inset-block-end: 10mm;
inset-inline-end: 10mm;
}
}
.eal-float-start-start {
-epubx-flow-into: float-start-start;
}
.eal-float-start-end {
-epubx-flow-into: float-start-end;
}
.eal-float-end-start {
-epubx-flow-into: float-end-start;
}
.eal-float-end-end {
-epubx-flow-into: float-end-end;
}
@-epubx-region .float {
div {
background-color: yellow;
border: 1px solid blue;
padding: 1rem;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment