So i am currently in the process of creating an EPUB e-book, it is near ready to be labeled complete, but i have an issue with ADE based readers(tested on BlueFire reader), where the text refuses to justify and aligns left instead(however center alignment works fine)
I have cleaned the css, and checked and rechecked the properties and i see no conflicting alignments in the CSS
I have tried Prestigio E-reader on android as well as kindlepreview on PC and both of those displayed fine There is no enforced text alignment on Bluefire itself
Anyone got any sugestions?
CSS in question:
@font-face {
font-family:"Calibri";
font-style:normal;
font-weight:normal;
src : url("../Fonts/Calibri.TTF");
}
@font-face {
font-family:"Minion Pro";
font-style:normal;
font-weight:normal;
src : url("../Fonts/MinionPro-Regular.otf");
}
@font-face {
font-family:"Calibri";
font-style:italic;
font-weight:bold;
src : url("../Fonts/Calibri-BoldItalic.TTF");
}
@font-face {
font-family:"Calibri";
font-style:oblique;
font-weight:bold;
src : url("../Fonts/Calibri-BoldItalic.TTF");
}
@font-face {
font-family:"Calibri";
font-style:normal;
font-weight:bold;
src : url("../Fonts/Calibri-Bold.TTF");
}
@font-face {
font-family:"Calibri";
font-style:italic;
font-weight:normal;
src : url("../Fonts/Calibri-Italic.TTF");
}
@font-face {
font-family:"Calibri";
font-style:oblique;
font-weight:normal;
src : url("../Fonts/Calibri-Italic.TTF");
}
td, th {
border-style: solid;
border-width: 1px;
padding: 0.2em;
}
li {
display:block;
text-align: justify;
}
table {
border: 1px solid black;
border-collapse: collapse;
max-width: 80%;
margin: auto;
}
span.bold {
font-family:"Calibri", sans-serif;
font-style:normal;
font-weight:bold; !important
}
span.char-style-override-4 {
font-family:"Calibri", sans-serif;
font-style:italic;
}
span.char-style-override-14 {
text-decoration: underline;
}
/* _______________________________Pamats_________________________ */
body {
font-family : "Calibri", serif;
margin-left:3% ;
margin-right:3% ;
margin-top:5% ;
margin-bottom:3% ;
-epub-hyphens:auto;
-webkit-hyphens:auto;
}
@page {
margin :10pt;
}
h1 {
text-align: left;
font-size: 1.0em;
font-weight: normal;
}
/* ______________________________________paragrāfi___________________ */
p.Normal {
font-family:"Calibri";
font-size:1em;
font-style:normal;
font-weight:normal;
text-decoration : none;
font-variant : normal;
line-height : 1.25;
color : #000000;
text-indent : 1em;
margin : 0px;
page-break-after: avoid;
text-align: justify; !important
}
p.centrs {
text-align: center;
}
span.italic {
font-style:italic;
font-weight:normal;
}
span.bi {
font-style:italic;
font-weight:bold;
}
div.vestule p.Normal {
text-indent: 2em;
margin-left: 1em;
}
ul p.Normal {
text-indent: 0;
}
a {
color:#000000;
}
h2{
text-align: left;
font-size: 1em;
font-weight: normal;
}
image{
max-width:100%;
height:auto;
}
img{
max-width:100%;
height:auto;
}
The issue was, there were parse errors, i had placed !important after ";", issue is now resolved!