![]() |
#1 |
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%; } */ |
![]() |
![]() |
![]() |
#2 |
Sigil Developer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 8,019
Karma: 5449552
Join Date: Nov 2009
Device: many
|
Moved it here as general css and epub question and not Sigil specific
KevinH |
![]() |
![]() |
![]() |
#3 |
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. |
![]() |
![]() |
![]() |
#4 |
Bibliophagist
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 38,944
Karma: 153006038
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
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:
|
![]() |
![]() |
![]() |
#5 | |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,686
Karma: 134319572
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
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; } |
|
![]() |
![]() |
![]() |
#6 |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,238
Karma: 89531599
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. |
![]() |
![]() |
![]() |
#7 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,686
Karma: 134319572
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
|
![]() |
![]() |
![]() |
#8 |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,238
Karma: 89531599
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
|
![]() |
![]() |
![]() |
#9 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,686
Karma: 134319572
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
|
![]() |
![]() |
![]() |
#10 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 6,661
Karma: 85000003
Join Date: Nov 2011
Location: Charlottesville, VA
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.
|
![]() |
![]() |
![]() |
|
![]() |
||||
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 |