Hojas de estilo CSS2 para la edición impresa

From Software libre para los países en desarrollo

Jump to: navigation, search

movie theater in burleson texas australian gold indoor lotion tanning mail(at)alltel.net panda 2005 crack serial pharmacy continuing education free galleries nude male models andnot gay video sleeve rosa parks biography natural disaster movie script treatment licenseing look better as girl heliopolis acquisition analogique et numerique video girls taking off clothes mature suck video anima girls jonny depp movies list sleeping lesbian movie catriona rowntree naked arab women lighter fluids young blonde sluts logitech im video companion upgrade amazing funny video joy by jean patou poker academy pro crack main fantastic sams streaming live video Estas son las dos hojas de estilo CSS2 usadas para definir el formato visual de la edición impresa. La primera fue tomada directamente de A List Apart: Printing a Book with CSS: Boom! y modificada ligeramente. La segunda complementa a la primera, y nos permitió mantener la hoja original de estilos relativamente libre de cambios.

[edit]

La hoja original de estilos: book.css 

/* Sample style sheet for boom!, the book microformat              */
/* written  by Hakon Wium Lie and Bert Bos, November 2005          */
/* You may reuse this style sheet for any purpose without any fees */


html { 
  margin: 0;
  font: 10pt/1.26 "Gill Sans", "GillSans", sans-serif;
}

body { 
  margin: 0 0 0 28%;
}

h1, h2, h3, h4, h5, h6 { 
  font-family: "Gentium", "Times", serif;
  margin: 2em 0 0.5em 0;
  page-break-after: avoid;
} 

h1 { 
  padding: 2em 0 2em 0;
  margin: 0;
  font-size: 3em;
  font-weight: 900;
}

h2 { 
  font-size: 1.9em;
  text-transform: uppercase;
  font-weight: bold;
}

h3 { 
  font-size: 1.5em;
  font-weight: bold;
}

q::before {
  content: "\201C";
}

q::after {
  content: "\201D";
}

p { margin: 0 }
p + p { text-indent: 1.3em }
p.sidenote + p, p.caption, p.art { text-indent: 0 }

p.author {
  margin-top: 2em;
  text-indent: 0;
  text-align: right;
}

pre {  margin: 1em 1.3em; }

a { text-decoration: none; color: black }

/* cross-references */

a.pageref::after { content: " en la página " target-counter(attr(href), page); }
a.chapref::before { content: " Capítulo " target-counter(attr(href), chapter) ", "; }
a.figref { content: " Figura " target-counter(attr(href), figure); }
a.tableref { content: " Tabla " target-counter(attr(href), figure); }

/* sidenotes */

.sidenote {
  float: left;
  clear: left;
  margin: 0 0 1em -41%;
  width: 37%;
  font-size: 0.9em;
  font-style: normal;
  text-indent: 0;
  text-align: right;
  page-break-inside: avoid;
}

/* sidebars */

div.sidebar {
  float: top-next;
  margin: 1.2em 0 1.2em 0;
  border: thin solid;
  background: #CCC;
  padding: 0.5em 1em;
  page-break-inside: avoid;
  column-count: 2;
  column-gap: 1.5em;
}

div.sidebar h2 {
  margin-top: 0;
}

/* figures and tables*/

div.figure {
  margin: 1em 0;
  counter-increment: figure;
}

div.figure .caption, div.table .caption {
  float: left;
  clear: left;
  width: 37%;
  text-align: right;
  font-size: 0.9em;
  margin: 0 0 1.2em -40%;
}

div.figure .caption::before {
  content: "Figura " counter(figure) ": ";
  font-weight: bold;
}

div.table .caption::before {
  content: "Tabla " counter(table) ": ";
  font-weight: bold;
}

div.table {
  margin: 1em 0;
  counter-increment: table;
}

div.table th {
  text-align: left;
}

table th, table td {
  text-align: left;
  padding-right: 1em;
}

table.lined td, table.lined th {
  border-top: none;
  border-bottom: thin dotted;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
}


@page {
  margin: 27mm 16mm 27mm 16mm;
  size: A4 portrait;

  @footnotes {
    border-top: thin solid black;
    padding-top: 0.3em;
    margin-top: 0.6em;
    margin-left: 30%;
  }
}

/* define default page and names pages: cover, blank, frontmatter */

@page :left {
  @top-left {
    font: 11pt "Gentium", "Times", serif;
    content: "Software libre para las PyMEs de Guayaquil";
    vertical-align: bottom;
    padding-bottom: 2em;
  }

  @bottom-left {
    font: 11pt "Gentium", "Times", sans-serif;
    content: counter(page);
    padding-top: 2em;
    vertical-align: top;
  }
}

@page :right {
  @top-right {
    font: 11pt "Gentium", "Times", sans-serif;
    content: string(header, first); 
    vertical-align: bottom;
    padding-bottom: 2em; 
  }

  @bottom-right {
    font: 11pt "Gentium", "Times", sans-serif;
    content: counter(page);
    text-align: right;
    vertical-align: top;
    padding-top: 2em;
  }
}

@page frontmatter :left {
  @top-left {
    font: 11pt "Gentium", "Times", sans-serif;
    content: string(title);
    vertical-align: bottom;
    padding-bottom: 2em;
  }

  @bottom-left {
    font: 11pt "Gentium", "Times", sans-serif;
    content: counter(page, lower-roman);
    padding-top: 2em;
    vertical-align: top;
  }
}

@page cover {
   @top-right {
       content: none;
   }
   margin: 0;
}

@page frontmatter :right {
  @top-right {
    font: 11pt "Gentium", "Times", sans-serif;
    content: string(header, first); 
    vertical-align: bottom;
    padding-bottom: 2em; 
  }

  @bottom-right {
    font: 11pt "Gentium", "Times", sans-serif;
    content: counter(page, lower-roman);
    text-align: right;
    vertical-align: top;
    padding-top: 2em;
  }
}

@page blank :left {
  @top-left { content: normal }
  @bottom-left { content: normal }
}

@page blank :right {
  @top-right { content: normal }
  @bottom-right { content: normal }
}

/* footnotes */

.footnote {
  display: none;                   /* default rule */

  display: prince-footnote;        /* prince-specific rules */
  position: footnote;
  footnote-style-position: inside;

  counter-increment: footnote;
  margin-left: 1.4em;
  font-size: 90%;
  line-height: 1.4;
}

.footnote::footnote-call {
  vertical-align: super;
  font-size: 80%;
}

.footnote::footnote-marker {
  vertical-align: super;
  color: green;
  padding-right: 0.4em;
}


/*
   A book consists of different types of sections. We propose to use
   DIV elements with these class names:

    frontcover
    halftitlepage: contains the title of the book
    titlepage: contains the title of the book, name of author(s) and publisher
    imprint: left page with copyright, publisher, library printing information
    dedication: right page with short dedication
    thanks: left page with thanks from the authors
    foreword: written by someone other than the author(s)
    toc: table of contents
    preface: preface, including acknowledgements
    chapter: each chapter is given its own DIV element
    references: contains list of references
    appendix: each appendix is given its own 
    bibliography
    glossary
    index
    colophon: describes how the book was produced
    backcover

   A book will use several of the types listed above, but few books
   will use all of them.
*/

/* which section uses which named page */

div.halftitlepage, div.titlepage, div.imprint, div.dedication,div.thanks { page: blank }
div.foreword, div.toc, div.preface { page: frontmatter }


/* page breaks */

div.frontcover, div.halftitlepage, div.titlepage { page-break-before: right }
div.imprint { page-break-before: always }
div.dedication, div.thanks, div.foreword, div.colophon { 
  page-break-before: always 
}
div.toc, div.preface, div.chapter, div.reference, 
div.appendix, div.bibliography, div.glossary, div.index {
  page-break-before: right 
}
div.backcover { page-break-before: left }

/* the front cover; this code is probably not very reusable by other books */

div.frontcover { page: cover; }

div.frontcover img {
  position: absolute;
  width: 7in; height: 9.25in;
  left: 0; top: 0;
  z-index: -1;
}

div.frontcover h1 {
  position: absolute;
  left: 2cm; top: 1cm; right: 2cm;
  color: #666;
  font-size: 44pt;
  font-weight: normal;
}

div.frontcover h2 {
  position: absolute;
  text-align: right;
  right: 2cm; top: 8cm; left: 2cm; 
  color: black;
  font-size: 16pt;
  font-weight: normal;
  padding: 0.2em 0.2em 0.2em 1em;
  letter-spacing: 0.15em;
}

div.frontcover h3 {
  position: absolute;
  left: 2cm; top: 7cm;
  color: white;
  font-size: 24pt;
  font-weight: normal;
}

div.frontcover p {
  position: absolute;
  left: 2cm; bottom: 1.5cm;
  font-size: 24pt;
  color: black;
  font-weight: bold;
  text-transform: uppercase;
}


/* titlepage, halftitlepage */

div.titlepage h1, div.halftitlepage h1 { margin-bottom: 2em; }
div.titlepage h2, div.halftitlepage h2 { font-size: 1.2em; margin-bottom: 3em; }
div.titlepage h3, div.halftitlepage h3 { font-size: 1em; margin-bottom: 3em; }
div.titlepage p, div.halftitlepage p { 
  font-size: 1.4em;
  font-weight: bold;
  margin: 0; padding: 0;
}


/* TOC */

ul.toc, ul.toc ul { 
  list-style-type: none;
  margin: 0; padding: 0;
}
ul.toc ul {
  margin-left: 1em;
  font-weight: normal;
}
ul.toc > li { 
  font-weight: bold;
  margin-bottom: 0.5em;
}
ul.toc a::after {
  content: leader('.') target-counter(attr(href), page);
  font-style: normal;
}
ul.toc > li.frontmatter a::after {
  content: leader('.') target-counter(attr(href), page, lower-roman);
  font-style: normal;
}
ul.toc > li.endmatter a::after {
  content: leader('.') target-counter(attr(href), page);
  font-style: normal;
}
ul.toc > li.chapter::before {
  content: "Capítulo " counter(toc-chapter, decimal);
  display: block;
  margin: 1em 0 0.1em -2.5cm;
  font-weight: normal;
  counter-increment: toc-chapter;
  page-break-after: avoid;
}

/* chapter numbers */

div.chapter { counter-increment: chapter; }

h1::before {
  white-space: pre;
  margin-left: -2.5cm;
  font-size: 50%;
  content: "\B0  \B0  \B0  \B0  \B0 \A";  /* ornaments */
}

div.chapter h1::before { content: "Capítulo " counter(chapter) " \A"; }

div.frontcover h1::before, div.titlepage h1::before, div.halftitlepage h1::before {
  content: normal;                  /* that is, none */
}

h1 { string-set: header content();}
div.chapter h1 { string-set: header "Capítulo " counter(chapter) ": " content(); }

/* index */

ul.index { 
  list-style-type: none;
  margin: 0; padding: 0;
  column-count: 2;
  column-gap: 1em;
}

ul.index a::after { content: ", " target-counter(attr(href), page); }


span.element, span.attribute {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 80%;
}
span.property { font-weight: bold }
code, span.css, span.value, span.declaration {
  font: 90% "Lucida Console", "Lucida Sans Typewriter", monospace;
}


@media screen, handheld {
  html { margin: 1em; font: 14px "Gill Sans", "GillSans", sans-serif; }
  h1 { margin-bottom: 0.5em }
  div.frontcover, div.halftitlepage, div.titlepage, div.imprint, 
  div.dedication, div.thanks, div.foreword, div.index { display: none }
}
[edit]

La hoja suplementaria de estilos: bookextra.css 

@media print {

	.editsection {
		display: none;
	}

}

blockquote {
	margin-left: 0em;
	padding-left: 2em;
	border-left: 1em solid #CCC;
	font: 11pt "Gentium", "Times", serif;
}

blockquote cite, .footnote {
	/* same font for citations and footnotes */
	font: 8pt/1.26 "Gill Sans", "GillSans", sans-serif;
}

blockquote .footnote, .sidenote .footnote {
	text-align: left;
}

.footnote {
	text-indent: 0em;
}

pre {
	font-size: 0.9em;
}

p {
	text-align: justify;
}

p.sidenote {
	text-align: right;
}

blockquote cite {
	display: block;
	text-align: right;
}

.tright {
	float: right;
}

/* overriding the captions in right-aligned images */
div.figure.tright .caption, div.table.tright .caption {
  float: none;
  text-align: right;
  margin: 0 0 0 0;
  width: 100%;
}

.sidenote div.figure .caption, .sidenote div.table .caption {
  float: none;
/*   clear: left; */
  width: 100%;
/*   text-align: right; */
/*   font-size: 0.9em; */
   margin: 0 0 1.2em 0;
}

th {
	background-color: #CCC;
}

th, td {
	vertical-align: top;
}

.tleft {
	float: left:
}

dt {
	font-style: italic;
}

div.figure, div.table { page-break-inside: avoid; }
.figure a img {
  border: none;
}

a.fragmentref::after { content: " (p. " target-counter(attr(href), page) ")" ; }
a.glossaryref, a.citationref { content: " (p. " target-counter(attr(href), page) ")" ; }
a.glossaryref, a.citationref { font-size: 80%; }

/*matrizfoda */

.matrizfoda {
	  font: 67%;
}

.matrizfoda dt {
  display: run-in; padding-right: 1em;
}

.matrizfoda dd {
  font-weight: normal;
  margin-left: 0em;
  padding-left: 0em;
  line-height: 1em;
  margin-bottom: 0.1em;
  padding-bottom: 0em;
}

.matrizfoda dl {
	font-weight: normal;
	margin: 0px;
	padding: 0px;
}

.cuadrofoda th {
	padding-right: 0.5em; padding-left: 0.5em; font-size: 3em; text-align: center; line-height: 2em;
}

.cuadrofoda td {
	padding-left: 1em;
}

/* sideways page definitions */

@page wide-sideways {
  margin: 27mm 16mm 27mm 16mm;
  size: A4 landscape;
}

div.wide-sideways {
  page: wide-sideways;
  margin-left: -41%;
}

div.wide-sideways div.figure .caption, div.sideways div.table .caption {
  display: none;
}

div.wide-sideways .sidenote {
  display: none;
}

@page sideways {
  margin: 27mm 16mm 27mm 16mm;
  size: A4 landscape;
}

div.sideways {
  page: sideways;
  margin-left: -10%;
}

div.sideways div.figure .caption, div.sideways div.table .caption {
  width: 24%;
  margin: 0 0 1.2em -26%;
}

div.sideways .sidenote {
  margin: 0 0 1em -27%;
  width: 24%;
}

/* appendix magic */
div.appendix { counter-increment: appendix; }
div.appendix h1::before { content: "Apéndice " counter(appendix) " \A"; }
div.appendix h1 { string-set: header "Apéndice " counter(appendix) ": " content(); }
ul.toc > li.appendix > a {
  content: "Apéndice " counter(toc-appendix, decimal) ": " content() ;
/*   display: block; */
/*   margin: 1em 0 0.1em -2.5cm; */
/*   font-weight: normal; */
  counter-increment: toc-appendix;
  page-break-after: avoid;
}

/* the original book.css had a typo in the references word,
   so we copy the stanza and apply to .references
 */
div.references {
  page-break-before: right 
}
Retrieved from "http://software-libre.rudd-o.com/Hojas_de_estilo_CSS2_para_la_edici%C3%B3n_impresa"
Personal tools