Как исключить HTML DIV из указанной c страницы в документе rmarkdown paged- HTML? - PullRequest
Новая
       35

Как исключить HTML DIV из указанной c страницы в документе rmarkdown paged- HTML?

3 голосов
/ 03 августа 2020

Я использую разбитый на страницы шаблон документа HTML на Rmarkdown, и я хотел удалить верхний и нижний колонтитулы, созданные с использованием пользовательских CSS и HTML. Я пробовал использовать :not(), но не смог указать селектор в CSS, поскольку я не уверен, какой селектор использовать.

(ОБНОВЛЕНИЕ: я смог придумать беспорядочный обходной путь которые я мог бы использовать в CSS для верхнего и нижнего колонтитула, я настроил атрибут «верхний» для верхнего колонтитула и «низ» для нижнего колонтитула.) 

@media print {
  div.divHeader { 
    position: fixed;
    top: 452px;#page length in pixels
    left: 0;
  }
}
@media print {
  div.divFooter { 
    position: fixed;
    bottom: -452px; # negative since using Bottom not Top *note: not real size
    left: 0;
  }
}

Однако, если есть менее окольный путь Чтобы добиться этого, ниже - то, что я пробовал, пожалуйста, помогите предложить более чистое предложение.

Я определил отдельный div для верхнего и нижнего колонтитула с соответствующими элементами в каждом, как показано ниже: 

---
title: "Title Here"
author: 
date: 
output:
  pagedown::html_paged:
    toc: true
    self_contained: false
    css:
      - default-fonts
      - default
      - custom-page-portrait.css
      - Pagesplit.css
knit: pagedown::chrome_print

---
<div class="divFooter">
   <div class="divFooter--line"> <body><hr></body> </div>
   <div class="divFooter--ReportDate"style = "font-family:calibri;"> **Report Date:**<br>10/12/112</div>
   <div class="divFooter--ReportAnalyst" style = "font-family:calibri;"> **Report Analyst**<br>John Smith</div>
   <div class="divFooter--HoldingsDate" style = "font-family:calibri;"> **Holdings Date**<br>December 31, 2018</div>

</div>


<div class="divHeader">
  <div class="divHeader--left" style = "font-family:calibri;"> **Header Left**<br>under half</div>
  <div class="divHeader--right" style = "font-family:calibri;"> **Header Right**<br>under half</div>

</div>

и CSS

/*Header*/
@media screen {
  div.divHeader {
    display: none;
  }
}
@media print {
  div.divHeader { 
    position: fixed;
    top: 0;
    left: 0;
  }
}
/*https://www.w3schools.com/howto/howto_css_style_header.asp*/
/* http://getbem.com/introduction/ */
.divHeader {
  position: relative;
  padding: 10px;
  text-align: center;
  background: #F15A55;/*not real colour*/
  color: white;
  font-size: 25px;
  width: 100%;
  height:8%;
  float: none;
}

.divHeader--left {
  position: absolute;
  text-align: left;
  float: left;
  left: 50px;
  top: 10px;
}

.divHeader--right {
  position: absolute;
  text-align: right;
  float: right;
  right: 50px;
  top: 10px;
}

Нижний колонтитул css аналогичен.

исходный пользовательский css для страницы: 

@page {
  size: 8.3in 11.7in;
}

/* store some string variables */
.shorttitle1 {
  string-set: h1-text content(text);
}

.shorttitle2 {
  string-set: h2-text content(text);
}

/* left page */
.running-h1-title {
  position: running(runningH1Title);
  width: var(--running-title-width);
  text-overflow: ellipsis;
  overflow: hidden;
}
.running-h1-title:before {
  content: string(h1-text);
}

@page :first{
    content: "Some text";
    position: relative;
    
  }
@page :first {
  @top-left {
     content: none;
  }
  @top-right {
    content: none;
  }
  @bottom-right {
    content: none !important;
  }
  background-image: var(--front-cover);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
@page {
  @bottom-left{
    <div class="footerObj"> 
      <hr>
      <p>A Name.</p>
    </div>;
  }
}
.footerObj {
  top: 10px;
  text-indent: 100px;
}
@page :left {
  @bottom-right {
    content: counter(page);
  }
}

@page :right {
  @bottom-right {
    content: counter(page);
  }
}

/* Front cover */
.front-cover {
  break-after: page;
}

/* page breaks; aka CSS fragmentation */
.level1 {
  break-before: page;
}
.section > h1, .section > h2, .section > h3, .section > h4, .section > h5, .section > h6 {
  break-after: avoid;
}
.footnotes {
  break-before: always;
  break-after: always;
}
.figure {
  break-inside: avoid;
}

/* do not break captions */
caption {
  break-inside: avoid;
  break-after: avoid;
}
...