Trouble rendering Css Data in Django? - css

So I'm trying to export a section of a website to PDF, and I'm able to output the HTML data properly, but the CSS codes just appears as text in the PDF.
>
def exportPDf(results, css, html):
>
> result = StringIO.StringIO()
>
> results_2 = StringIO.StringIO(results.encode("UTF-8"))
> css_encode = StringIO.StringIO(css.encode("UTF-8"))
>
> pdf = pisa.pisaDocument(results_2 , result)#ISO-8859-1
>
> if not pdf.err:
> return HttpResponse(result.getvalue(), mimetype='application/pdf')
> return HttpResponse('We had some errors<pre>%s</pre>' % escape(html))
>
> def get_data(request):
> results = request.GET['css'] + request.GET['html']
> html = request.GET['html']
> css = request.GET['css']
> return ExportPDf(results, css, html)
Again, the HTML is fine. IT's just the css part that doesn't render. It outputs the actual CSS codes to PDF.

If you've setup your CSS as such:
<style type="text/css">
body {
color:#fff;
}
</style>
Try wrapping your css with comments:
<style type="text/css">
<!--
body {
color:#fff;
}
-->
</style>
This will force the CSS as a comment and thus won't render. Since I can't see how your code is rendered this is just a guess but let me know if it does indeed work :)

Related

How to override this single selector within a CSS ruleset (Firefox web browser user interface)?

Firefox 89 includes many changes to the web browser's UI.
One of the benefits of the new UI is that tabs can show a secondary information row to indicate, for example, if media is playing in a tab.
Unfortunately, when the highly-desirable compact mode is used, these secondary info rows disappear.
I went through the Firefox source code, and determined that this issue is created by this line of CSS code:
:root[uidensity="compact"] .tab-secondary-label, .tab-secondary-label:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]), .tab-secondary-label:not([activemedia-blocked]) > .tab-icon-sound-blocked-label, .tab-secondary-label[muted][activemedia-blocked] > .tab-icon-sound-blocked-label, .tab-secondary-label[activemedia-blocked] > .tab-icon-sound-playing-label, .tab-secondary-label[muted] > .tab-icon-sound-playing-label, .tab-secondary-label[pictureinpicture] > .tab-icon-sound-playing-label, .tab-secondary-label[pictureinpicture] > .tab-icon-sound-muted-label, .tab-secondary-label:not([pictureinpicture]) > .tab-icon-sound-pip-label, .tab-secondary-label:not([muted]) > .tab-icon-sound-muted-label, .tab-secondary-label:not([showtooltip]) > .tab-icon-sound-tooltip-label, .tab-secondary-label[showtooltip] > .tab-icon-sound-label:not(.tab-icon-sound-tooltip-label) {
display: none;
}
As you can see, the selector :root[uidensity="compact"] .tab-secondary-label at the beginning of this ruleset is causing this issue.
I would like to add to the userChrome.css overlay a CSS ruleset to overcome this issue, but I'm not exactly sure how. Yes, I could just change this ruleset in the Firefox source code, and recompile the browser, but I would prefer not to go through that hassle for every Firefox update.
Within userChrome.css, for obvious reasons, something like:
:root[uidensity="compact"] .tab-secondary-label {
display: revert !important;
}
or
:root[uidensity="compact"] .tab-secondary-label {
display: unset !important;
}
will not quite work.
What is a good CSS technique to use to accomplish this goal?
I figured out a solution.
I don't love it, but it does work.
.tab-secondary-label {
display: -moz-box !important;
}
.tab-secondary-label:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]), .tab-secondary-label:not([activemedia-blocked]) > .tab-icon-sound-blocked-label, .tab-secondary-label[muted][activemedia-blocked] > .tab-icon-sound-blocked-label, .tab-secondary-label[activemedia-blocked] > .tab-icon-sound-playing-label, .tab-secondary-label[muted] > .tab-icon-sound-playing-label, .tab-secondary-label[pictureinpicture] > .tab-icon-sound-playing-label, .tab-secondary-label[pictureinpicture] > .tab-icon-sound-muted-label, .tab-secondary-label:not([pictureinpicture]) > .tab-icon-sound-pip-label, .tab-secondary-label:not([muted]) > .tab-icon-sound-muted-label, .tab-secondary-label:not([showtooltip]) > .tab-icon-sound-tooltip-label, .tab-secondary-label[showtooltip] > .tab-icon-sound-label:not(.tab-icon-sound-tooltip-label) {
display: none !important;
}
If anyone can propose different techniques, I'm interested in reading your answer(s).

Symfony DOM Crawler: querying tag which matched current item

I'm using the Symfony DOM crawler to scrape some websites and one of the issues I'm having is that if I have a scrape target which contains multiple tags, such as:
$content['html'] = $crawler->filter('
#content > div.container > div.row > div > p:nth-child(n+4),
#content > div.container > div.row > div > h3,
#content > div.container > div.row > div > blockquote')->each(function($node) {
$data = strip_tags($node->html(), '<div>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <a>, <strong>, <em>, <img>');
return $data;
});
I'm not getting the [p], [h3] or [blockquote] tags in my results (which is correct). However, depending on which tag I've just scraped, I would like to process the result a bit further rather than just returning it.
Is there any way the crawler can be queried to return the tag which the current item was matched against? Basically, I'd like to know whether the current item/tag I've matched was a [p], [h3] or [blockquote] which in turn will enable me to further process the results.
Figured it out ... there is a method
$node->nodeName();
which returns the tag the query was matched against ...

Preventing <code> tags within <pre>

I am writing documentation using R Markdown. After "knitting", the resulting markdown source might look like this:
The variables `x` and `p` are related as follows:
```r
x <- 1
c(x = x, p = pnorm(x))
```
```out
x p
1.0000000 0.8413447
```
... which when converted using pandoc (with syntax highlighting disabled), results in:
The variables <code>x</code> and <code>p</code> are related as follows:
<pre class="r"><code>x <- 1
c(x = x, p = pnorm(x))</code></pre>
<pre class="out"><code> x p
1.0000000 0.8413447</code></pre>
The problem is that the <code> tag is used, unclassed, in both the body text and the pre-formatted sections. In my case, I would like to write a CSS file that styles the code and output chunks (the R code with class r and the output with class out) with different colors, and also displays in-text code in a different color than other body text.
I can define colors for the r and out classes; but if I also define a color for the code tag (which I think is very helpful for readability of the text), it overrides those colors in the code and output chunks. If the <code> tags weren't in the <pre> sections (they seem unnecessary), I'd be fine.
Is there a way to get pandoc to omit the <code> tags in the pre-formatted sections? (Or alternatively, to add my classes to the <code> tags instead of <pre>?) I don't want to use syntax highlighting; just the context highlighting I have described.
OK, duh... After further reading on CSS selectors, I can specify that code inherits its color for certain classes. So in my .css file, I now have:
code { color: #400000; }
.r {color: #800000; }
.r code { color: inherit; }
.out { color: #008000; }
.out code { color: inherit; }
... and now I can get 3 different font colors for those situations.

How to add ::before pseudo-class to this element

Hello all you smart CSS people... I've got a Doozey!
https://tritonmedicine.com/services is the page in question
It's the title down the page a bit, next to the picture
How do I style ONLY the ::before pseudo-class/id for the "preventative care" title? I'm trying to add the word "ADULT" in front of it, but if I use the id#1506, it won't work. If I only use the class (.tab-pane.active), it puts "ADULT" in front of every active title. What am I doing wrong here?
This DOESN'T work:
#1506.tab-pane.active > div:nth-child(2) > div > h3::before {
content: 'ADULT';
}
This DOES work (but styles them all, which I don't want):
.tab-pane.active > div:nth-child(2) > div > h3::before {
content: 'ADULT';
}
Any assistance is much appreciated :)
You can't select id that start with number in CSS selectors
For more CSS-Tricks
Solution
try somthing like these tab1506 or tabPane1506 or tp1506
But there is another solution of your problem, you can use
Attribute selector:
[id="1506"].tab-pane.active > div:nth-child(2) > div > h3::before {
content: 'ADULT';
}
For more read here

WeasyPrint always generating single-page PDFs from Zurb Ink

Generating a PDF from an email (Zurb Ink templated); but am always presented with a single page PDF.
Runnable test-case:
from weasyprint import HTML, CSS
from urllib2 import urlopen
if __name__ == '__main__':
html = urlopen('http://zurb.com/ink/downloads/templates/basic.html').read()
html = html.replace('<p class=\"lead\">', '{0}<p class=\"lead\">'.format(
'<p class=\"lead\">{0}</p>'.format("foobar " * 50) * 50))
HTML(string=html).write_pdf('foo.pdf', stylesheets=[
CSS(string='#page { size: A4; margin: 2cm };'
'* { float: none !important; };'
'#media print { nav { display: none; } }')
])
How do I get a multi-page PDF?
Updated Answer:
Try adding this whenever you wish to have a page-break in your document.
<p style="page-break-before: always" ></p>
Old Answer:
<body>
<!-- this is the container div -->
<div>
Content
</div>
</body>
If your html has the above structure then weasyprint will try to fit all of your 'container'content in one page.
First solution I have in mind right now: split your html in 2 separate div-s. Each div should be no longer than the page size.

Resources