How to optimize and/or improve this css? Thanks

simoesfilho · 01-20-2023, 12:25 PM

/*
@page {
margin: 0;
}

@font-face {
font-family:"Tahoma";
font-style: normal;
font-weight: normal;
src : url("../Fonts/tahoma.ttf");
}

@font-face {
font-family:"Verdana";
font-style: normal;
font-weight: normal;
src : url("../Fonts/verdana.ttf");
}

@font-face {
font-family: "SmallCaps";
font-weight: bold;
font-style: normal;
font-variant: small-caps;
src: url("../Fonts/Fontin-SmallCaps.otf");
}

a:link {
color: #003399;
text-decoration: none;
}

a:visited {
color: #003399;
text-decoration: none;
}

a:hover {
color: #003399;
text-decoration: none;
background-color: #dddddd;
}

a:active {
color: #003399;
text-decoration: none;
}

p.margem {
margin: .75em 0 0;
}

div.divisa {
margin-top: 30%;
}

.poema1 {
display: block;
font-family: Verdana, sans-serif;
font-size: 1em;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-align: left;
margin: 0 1em 0 3em;
text-indent: -2em;
}

.poema2 {
display: block;
font-family: Verdana, sans-serif;
font-size: 1em;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-align: left;
text-decoration: none;
text-indent: 2em;
padding: 0;
margin: 0
}

.prosa1 {
display: block;
font-family: Verdana, sans-serif;
font-size: 1em;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-align: justify;
text-decoration: none;
text-indent: 0em;
line-height: 1.5em;
padding: 0;
margin: 0
}

.prosa2 {
display: block;
font-family: Verdana, sans-serif;
font-size: 1em;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-align: justify;
text-decoration: none;
text-indent: 1em;
line-height: 1.5em;
padding: 0;
margin: 0
}

.quote {
padding: 1em;
border-left: .3em solid;
background-color: #d3d3d3;
}

.center {
margin-left: auto;
margin-right: auto;
display: block;
background-color: #fff;
padding: .7em;
border: .2em ridge #ccc;
border-radius: 20px;
width: 60%;
text-align: justify;
}

img.vinheta {
display: block;
float: left;
margin: 0 10px 05px 10px;
}

.centro {
margin-left: auto;
margin-right: auto;
margin-top: 3%;
display: block;
}

.rodape {
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 5%;
display: block;
text-align: center;
}

p.rosto {
margin-top: 10%;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
line-height: 2em;
font-family: 'SmallCaps', sans-serif;
font-size: 1.6em;
font-weight: bold;
text-align: center;
}

h1.titulo {
font-family: 'SmallCaps', sans-serif;
font-size: 1.4em;
font-weight: bold;
font-variant: small-caps;
text-align: left;
margin-top: 1em;
margin-bottom: 1em;
}

h2.titulo {
font-family: 'SmallCaps', sans-serif;
font-size: 1.4em;
font-weight: bold;
font-variant: small-caps;
text-align: left;
margin-top: 1em;
margin-bottom: 1em;
}

.reduz {
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
text-align: center;
display: block;
padding: 0;
border: .5em ridge #ccc;
border-radius: 20px;
width: 50%;
}
*/

KevinH · 01-20-2023, 12:29 PM

Moved it here as general css and epub question and not Sigil specific
KevinH

phillipgessert · 01-20-2023, 12:42 PM

There seems to be a fair bit of redundancy, you might look up DRY / “Don’t Repeat Yourself” and bundle up some of the very similar rules. I’d also double check that you aren’t setting things that are already the default if you didn’t set anything at all, as might be the case for e.g. font-style: normal. And you could probably eliminate stuff like a:hover, I imagine it’d be pretty rare for folks to actually see that.

DNSB · 01-20-2023, 01:51 PM

You may also want to look at where you are using margin-left: auto; and margin-right: auto; for centering. Quite a few renderers especially those based on Adobe's ADE/RMSDK renderers will not work. A simple text-align: center; will work. I would also dump the text-align: justify to allow the reader to choose whether they want to justify or left align text. A quick and dirty pass at this:

Spoiler:

Code:

@font-face {
  font-family: "Tahoma";
  font-style: normal;
  font-weight: normal;
  src: url("../Fonts/tahoma.ttf");
}

@font-face {
  font-family: "Verdana";
  font-style: normal;
  font-weight: normal;
  src: url("../Fonts/verdana.ttf");
}

@font-face {
  font-family: "SmallCaps";
  font-weight: bold;
  font-style: normal;
  font-variant: small-caps;
  src: url("../Fonts/Fontin-SmallCaps.otf");
}

body {
  display: block;
  font-size: 1em;
  line-height: 1.1;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  text-indent: 0;
  widows: 1;
  orphans: 1;
}

p {
  margin: 0 0 0 0;
  padding: 0.2em 0 0 0;
}

a:link {
  color: #003399;
  text-decoration: none;
}

a:visited {
  color: #003399;
  text-decoration: none;
}

a:hover {
  color: #003399;
  text-decoration: none;
  background-color: #dddddd;
}

a:active {
  color: #003399;
  text-decoration: none;
}

p.margem {
  margin: .75em 0 0;
}

div.divisa {
  margin-top: 30%;
}

.poema1 {
  display: block;
  font-family: Verdana, sans-serif;
  text-align: left;
  margin: 0 1em 0 3em;
  text-indent: -2em;
}

.poema2 {
  display: block;
  font-family: Verdana, sans-serif;
  text-align: left;
  text-indent: 2em;
  padding: 0;
}

.prosa1 {
  display: block;
  font-family: Verdana, sans-serif;
  line-height: 1.5em;
  padding: 0;
}

.prosa2 {
  display: block;
  font-family: Verdana, sans-serif;
  text-indent: 1em;
  line-height: 1.5em;
  padding: 0;
}

.quote {
  padding: 1em;
  border-left: .3em solid;
  background-color: #d3d3d3;
}

.center {
  display: block;
  background-color: #fff;
  padding: .7em;
  border: .2em ridge #ccc;
  border-radius: 20px;
  width: 60%;
  text-align: center;
}

img.vinheta {
  display: block;
  float: left;
  margin: 0 10px 05px 10px;
}

.centro {
  text-align: center;
  margin-top: 3%;
  display: block;
}

.rodape {
  margin-bottom: 5%;
  display: block;
  text-align: center;
}

p.rosto {
  margin-top: 10%;
  line-height: 2em;
  font-family: 'SmallCaps', sans-serif;
  font-size: 1.6em;
  font-weight: bold;
  text-align: center;
}

.titulo {
  font-family: 'SmallCaps', sans-serif;
  font-size: 1.4em;
  font-weight: bold;
  font-variant: small-caps;
  text-align: left;
  margin-top: 1em;
  margin-bottom: 1em;
}

.reduz {
  margin-bottom: 1em;
  text-align: center;
  display: block;
  padding: 0;
  border: .5em ridge #ccc;
  border-radius: 20px;
  width: 50%;
}

JSWolf · 01-30-2023, 06:56 AM

Quote:

Originally Posted by DNSB

You may also want to look at where you are using margin-left: auto; and margin-right: auto; for centering. Quite a few renderers especially those based on Adobe's ADE/RMSDK renderers will not work. A simple text-align: center; will work. I would also dump the text-align: justify to allow the reader to choose whether they want to justify or left align text. A quick and dirty pass at this:

Spoiler:

Code:

@font-face {
  font-family: "Tahoma";
  font-style: normal;
  font-weight: normal;
  src: url("../Fonts/tahoma.ttf");
}

@font-face {
  font-family: "Verdana";
  font-style: normal;
  font-weight: normal;
  src: url("../Fonts/verdana.ttf");
}

@font-face {
  font-family: "SmallCaps";
  font-weight: bold;
  font-style: normal;
  font-variant: small-caps;
  src: url("../Fonts/Fontin-SmallCaps.otf");
}

body {
  display: block;
  font-size: 1em;
  line-height: 1.1;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  text-indent: 0;
  widows: 1;
  orphans: 1;
}

p {
  margin: 0 0 0 0;
  padding: 0.2em 0 0 0;
}

a:link {
  color: #003399;
  text-decoration: none;
}

a:visited {
  color: #003399;
  text-decoration: none;
}

a:hover {
  color: #003399;
  text-decoration: none;
  background-color: #dddddd;
}

a:active {
  color: #003399;
  text-decoration: none;
}

p.margem {
  margin: .75em 0 0;
}

div.divisa {
  margin-top: 30%;
}

.poema1 {
  display: block;
  font-family: Verdana, sans-serif;
  text-align: left;
  margin: 0 1em 0 3em;
  text-indent: -2em;
}

.poema2 {
  display: block;
  font-family: Verdana, sans-serif;
  text-align: left;
  text-indent: 2em;
  padding: 0;
}

.prosa1 {
  display: block;
  font-family: Verdana, sans-serif;
  line-height: 1.5em;
  padding: 0;
}

.prosa2 {
  display: block;
  font-family: Verdana, sans-serif;
  text-indent: 1em;
  line-height: 1.5em;
  padding: 0;
}

.quote {
  padding: 1em;
  border-left: .3em solid;
  background-color: #d3d3d3;
}

.center {
  display: block;
  background-color: #fff;
  padding: .7em;
  border: .2em ridge #ccc;
  border-radius: 20px;
  width: 60%;
  text-align: center;
}

img.vinheta {
  display: block;
  float: left;
  margin: 0 10px 05px 10px;
}

.centro {
  text-align: center;
  margin-top: 3%;
  display: block;
}

.rodape {
  margin-bottom: 5%;
  display: block;
  text-align: center;
}

p.rosto {
  margin-top: 10%;
  line-height: 2em;
  font-family: 'SmallCaps', sans-serif;
  font-size: 1.6em;
  font-weight: bold;
  text-align: center;
}

.titulo {
  font-family: 'SmallCaps', sans-serif;
  font-size: 1.4em;
  font-weight: bold;
  font-variant: small-caps;
  text-align: left;
  margin-top: 1em;
  margin-bottom: 1em;
}

.reduz {
  margin-bottom: 1em;
  text-align: center;
  display: block;
  padding: 0;
  border: .5em ridge #ccc;
  border-radius: 20px;
  width: 50%;
}

When you have a text-align: center; you should also have a text-indent: 0; Also, when you put the text-align: justify; in the body style, you justify the text, but you also allow programs that have a justify override to work.

Code:

@font-face {
  font-family: "SmallCaps";
  font-weight: bold;
  font-style: normal;
  font-variant: small-caps;
  src: url(../Fonts/Fontin-SmallCaps.otf);
}
@font-face {
  font-family: "Tahoma";
  font-style: normal;
  font-weight: normal;
  src: url(../Fonts/tahoma.ttf);
}
@font-face {
  font-family: "Verdana";
  font-style: normal;
  font-weight: normal;
  src: url(../Fonts/verdana.ttf);
}
a {
  color: #039;
  text-decoration: none;
}
body {
  widows: 1;
  orphans: 1;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  text-align: justify;
}
.center {
  background-color: #fff;
  padding: 0.7em;
  border: 0.2em ridge #ccc;
  border-radius: 20px;
  width: 60%;
}
.centro {
  margin-left: auto;
  margin-right: auto;
  margin-top: 3%;
}
.poema1 {
  font-family: Verdana, sans-serif;
  text-align: left;
  margin: 0 1em 0 3em;
  text-indent: -2em;
}
.poema2 {
  font-family: Verdana, sans-serif;
  text-align: left;
  text-indent: 2em;
}
.prosa1 {
  font-family: Verdana, sans-serif;
  text-indent: 0;
  line-height: 1.5em;
}
.prosa2 {
  font-family: Verdana, sans-serif;
  text-align: justify;
  text-indent: 1em;
  line-height: 1.5em;
}
.quote {
  padding: 1em;
  border-left: 0.3em solid;
  background-color: #d3d3d3;
}
.reduz {
  margin-bottom: 1em;
  text-align: center;
  text-indent: 0;
  border: 0.5em ridge #ccc;
  border-radius: 20px;
  width: 50%;
}
.rodape {
  margin-top: 0;
  margin-bottom: 5%;
  display: block;
  text-align: center;
  text-indent: 0;
}
div.divisa {
  margin-top: 30%;
}
.titulo {
  font-family: "SmallCaps", sans-serif;
  font-size: 1.4em;
  font-weight: bold;
  font-variant: small-caps;
  text-align: left;
  margin-top: 1em;
  margin-bottom: 1em;
}
img.vinheta {
  float: left;
  margin: 0 10px 5px 10px;
}
p.margem {
  margin: 0.75em 0 0;
}
p.rosto {
  font-family: "SmallCaps", sans-serif;
  margin-top: 10%;
  line-height: 2em;
  font-size: 1.6em;
  font-weight: bold;
  text-align: center;
  text-indent: 0;
}

Quoth · 01-30-2023, 01:06 PM

Never use margin:auto anywhere
Set left & right margin and text-indent to zero if center is used.

JSWolf · 01-30-2023, 01:43 PM

Quote:

Originally Posted by Quoth

Never use margin:auto anywhere
Set left & right margin and text-indent to zero if center is used.

No need to set left/tight margins to 0 if you have them set to 0 in body. That's just excess unneeded code. What you do need in a text-indent: 0; for centering.

Quoth · 01-30-2023, 01:56 PM

Quote:

Originally Posted by JSWolf

No need to set left/tight margins to 0 if you have them set to 0 in body. That's just excess unneeded code. What you do need in a text-indent: 0; for centering.

That's true. But they might not be 0 in body.

JSWolf · 01-30-2023, 02:09 PM

Quote:

Originally Posted by Quoth

That's true. But they might not be 0 in body.

It is 0 in body. See the cleaned up code I posed.

jhowell · 01-30-2023, 03:03 PM

Margins are not as heritable property in CSS. That means that setting a zero margin on the body element has no effect on any other element in the HTML document. Also the default value is zero anyway.

01-20-2023, 12:25 PM	#1
simoesfilho Junior Member Posts: 1 Karma: 10 Join Date: Jan 2023 Device: nenhum	How to optimize and/or improve this css? Thanks /* @page { margin: 0; } @font-face { font-family:"Tahoma"; font-style: normal; font-weight: normal; src : url("../Fonts/tahoma.ttf"); } @font-face { font-family:"Verdana"; font-style: normal; font-weight: normal; src : url("../Fonts/verdana.ttf"); } @font-face { font-family: "SmallCaps"; font-weight: bold; font-style: normal; font-variant: small-caps; src: url("../Fonts/Fontin-SmallCaps.otf"); } a:link { color: #003399; text-decoration: none; } a:visited { color: #003399; text-decoration: none; } a:hover { color: #003399; text-decoration: none; background-color: #dddddd; } a:active { color: #003399; text-decoration: none; } p.margem { margin: .75em 0 0; } div.divisa { margin-top: 30%; } .poema1 { display: block; font-family: Verdana, sans-serif; font-size: 1em; font-style: normal; font-variant: normal; font-weight: normal; text-align: left; margin: 0 1em 0 3em; text-indent: -2em; } .poema2 { display: block; font-family: Verdana, sans-serif; font-size: 1em; font-style: normal; font-variant: normal; font-weight: normal; text-align: left; text-decoration: none; text-indent: 2em; padding: 0; margin: 0 } .prosa1 { display: block; font-family: Verdana, sans-serif; font-size: 1em; font-style: normal; font-variant: normal; font-weight: normal; text-align: justify; text-decoration: none; text-indent: 0em; line-height: 1.5em; padding: 0; margin: 0 } .prosa2 { display: block; font-family: Verdana, sans-serif; font-size: 1em; font-style: normal; font-variant: normal; font-weight: normal; text-align: justify; text-decoration: none; text-indent: 1em; line-height: 1.5em; padding: 0; margin: 0 } .quote { padding: 1em; border-left: .3em solid; background-color: #d3d3d3; } .center { margin-left: auto; margin-right: auto; display: block; background-color: #fff; padding: .7em; border: .2em ridge #ccc; border-radius: 20px; width: 60%; text-align: justify; } img.vinheta { display: block; float: left; margin: 0 10px 05px 10px; } .centro { margin-left: auto; margin-right: auto; margin-top: 3%; display: block; } .rodape { margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 5%; display: block; text-align: center; } p.rosto { margin-top: 10%; margin-bottom: auto; margin-left: auto; margin-right: auto; line-height: 2em; font-family: 'SmallCaps', sans-serif; font-size: 1.6em; font-weight: bold; text-align: center; } h1.titulo { font-family: 'SmallCaps', sans-serif; font-size: 1.4em; font-weight: bold; font-variant: small-caps; text-align: left; margin-top: 1em; margin-bottom: 1em; } h2.titulo { font-family: 'SmallCaps', sans-serif; font-size: 1.4em; font-weight: bold; font-variant: small-caps; text-align: left; margin-top: 1em; margin-bottom: 1em; } .reduz { margin-left: auto; margin-right: auto; margin-bottom: 1em; text-align: center; display: block; padding: 0; border: .5em ridge #ccc; border-radius: 20px; width: 50%; } */

01-20-2023, 12:42 PM	#3
phillipgessert Addict Posts: 311 Karma: 3196258 Join Date: Oct 2015 Location: Madison, WI Device: Kindle 5th Gen	There seems to be a fair bit of redundancy, you might look up DRY / “Don’t Repeat Yourself” and bundle up some of the very similar rules. I’d also double check that you aren’t setting things that are already the default if you didn’t set anything at all, as might be the case for e.g. font-style: normal. And you could probably eliminate stuff like a:hover, I imagine it’d be pretty rare for folks to actually see that. Last edited by phillipgessert; 01-20-2023 at 04:35 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How can I optimize the use of my iPad	bettyallen	Apple Devices	2	08-16-2011 11:27 PM
PRS-650 Optimize PDF	UpSpin	Sony Reader	7	05-20-2011 06:14 PM
do you try to optimize for different devices?	sarah_pnix	ePub	5	02-16-2011 05:05 AM
Troubleshooting Optimize PDF for the Kindle DX	nerys	Amazon Kindle	2	07-26-2010 02:05 PM
Optimize any2epub	JeffElkins	Calibre	4	10-17-2008 03:31 PM

01-20-2023, 12:29 PM	#2
KevinH Sigil Developer Posts: 7,643 Karma: 5433388 Join Date: Nov 2009 Device: many	Moved it here as general css and epub question and not Sigil specific KevinH

01-30-2023, 01:06 PM	#6
Quoth the rook, bossing Never. Posts: 11,150 Karma: 85874891 Join Date: Jun 2017 Location: Ireland Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11	Never use margin:auto anywhere Set left & right margin and text-indent to zero if center is used.

01-30-2023, 03:03 PM	#10
jhowell Grand Sorcerer Posts: 6,496 Karma: 84420419 Join Date: Nov 2011 Location: Tampa Bay, Florida Device: Kindles	Margins are not as heritable property in CSS. That means that setting a zero margin on the body element has no effect on any other element in the HTML document. Also the default value is zero anyway.

Advert

Advert