View Single Post
Old 01-30-2023, 06:56 AM   #5
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 80,096
Karma: 148565303
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by DNSB View Post
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;
}
JSWolf is offline   Reply With Quote