bookdown::tufte_html_book does not place citation in margin for csl with note. For example:
bookdown::render_book(input = "index.rmd",
output_format = "bookdown::tufte_html_book")
with csl from: https://raw.githubusercontent.com/citation-style-language/styles/master/chicago-fullnote-bibliography-short-title-subsequent.csl
For file index.rmd:
---
title: "Test title"
output:
bookdown::tufte_html_book
link-citations: yes
bibliography: [test.bib]
csl: chicago-fullnote-bibliography-short-title-subsequent.csl
---
# First section
The citation for this[#edwinabbottFlatlandRomanceMany2018] should show up in the margin.
and bibliography test.bib:
#book{edwinabbottFlatlandRomanceMany2018,
title = {Flatland: {{A Romance}} of {{Many Dimensions}}},
shorttitle = {Flatland},
author = {{Edwin Abbott}},
year = {2018},
publisher = {{CreateSpace Independent Publishing Platform}},
file = {/Users/ssp3nc3r/Zotero/storage/NZBIJ84R/Edwin Abbott - 2018 - Flatland A Romance of Many Dimensions.pdf},
isbn = {978-1-5239-6216-7}
}
results in this html:
<!DOCTYPE html>
<html lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content="Test title" />
<meta property="og:type" content="book" />
<meta name="description" content="Test title">
<title>Test title</title>
<link href="libs/tufte-css-2015.12.29/tufte-fonts.css" rel="stylesheet" />
<link href="libs/tufte-css-2015.12.29/tufte-background.css" rel="stylesheet" />
<link href="libs/tufte-css-2015.12.29/tufte-italics.css" rel="stylesheet" />
<link href="libs/tufte-css-2015.12.29/tufte.css" rel="stylesheet" />
</head>
<body>
<div class="row">
<div class="col-sm-12">
<div id="TOC">
<ul>
<li><span class="toc-section-number">1</span> First section</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="header">
<h1 class="title">Test title</h1>
</div>
<div id="first-section" class="section level1">
<h1><span class="header-section-number">1</span> First section</h1>
<p>The citation for this<span class="citation"><sup>1</sup></span> should show up in the margin.</p>
<div id="refs" class="references">
<div>
<p>Edwin Abbott. <em>Flatland: A Romance of Many Dimensions</em>. CreateSpace Independent Publishing Platform, 2018.</p>
</div>
</div>
</div>
<p style="text-align: center;">
</p>
</div>
</div>
</body>
</html>
This was due to a bug in the tufte package, which has been fixed. You may install.packages('tufte') and the problem should be gone.
Related
I'm making my first reveal.js presentation and have set a global footer in the body of the html file. I would like to remove the footer for a single slide, however, I cannot figure out how to do that.
Below is my current file, with the footer at the end:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TITLE</title>
<meta
name="description"
content="DESCRIPTION"
/>
<meta name="author" content="MY NAME" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="dist/reset.css" />
<link rel="stylesheet" href="dist/reveal.css" />
<link rel="stylesheet" href="dist/theme/black.css" id="theme" />
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="plugin/highlight/monokai.css" />
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<a href="https://example.com/">
<img
src="images/example.png"
alt="Example logo"
style="
height: 360px;
margin: 0 auto 4rem auto;
background: transparent;
"
class="logo"
/>
</a>
<h4>Title of my presentation</h4>
<p style="font-size: 30px">
Subtitle
</p>
</section>
<section>
<section class="center">
<h2>What goes here?</h2>
</section>
<section class="center">
<p>Lorem ipsum dolor sit amet</p>
</section>
<section class="center">
<pre>
<code>
Here is the code
</code>
</pre>
</section>
</section>
</div>
</div>
<!-- Default plugins -->
<script src="dist/reveal.js"></script>
<script src="plugin/zoom/zoom.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/search/search.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
// Also available as an ES module, see:
// https://revealjs.com/initialization/
Reveal.initialize({
controls: true,
progress: true,
center: true,
hash: true,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [
RevealZoom,
RevealNotes,
RevealSearch,
RevealMarkdown,
RevealHighlight,
],
});
</script>
<!-- 1. Create hidden footer <div> -->
<div id="hidden" style="display:none;">
<div id="footer">
<div id="footer">Copyright 2022</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
// 2. On Reveal.js ready event, copy footer <div> into each `.slide-background` <div>
var footer = $('#footer').html();
$('div.reveal').append(footer);
</script>
</body>
</html>
Any tips or suggestions would be greatly appreciated!
First, you have a comment that says
On Reveal.js ready event, copy footer
but I can't see that in your code. To me, it seems like a plain append.
Now to your question, you should listen to the slideChanged event and remove the footer when the current slide is the slide you don't want the footer in:
Reveal.on( 'slidechanged', event => {
// event.previousSlide, event.currentSlide, event.indexh, event.indexv
} );
The event.currentSlide is the index of the slide, so you can retrieve the slide you want this way. Yes, it is very brittle since it will break if the slide's index changes, but it is the only way...
Hello everyone,
I just started learing Kotlin and Ktor for Web Development. I started creating a Template and everything worked perfectly but now I want to add an image to my Templates. In the Kotlin Docs they created a static route but it doesn't work:
Template:
<#macro layout>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Document -->
<title>${pageName.name} | Test</title>
<meta name="description" content="This is the official website of. ">
<meta name="keywords" content="web, ...">
<meta name="author" content="">
<link rel="shortcut icon" href="img/favicon.ico"/>
<!-- Document -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="main-picture">
<div class="header">
<div class="img">
<img alt="Logo" width="60px" height="auto" src="image/logo.png">
</div>
<div class="toggle-button">
<span class="bar-1"></span>
<span class="bar-2"></span>
<span class="bar-3"></span>
</div>
<nav class="navbar">
<ul>
<li>Home</li> <!-- Home -->
<li>Concept</li> <!-- Concept -->
<li>Offers</li> <!-- Offers -->
<li>About Us</li> <!-- AboutUS -->
</ul>
</nav>
</div>
</div>
</header>
<main>
<#nested>
</main>
<footer>
<div class="footer-gen">
<div class="footer">
Imprint <!-- Imprint -->
Privacy Policy <!-- Privacy -->
Conditions <!-- Conditions -->
</div>
<div class="footer-name">
<p>© 2022 - vision2success</p>
</div>
</div>
</footer>
</body>
</#macro>
Routing
import io.ktor.http.*
import io.ktor.server.application.*
import io.ktor.server.freemarker.*
import io.ktor.server.response.*
import io.ktor.server.routing.*
fun Application.imgRouting() {
routing {
get("/") {
call.respondRedirect("images")
}
route("images") {
get("/favicon.ico") {
call.respond(
FreeMarkerContent(
"img/favicon.ico",
model = null,
contentType = ContentType.Image.Any
)
)
}
get("/logo.png") {
call.respond(
FreeMarkerContent(
"logo.png",
model = null,
contentType = ContentType.Image.PNG
)
)
}
}
}
}
Error:
The http://localhost:8080/images/logo.png graphic cannot be displayed because it contains errors.
NK
Why this code is valid with https://validator.w3.org/nu/#textarea ?
No </html> and </p> at the end of the code.
Is it new ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>xxxx</title>
</head>
<body>
<div class="xxx">xxxxxxxxx</div><br />
<div class="xx">xxxx</div>
<div class="xx">xxxxx</div>
<div class="xx">xxx</div><br />
<div class="xx">xxxxxx</div>
<div class="xx">xxxx ?</div>
<div class="xx">L'xxx</div> <br />
<div class="xx">xxxxxx</div><br />
<div class="xxx">
<img src="fichiers/images/img.png" alt="xxxx" class="xxx">
</div>
<span class="xxxx">xxxx xxxxx</span>
<p>
<img src="xxx/x/xxx.jpg" alt="xxx" class="xxxxx" />
</p>
<div class="xxxx">
<img src="xxx/x/xxxxx.png" alt="xxxx xx" class="xx">
</div>
<p>
</body>
No, it is not new. End tags for those elements have been optional since the first version of HTML. The nu validator has got that part of the spec right for as long as I have been using it (as has the previous, DTD based, validator).
I have been having a problem with my code, I wanted the text to be in the centre, but no matter what I do, it just won't go there. I have added a comment indicating the location of the text I wanted to be centred. Any help is appreciated.
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mix Pics</title>
<meta name="description" content="A photography-inspired website layout with an expanding stack slider and a background image tilt effect" />
<meta name="keywords" content="photography, template, layout, effect, expand, image stack, animation, flickity, tilt" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/flickity.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<div class="hero">
<div class="hero__back hero__back--static"></div>
<div class="hero__back hero__back--mover"></div>
<div class="hero__front"></div>
</div>
<header class="codrops-header">
<div class="codrops-links">
<a class="codrops-icon codrops-icon--prev" href="index.html" title="Home Page"><span>Home Page</span></a>
<a class="codrops-icon codrops-icon--drop" href="index.html" title="Home Page"><span>Home Page</span></a>
</div>
<h1 class="codrops-title">Mix <span>Pics</span></h1>
<div align="center">
<h3>About</h3> <!-- This text for some reason is in the top right hand corner, not the centre. -->
</div>
</body>
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 6 years ago.
I'm developing an ASP.NET MVC 5 app with Visual Studio 2015, C# and .NET Framework 4.6.1.
I have this _Layout.cshtml page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My product</title>
#Styles.Render("~/Content/css")
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link href="~/css/common.css" rel="stylesheet" type="text/css" media="all" />
#RenderSection("Styles", required: false)
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="header_bg">
<div class="wrap">
<div class="header">
<div class="logo">
<img src="~/images/logo.png" alt="" /><br />
<span>Versión 2.0</span>
</div>
<div class="nav">
¡Hola, #User.Identity.Name!
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<div class="container body-content">
#RenderSection("Body")
<hr />
<footer>
<p style="font-size:20px">© #DateTime.Now.Year - My Company</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
All my pages won't have vertical scrollbar and I want to show <footer> always at the bottom of the page.
How can I do it?
footer{
position:fixed;
bottom:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My product</title>
#Styles.Render("~/Content/css")
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link href="~/css/common.css" rel="stylesheet" type="text/css" media="all" />
#RenderSection("Styles", required: false)
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="header_bg">
<div class="wrap">
<div class="header">
<div class="logo">
<img src="~/images/logo.png" alt="" /><br />
<span>Versión 2.0</span>
</div>
<div class="nav">
¡Hola, #User.Identity.Name!
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<div class="container body-content">
#RenderSection("Body")
<hr />
<footer>
<p style="font-size:20px">© #DateTime.Now.Year - My Company</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
A footer that stays at the bottom of the page or 'sticky footer' can be achieved with some css. You will have to move the footer outside of the .container body-content.
Here is an example - take a look here https://css-tricks.com/snippets/css/sticky-footer/