I have created a .css file with these contents:
h1 { font-size: 120%; text-align: center;}
h2 {page-break-before: always; font-size: 120%; text-align: center;}
Using Pandoc I apply that style sheet with the --css flag. The css is present in the output file, and h1 and h2 headers are center aligned as expected, but there are only page breaks at h1 headers, which appears to be Pandoc's default. How do I get h2 headers to start on a new page as well?
You're doing everything right. Ebook readers only implement a subset of CSS, and there is a good change that the one you are using doesn't support the page-break-before property. There might be better support for break-before. From what I've heard, some readers seem to hard-code the page-break behavior of heading elements with no option to override.
Related
This page was auto-generated by Emacs' org-mode HTML export. I've got it set up to use MathJax rendering of LaTeX symbols. On the third column of the There Exists line I've used inline LaTeX symbols surrounded by "$"
$\exists x \mid x2>x$
which is proper LaTeX embedding, whereas the line above and below I haven't, i.e., Emacs just picks up LaTeX markup and inserts it without using "$". If you Inspect (I'm using Chrome) this code, you'll see it is throwing in a font-size increase for only this LaTeX markup, seemingly arbitrarily, making the symbols look abnormally large compared to the other symbols.
<span style="display: inline-block; position: relative; width: 5.681em; height: 0px; font-size: 129%;">
How can I stop, block, override this element.style being inserted and blowing up my font size?
element.style {
 display: inline-block;
 position: relative;
 width: 5.713em;
 height: 0px;
 font-size: 129%;
}
Update:
I've narrowed the problem down to something in my custom stylesheet.css:
table {
/* font-family: monospace; */
font-family:'eulermedium_18';
/* font-size: 1.05em; */
margin-left:5%;
margin-right:auto;
margin-top:0.5em;
margin-bottom:0.5em;
line-height: 1.5em;
}
namely, the font-family. Above I've commented out monospace, which gave me a 129% arbitrary size. But then as you see I tried AMS Euler (ttf version converted by Font Squirrel, as is the Computer Modern) and it caused the $...$ parts of the org-mode table in question to reduce the font size to 53%! Craziness. Again, with no font-family in table sizes are normal across LaTeX/MathJax and regular text. Is there any way to have the org-mode HTML export for MathJax stuff use my fonts correctly?
It seems to be related to font-family too. Column 3 of There Exists line seem to be use font as STIXGeneral-Italic, while the default font used at other places seem to be monospace. You can override these styles in your stylesheet.css using !important directive.
.mrow span{
font-family: inherit!important;
font-size: 100%;
}
i'm relatively new with this stuff, but i can't seem to figure out why the size isn't formatting?
CODEPEN: https://codepen.io/minacosentino/pen/YxLLQw
.jumbotron p {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
font-size: 4rem;
font-weight: 200;
text-align: center;
}
It's because you have written the link tag inside the HTML section of the codepen.
To add any external css make use of GearIcon on the CSS Section and add the links there. Doing so, make the libraries get added on top of the webpage and your css written in the CSS section can override those styles.
Just as Josan already commented: There is a rule for ".jumbotron p" in bootstrap CSS defining "font-size". To make your CSS override that, link your external style sheet after bootstrap.
Please take a look at my site: http://burnett.inigowebdesign.co.uk/local_area
I am using Twitter bootstrap CSS (with HTML5 Boilerplate), Modernizr, and Google fonts using #font-face.
I am using modernizr to test for a browser's support of fontface- it not supported, I need to change the font-size (otherwise it will be far too large)
I am testing the site for compatibility and have noticed in IE8 (and early versions of Safari & Opera) my rules for font-size are being ignored. In particular, the h3 elements in the main list (that you can see on the left in the green box) don't seem to respond to any CSS I apply to them. I am using Firebug to inspect the rules, and can't find any possible conflicts. It even ignores !important. In fact, the only way I can style them at all is to use inline CSS.
What is going on??
The text is differ due to different font-size define in each css file.
In normalize.css h3 have 1.17em font size and in fontface.css font size define 50px . It might be possible the browser rendering the file in some different orders.
normalize.css file using this property.
h3 {
font-size: 1.17em;
margin: 1em 0;
}
fontface.css file using this property.
h3 {
font-size: 50px;
/* letter-spacing: normal;
font-weight: normal;*/
line-height: 36px;
}
I'm working on a responsive site. After viewing it on a device running iOS5, I notice that all my h2 tags seem to display twice, one on top of the other. I checked it on a device with iOS6 and it looks better, but not on the iOS5. However, when I change my h2 tags to spans (changing them to display: inline-block) it seems to work fine as well.
I'm not doing anything seemingly out of the ordinary with my HTML or CSS, and I'm also not using a z-index anywhere in the document so would anyone have an idea what is happening?
<h2>Hello</h2>
h2 {
display: block;
font-family: "Segoe UI Light";
font-size: 36px;
color: #C41230;
}
Seems your problem could be a font weight rendering bug. It might be inheriting bold styling. See this SO post. You could try setting your font weight to normal for h1, h2, etc.
I have some CSS for a Wordpress blog. I want paragraphs to indent, but blocks of code to align left to the margin. This is the code that I have---all of these elements appear with a <div class="postContent" tag, and Wordpress automatically wraps post text blocks in <p> tags.
First, I've set all paragraphs within the div tags to indent:
.postContent p {
font-size: 1.2em;
text-indent: 2.5em;
text-align: justify;
line-height: 1.6em;
margin: 1em;
}
Then, Wordpress sets aside the first paragraph as a .lead paragraph. I want that to indent, provided it's not code:
.postContent p.lead code {
margin: 0;
text-indent: 0;
}
That works just fine. However, all the other code paragraphs are still indenting, so I added this to the stylesheet:
.postContent p code {
text-indent: 0;
padding: 0;
padding-top: 2em;
padding-bottom: 2em;
}
No dice. The code blocks are still indenting according to the .postContent p rule.
Setting text-indent on a code element inside a p element does not affect the indentation of the p element. It does not affect anything, really, since text-indent applies to block containers only.
If the markup is <p><code>...</code></p> so that the p contains nothing but the code, you can add
.postContent p code { display: block; }
and then consider what to do with vertical spacing, which may be a bit excessive after the addition (namely margins of p plus padding of code).
It's really hard to say without seeing both the source for the html and the actual css code, but I'm guessing your styles are being overridden by a more specific style.
The best thing for you to do is install Firebug in Firefox (really, the best development tools for a browser, IMHO) and inspect the targeted elements. The inspector should display all the styles being applied to the element. The overridden styles will have a strikethrough it. If you see they are being overridden, make your styles more specific. Otherwise, if you don't see your style listed, then you're not correctly targeting it.
Hope that helps. Good luck.