Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS regressed to data URI #7367

Closed
mcdemarco opened this issue Jun 9, 2021 · 2 comments
Closed

CSS regressed to data URI #7367

mcdemarco opened this issue Jun 9, 2021 · 2 comments

Comments

@mcdemarco
Copy link

As mentioned in issue #3423, CSS stylesheet inclusion in HTML seems to have regressed to a data URI (rather than inclusion within style tags). The encoding is not base64. My stylesheet is simple and is passed in with --css so has no media attribute that might have triggered the behavior.

I'm running pandoc 2.14.0.1 from the MacOS package on Sierra (MacOS 10.12.6). A minimal example is pandoc -d test with test.yaml:

input-file: test.md
output-file: test.html

standalone: true
self-contained: true

css:
- test.css

test.md:

---
title: Test Story
---

## Lorem

ipsum dolor sit amet.

test.css:

body { color:red;}

The output:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang xml:lang>
<head>
  <meta charset="utf-8" />
  <meta name="generator" content="pandoc" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
  <title>Test Story</title>
  <style>
    code{white-space: pre-wrap;}
    span.smallcaps{font-variant: small-caps;}
    span.underline{text-decoration: underline;}
    div.column{display: inline-block; vertical-align: top; width: 50%;}
    div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
    ul.task-list{list-style: none;}
    .display.math{display: block; text-align: center; margin: 0.5rem auto;}
  </style>
  <link rel="stylesheet" href="data:text/css,body%20%7B%20color%3Ared%3B%7D%0A" />
  <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
  <![endif]-->
</head>
<body>
<header id="title-block-header">
<h1 class="title">Test Story</h1>
</header>
<h2 id="lorem">Lorem</h2>
<p>ipsum dolor sit amet.</p>
</body>
</html>
@jgm
Copy link
Owner

jgm commented Jun 9, 2021

To clarify:

See also #4481.

@mcdemarco
Copy link
Author

The HTML works with the data URI and I don't desperately need to see the CSS in style tags, though I think that's preferable. I only found this trail of issues while trying to fix something else, and ended up wondering if I'd just missed the correct combination of flags to get the CSS into style tags instead of the data URI.

@tarleb asked for an issue to be reported back on #3423 in response to a comment about this behavior as a regression, and #4481 seemed to imply that it is still unexpected in my case. I didn't see an issue from the person who said they'd look into it, so I made one.

@anthonynorth anthonynorth mentioned this issue Oct 22, 2021
Closed
@jgm jgm closed this as completed in ef7b769 Oct 22, 2021
@Rudokhvist Rudokhvist mentioned this issue Oct 5, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jgm @mcdemarco