I'm using wkhtmltopdf toc feature, to generate a dynamic summary. Is there a way to avoid the rendering of h1, h2, h3, h4 tags in case there is an "ignore" class attached to the hn tag ?
For example, if we have:
<h1 class="ignore">First Title</h1> inside my HTML markup, this title should not be added to my summary.
HTML:
<h1 class="ignore">First Title</h1>
<h1 >Second Title</h1>
Result:
Second Title --------------------- Page x
This is my toc.xls:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:outline="http://wkhtmltopdf.org/outline"
xmlns="http://www.w3.org/1999/xhtml">
<xsl:output doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona
l.dtd"
indent="yes" />
<xsl:template match="outline:outline">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
h1 {
text-align: center;
font-size: 20px;
font-family: arial;
}
div {border-bottom: 1px dashed rgb(200,200,200);}
span {float: right;}
li {list-style: none;}
ul {
font-size: 20px;
font-family: arial;
}
ul ul {font-size: 80%; }
ul {padding-left: 0em;}
ul ul {padding-left: 1em;}
a {text-decoration:none; color: black;}
</style>
</head>
<body>
<ol><xsl:apply-templates select="outline:item/outline:item"/></ol>
</body>
</html>
</xsl:template>
<xsl:template match="outline:item">
<li>
<xsl:if test="#title!=''">
<div>
<a>
<xsl:if test="#link">
<xsl:attribute name="href"><xsl:value-of select="#link"/></xsl:attribute>
</xsl:if>
<xsl:if test="#backLink">
<xsl:attribute name="name"><xsl:value-of select="#backLink"/></xsl:attribute>
</xsl:if>
<xsl:value-of select="#title" />
</a>
<span> <xsl:value-of select="#page" /> </span>
</div>
</xsl:if>
<ol>
<xsl:comment>added to prevent self-closing tags in QtXmlPatterns</xsl:comment>
<xsl:apply-templates select="outline:item"/>
</ol>
</li>
</xsl:template>
</xsl:stylesheet>
I think there are two ways to accomplish this:
Don't use an hn tag for those headers you want to hide from toc. Create css classes that imitate the style of the corresponding hn tags (e. g. .h1 .h2 and so on). Then turn <h2 class="ignore">Lorem ipsum</h2> into <div class="h1">Lorem ipsum</div>.
Add a class definition to your toc styles:
.ignore { display: none; }
Related
I have a spring boot program that uses thymeleaf. The web page loads. But the web page cannot find my css files. I see the follow logged by spring boot. The web page is loaded with this url: http://localhost:9090/lotto/rawdataocc.
No mapping for GET /lotto/lotto.css
The CSS file is under resources/static directory
The thymleleaf template is under templates directory.
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Historical Lotto Number Occurances</title>
<link th:href="#{lotto.css}" rel="stylesheet" />
<!--
<style>
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
</style>
-->
</head>
<body>
<table id="customers" >
<tr>
<th>Lotto Number</th>
<th>Occurrence</th>
</tr>
<tr th:each="list: ${list}">
<td th:text="${list.lottoNumber}" />
<td th:text="${list.occurance}" />
</tr>
</table>
</body>
</html>
What you're missing is a single slash /.
Instead of:
<link th:href="#{lotto.css}" rel="stylesheet" />
... do:
<link th:href="#{/lotto.css}" rel="stylesheet" />
This will make your url context-relative instead of page-relative (link)
I'm practicing with SCSS and two minutes ago my code was working, before splitting the variables and creating the folder structure.
But now, no matter what I change, there's no way to change the font. It just loads with Times New Roman.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<!-- <link rel="stylesheet" href="css/icon-font.css"> -->
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<title>Tours</title>
</head>
<body>
<header class="header">
<div class="header__logo-box">
<img src="img/logo-white.png" alt="Logo" class="header__logo">
</div>
<div class="header__text-box">
<h1 class="heading-primary">
<span class="heading-primary--main">Outdoors</span>
<span class="heading-primary--sub">is where life happens.</span>
</h1>
Discover our tours
</div>
</header>
</body>
body {
font-family: "Lato", sans-serif;
font-weight: 400;
/*font-size: 16px;*/
line-height: 1.7;
color: $color-grey-dark;
padding: 3rem;
}
.heading-primary {
color: $color-white;
text-transform: uppercase;
backface-visibility: hidden;
margin-bottom: 6rem;
}
The imports are ok, so it should be working.
Your code is working fine in jsfiddle. It's displaying Lato as the font. Did you try clearing your cache? You could also try changing the link to:
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900&display=swap" rel="stylesheet">
This will give an unlimited swap period to load the font if it takes to long to download before render.
I made container with attribute flex. Put inside 3 images with same height 830px but different width:
img 602x830 px
img 613x830 px
img 599x830 px
made for images attribute: width 100%
All seems to look correct until screen size is more then 630px. After the screen became 630 px and less the height of one image (2-img) became less then others two images.
How to made all images the same height no matter what the screen size becomes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Document</title>
<style type="text/css">
.category-block {
max-width: 768px;
margin:0 auto;
overflow:hidden;
}
.flex-block {
display:flex;
flex-direction: row;
align-items: stretch;
}
.flex-block img {
width: 100%;
}
</style>
</head>
<body>
<div class="category-block">
<div class="flex-block">
<div class="flex-block__area">
<img src="1-img.jpg"></img>
</div>
<div class="flex-block__area">
<img src="2-img.jpg"></img>
</div>
<div class="flex-block__area">
<img src="3-img.jpg"></img>
</div>
</div>
</div>
</body>
</html>
This is an issue I found on Firefox and I haven't found why it fail.
Here is one workaround, using a Firefox CSS hack, making also the flex-block__area a flex container.
The CSS hack is needed to target only on Firefox, or else it will mess up the other browsers instead
Fiddle demo
Stack snippet
.category-block {
max-width: 768px;
margin: 0 auto;
overflow: hidden;
}
.flex-block {
display: flex;
}
.flex-block img {
width: 100%;
}
/* Firefox bug fix */
#supports (-moz-appearance:meterbar) and (display:flex) {
.flex-block__area {
display: flex;
}
}
<div class="category-block">
<div class="flex-block">
<div class="flex-block__area">
<img src="http://placehold.it/602x830/f00">
</div>
<div class="flex-block__area">
<img src="http://placehold.it/613x830/0f0">
</div>
<div class="flex-block__area">
<img src="http://placehold.it/599x830/00f">
</div>
</div>
</div>
I have the next code:
<!doctype html>
<head>
<head>
<meta charset="utf-8">
<title>Goerman</title>
</head>
<body>
<center>
<div id="image">
<img alt="Embebed Image" src="data:image/gif; base64,R0lG--IMAGE IN BASE64--="/>
</div>
</center>
</body>
</head>
I need that the animate image auto-set to screen the device or size of the navigator.
Add the following class to your style sheet and the corresponding class to your img tag
<style>
.responsiveImage {max-width: 100%; width: auto; height: auto;}
</style>
<img src="data:image/gif; base64,R0lG--IMAGE IN BASE64--=" class="responsiveImage" />
Using wkhtmltopdf 0.11.0_rc1 (weirdly reporting itself as 0.10.0 rc2) on MacOSX.
This input HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<style type="text/css">
#page{
size: landscape;
margin: 10mm;
}
div.page {
height: 180mm;
width: 274mm;
overflow: hidden;
border: 1px solid #ddd;
page-break-inside: avoid;
page-break-after: always;
}
</style>
</head>
<body>
<div class="page">Page 1</div>
<div class="page">Page 2</div>
<div class="page">Page 3</div>
</body>
<html>
being processed like so:
wkhtmltopdf --orientation landscape input.html output.pdf
results in no page breaks:
What am I doing wrong?
This might just be a problem of this specific version of wkhtmltopdf.
The most current version wkhtmltopdf 0.12.1 (with patched qt) does respect the page breaks.