How does one implement a custom theorem environment for HTML output in bookdown that is numbered as "chapter.occurence"? For example, I have defined a "convention" environment.
I placed the following in preamble.tex
\newtheorem{convention}{Convention}[chapter]
and in style.css
.convention {
position: relative;
font-style: italic;
}
.convention p{
display: inline;
}
.convention:before {
counter-increment: convention;
content: "Convention: " "." counter(convention) " (" attr(name) ").";
font-weight: bold;
font-style: normal;
}
div.convention {
font-style: italic;
}
If I provide my second convention in chapter one (file 01-vectors-and-matrices.Rmd) as
::: {.convention #something name="Something" data-latex=""}
Something.
:::
then the LaTeX output works as expected. The HTML output, however, does not produce the expected result. With the HTML (GitBook) output, I have the following issues:
counter(convention) in the CSS does not appear to count the number of convention environments in the chapter, and
I don't know how to refer to the chapter number in CSS.
Both problems reflect my inexperience with CSS. Ideally, I would copy the style of the standard theorem environments (e.g. definition, corollary, remark). But I cannot find the CSS that defines these environments' styles.
Related
Im absolutely new to typo3 and want to set up a simple contact form. So I created a form and added it to the page. My template record looks like this:
page = PAGE
page.typeNum = 0
page.10 < styles.content.get
page.includeCSS {
file1 = fileadmin/templates/css/style.css
}
I can see the form and it works appropriately, but unfortunately my css doesnt do anything.
My style.css looks like this:
p {
font-family: arial;
font-size: 120px;
}
Gotta admit i have no knowledge about CSS too. The changes I made had absolutely no impact on my page. Do these infos help you by any chance? I just have no idea how to fix it on my own, been searching for a solution all day long.
you should learn more about the structure of CSS-files. maybe you inspect some with your browser from other sites.
Then you will notice it is something like:
p {
font-family: arial;
}
For file pathes in typoscript or objects and attributes: don't insert spaces:
:
page.10 < styles.content.get
page.includeCSS {
file1 = fileadmin/templates/css/style.css
}
Your style.css should only contain this:
p {
font-family: arial;
font-size: 120px;
}
... and you'll see the difference ;)
Probably only a copy&paste error, but your TypoScript (aka template record) has spaces where it shouldn't:
...
file1 = fileadmin/templates/css/style.css
...
120px will result in a really big font ;-)
Set the style-definition to the body-tag (so for all elements below the body), not only for the p.
body {
font-family: Arial, sans-serif;
font-size: 12px;
}
You should define the styling of the input fields seperately. With some browsers the inheritance from the body tag definitions seem not to work.
input, textarea { font-size:1.25em; font-family:serif; border:1px solid darkgray; }
Something like that.
I'm trying to search (using PHPStorm Regular Expressions aka- "regex") within a large codebase of multiple css/scss files to search only within brackets { css }
Basically, I'm trying to find all instances of where any css element has 2 font-weights assigned to it, and overwrite it with just one.
For example:
.classname { font-weight: 100; color: blue; font-weight: 400; }
to replace with:
.classname { font-weight: 100; color: blue; }
But the font-weights are all different. And I need to only search within the brackets. I'm not very familiar with regex, but have used (.*) and $1 to replace groups (wildcards) of code.
Also, there could be multiple lines & spaces to search through... so I'll need that taken into account for the regular expression.
.classname {
font-weight: 100;
color: blue;
font-weight: 400;
}
I've tried \{(.*)font-weight:(.*)font-weight:(.*)\} and it only searches one single-line code.
In short...
How would I search for any CSS classname that has 2 font-weights assigned to it:
.classname1 {
font-weight: anything;
otherCSS: anything;
moreCSS: anything;
font-weight: anything;
}
Needs to be something like: { * font-weight:*; * font-weight:*; * }
Where the * can be anything. Any number of spaces, any character, any line-break.
(.*?\{\sfont-weight: 100;\s.*?;\s)(?:font-weight.*?)?(\}) will work for you.
You need to replace the entire string by $1$2.
regex demo
I have improved the regex of TheLostMind, so that the last attribute does not have to be font-weight.
(.*?\{\sfont-weight: 100;\s.*?;\s)(?:font-weight:.*?;)?(.*\})
Typically, the way to emphasize text within italic text is to make it non-italic. For example:
The publication of James Joyce's Ulysses was met with great controversy.
I know I can do this:
em em {
font-style: normal;
}
But that won't work if my parent italicized phrase doesn't use <em>. For instance, it won't work if I have
<p class="photo-caption">The publication of James Joyce's <em>Ulysses</em> was met with great controversy.</p>
Of course, I can do this:
.photo-caption em {
font-style: normal;
}
but this has potential maintainability problems, since every change to the parent element now also requires a change to the child element.
Is there a way to tell CSS to globally unitalicize nested italics?
The capabilities of CSS are necessarily limited so that browsers can process the rules quickly.
I think your original approach is correct, but you can address your concerns about maintainability with a CSS preprocessor, like LESS. These tools support much more advanced logic while still compiling down to lean and mean CSS.
With LESS, specifically, you could create a rule like this:
#PhotoCaptionFontStyle: italic;
/* Reverses the font style of child EM's if the parent value is italic */
.reverse-em(#parentFontStyle) when (#parentFontStyle = italic){
EM {
font-style: normal;
}
}
.photo-caption {
font-style: #PhotoCaptionFontStyle;
/* make child EMs normal if #PhotoCaptionFontStyle is "italic" */
.reverse-em(#PhotoCaptionFontStyle)
}
(for inspiration. not tested. see variables and guarded mixins)
If #PhotoCaptionFontStyle is italic, then the compiled result would look something like this:
.photo-caption {
font-style: italic;
}
.photo-caption EM {
font-style: normal;
}
If you switched #PhotoCaptionFontStyle back to normal, you'd end up with something like this:
.photo-caption {
font-style: normal;
}
/* ".photo-caption EM" is never generated
because of the guard condition */
I think the best solution is something like this:
<p class="photo-caption italic">Lorem <em>ipsum</em></p>
.italic em {font-style: normal;}
I'm a graphic designer in a magazine and we'd like our website to be closer to our printed issues.
In the magazine, we use small caps for strings of more than 2 capital letters in a row.
I know it is possible to use true small caps with an OpenType font. I also know that you kan target 1st lines or 1st letters with CSS
So my question is:
Would it be possible to target/detect strings of capitals letter within a text, and apply automatically the font-variant property to it (without having to manually apply styles or classes).
here's an example
If you mean like this, sure! The regular expression could be improved though, as it only matches words, not sequences of words, but regex is still alienspeak to me, so this is the best I can do:
[].forEach.call(document.querySelectorAll(".smallcapsify"), function(content) {
var parsed = content.innerHTML.replace(/[A-Z]{2,}/g, '<span class="small-caps">$&</span>');
content.innerHTML = parsed;
});
#import url(http://fonts.googleapis.com/css?family=Merriweather);
span.small-caps {
font-variant: small-caps;
text-transform: lowercase;
}
/* Styles to make it look nicer */
body {
font-size: 2em;
font-family: Merriweather, serif;
text-rendering: optimizeLegibility;
/* Enable common and discretionary ligatures, according to http://blog.fontdeck.com/post/15777165734/opentype-1 and http://caniuse.com/#search=font-feature-settings */
-webkit-font-feature-settings: "liga", "dlig";
font-feature-settings: "liga", "dlig";
}
<div class="smallcapsify">
This is SOME TEXT. Here is some MORE text.
</div>
I want to change the default style sheet for the KnitHTML function in RStudio 0.96.331.
I follow the instructions in this post.
First I copy past the original markdown.css from here . As a test I change the first few lines from:
body, td {
font-family: sans-serif;
background-color: white;
font-size: 12px;
margin: 8px;
}
to red background
body, td {
font-family: sans-serif;
background-color: red;
font-size: 12px;
margin: 8px;
}
and save it as mymd.css in my working directory. I then create a style.R file as follows:
options(rstudio.markdownToHTML =
function(inputFile, outputFile) {
require(markdown)
markdownToHTML(inputFile, outputFile, stylesheet='mymd.css')
}
)
Finally, I source the style.R file by clicking source and then go back to the .Rmd file and knit it to HTML. I get the red background, but the math is not compiled e.g. $\alpha$
AFAIK，MathJax service was down yesterday due to the GoDaddy outage. Can you confirm the math problem was not due to that?
So I may have a work around for you, but it involves using pandoc:
Suppose your style sheet is called style.css
Source the following code:
options(rstudio.markdownToHTML = function(inputFile, outputFile) {
system(paste("pandoc -c style.css", shQuote(inputFile),
"-o", shQuote(outputFile)))
}
)
This is maybe a new feature that was not available at the time the question was asked. However, there is a simple solution I found here:
https://bookdown.org/yihui/rmarkdown/html-document.html#appearance-and-style
In the preamble of your .Rmd, just write this:
---
title: "Your title"
output:
html_document:
css: yourstylefile.css
---