restart endnote numbering after each GitBook-style web chapter in R Bookdown - r-markdown

I am preparing an historical book manuscript, written in R-Markdown with Bookdown, which will have 8 chapters, each with 100+ Chicago-style endnotes, using the GitBook-style web format.
My goal is to restart endnote numbering after each chapter, to avoid running into high digits and to resemble the appearance of traditional history books.
I have experimented with most of the settings described here (https://bookdown.org/yihui/bookdown/html.html#gitbook-style), but cannot produce the desired web output. Here's the relevant portion of my index.Rmd:
output:
bookdown::gitbook:
dev: svglite
css: css/style.css
split_by: rmd
split_bib: true
See my simplified mockup demo:
https://jackdougherty.github.io/bookdown-test/book/
and source code:
https://github.com/JackDougherty/bookdown-test

Note that in bookdown v 0.9, the <a> tag's class inside the citation changed from .footnote-ref to .footnoteRef.
So you need to extend some of your CSS to account for that when using an updated version of bookdown:
/* don't show the wrong footnote calls */
.footnote-ref sup,
.footnoteRef sup {
display: none;
}
...
.footnote-ref,
.footnoteRef {
counter-increment: fn-call;
}
.footnote-ref::after,
.footnoteRef::after {
content: counter(fn-call);
position: relative;
top: -.5em;
font-size: 85%;
line-height: 0;
vertical-align: baseline;
}
...
See https://github.com/rstudio/bookdown/issues/589#issuecomment-462149512 for more details.

Related

Is there a way to configure Prettier so that it doesn't minify inline CSS in .mjml templates?

I'm using .mjml templates and VSCode. I had to install an extension for the highlighting to work correctly but I noticed by Prettier seems to transform inline CSS (which is pretty common in emails) from this:
p,
h1 {
color: #ffffff;
}
h1,
.text-h1 h1 {
font-size: 32px;
line-height: 1.1;
margin: 0 0 16px 0;
font-weight: 700;
}
to this:
p, h1 { color: #ffffff; } h1, .text-h1 h1 { font-size: 32px; line-height: 1.1; margin: 0 0 16px 0; font-weight: 700; }
The only way I was able to prevent this is by adding a <!-- prettier-ignore --> before the <mj-style> tag but I was wondering if there isn't a better way (configuration?) to get the same result without the extra markup.
See:
https://github.com/mjmlio/mjml/issues/2557
Is there a way to tell Prettier that the following "block" has a specific markup type?
Based on my research and also the lack of answers, it looks like the overall MJML tooling ecosystem is not in the best of states. I think for now the best option is to use the workaround I provided. Here is a detailed breakdown of the options available.
Style element <mj-style>: (most likely the best option)
<!-- prettier-ignore -->
<mj-style css-inline="inline" />
.content {
color: green !important;
}
</mj-style>
Pros:
Works in the online visual editor by copy/pasting the markup.
Cons:
No Prettier formatting (ref).
An external CSS file:
<mj-include path="./default.css" type="css" css-inline="inline" />
Pros:
You can import a CSS file that will get normal Prettier treatment.
Standard pattern where CSS lives outside the document.
Cons:
It also won't work with the online MJML editor tool without merging back your CSS file. This is very annoying and makes it hard to maintain.
<mj-include> can report miss flagged error depending on our your project is setup.
It does not work with the "official" VSCode plugin (you have to use this one).
MJML inline styles:
<mj-text color="#fff" padding="0" font-weight="400" font-size="16px" line-height="1.65" />
Pros:
You don't need CSS.
Cons:
You possibly will repeat a lot of the same style and maintenance can become problematic.
Style element <mj-class>:
<mj-class name="blue" color="blue" />
Pros:
Benefits from the re-usability of CSS without having to use CSS, avoiding Prettier issues.
Cons:
Not as flexible as CSS in terms of selectors which can lead to repetition and maintenance issues.

Need regex to remove unnecessary strings in Notepad++

I have big css file and need regex(Notepad++) to get only elements and css selectors found by specific css value. In following example I need to get element and selector by value 123456
header #objectnav nav a {
border-right: solid 1px #c0c0c0;
border-left: solid 1px #f4f9ff;
color: #123456;
}
a:hover {
color: #654321;
}
#hints .hint {
background-color: #f4f9ff;
border: 1px solid #e0f0ff;
color: #123456;
margin: 0 0 30px 0;
position: relative;
}
on exit I expect following
header #objectnav nav a
color
#hints .hint
color
or, if possible
header #objectnav nav a^color
#hints .hint^color
I did this just for the challenge:
The following regex will find all the rules containing the text 123456 as a value:
[^{}\s][^{}]*\{[^}]*?[-\w]+\s*:[^;}]*?123456[^}]*\}
But that's just a basic regex. The more challenging part is that I wondered if it's possible to generate a report such as the one you asked for using nothing but Notepad++. It turns out it's possible.
Replace the following pattern:
\s*([^{}]+?)\s*\{[^}]*?(?(?=([-\w]+)\s*:[^;}]*?123456)[^}]*|[^}])*\}\s*
With the following replacement string:
(?2$1^$2:)
Or this one depending on the output you prefer:
(?2$1\r\n$2\r\n\r\n:)
I didn't test it extensively but it works for the test cases you provided.

Remove all <br/> tags from CKEditor Output html

I am using CKeditor in my application.When i save content of the CKEditor output is added with tags like this.
<B>Summary:</B>
<P><BR><SPAN style="TEXT-ALIGN: left; WIDOWS: 2; TEXT-TRANSFORM: none; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; LETTER-SPACING: normal; DISPLAY: inline !important; FONT: 15px/20px Helvetica, Arial, sans-serif; WHITE-SPACE: normal; ORPHANS: 2; FLOAT: none; COLOR: rgb(0,0,0); WORD-SPACING: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">The company's latest tweet simply states that "our team continues to investigate, but at this time, we're still unable to confirm that any security breach has occurred. Stay tuned here."</SPAN></P><BR>
<P><BR>Facebook : http://www.facebook.com</P><BR>
How Can I remove all the "break" tags out of above sample using regular exression in javascript.
Upon Save Text should be appended to "Summary : " like here
Summary: Call back the department if you have not heard from them.The initial story was triggered after a user in a Russian forum
claimed that he hacked and uploaded almost 6.5 millionThe initial
story was triggered after a user in a Russian forum claimed that he
hacked and uploaded almost 6.5 million
But now it's coming like this
Summary:
The initial story was triggered after a user in a Russian forum
claimed that he hacked and uploaded almost 6.5 millionThe initial
story was triggered after a user in a Russian forum claimed that he
hacked and uploaded almost 6.5 million
I am using replace(/[\n\r\f]/g, ' ') ;
replace(/\<!>[\s\S]*?\<!>/ig, '')
but no use.help me.
Finally
CKEDITOR.instances.editor1.getData().replace(/(\r\n|\n|\r)/gm,"");
worked perfectly for my issue.
Thanks.
replace(/[\n\r\f]/g, ' ') ;
will remove actual newlines not the coded ones
try
replace(/<BR>/g, '') ;
or if you want to remove all tags
replace(/<[^>]*?>/g, ' ') ;

CSS: horizontal menu using list with background images?

I’m trying to create a simple menu where I’ve got four menu items each have an image and then there is a special image for each item that is active.
I’m using Drupal so the HTML output can’t be changed (not easy anyway) so my question is if and how it can be done by using the HTML code provided below:
<div id="quicktabs-2" class="quicktabs_wrapper quicktabs-style-nostyle quicktabs-processed">
<ul class="quicktabs_tabs quicktabs-style-nostyle">
<li class="qtab-0 active first">Question</li>
<li class="qtab-1">Lead</li>
<li class="qtab-2">Board</li>
<li class="qtab-3 last">Ready</li>
</ul>
</div>
I have created some that come close to my final wished result but I’m still having trouble with example to indent the text so it is not showed.
Here is my CSS so far:
ul.quicktabs_tabs li {display:inline; }
#quicktabs-2 li.active a {
background-image:url(question-active.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:135px;
padding-right:5px;
}
#quicktabs-2 li.qtab-1 a {
background-image:url(lead-grey.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
#quicktabs-2 li.qtab-2 a {
background-image:url(board.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
#quicktabs-2 li.qtab-3 a {
background-image:url(ready-grey.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
This is my code so far and it shows my images correctly with the right spacing between them but the text within the a-href I just can’t get hidden.
I’m fairly certain that it is just a question of hitting the right style-class / id but I’ve tried a lot of different combination and I just can’t get it to work.
Any help would be very much appreciated.
Thank you
Sincere
- Mestika
If you want to hide your text within your anchor tag simply add {text-indent:-9999px} this will move your text to -9999px but will hide your text. This method is called IR - Image Replacement
Edit: Here is a Reference provided by #Faust
It sounds like your main concern is to replace the text in the link (no?).
If you have the access to alter the link text, and you're allowed to include markup with those values that does not get HTML-character encoded,
Then by surrounding each link text with spans ( e.g: Question --> <span>Question</span>), so that each line looks like:
<li class="qtab-0 active first"><span>Question<span></li>
...then you can hide the text with this CSS:
#quicktabs-2 a span {display:none;}
Otherwise, I think your only other recourse is to make the text extremely small and close to the color of the images:
#quicktabs-2 a {font-size:1px;text-decoration:none;color:grey}

Word wrap in PISA PDF

I have a Django view that renders a piece of text and word wraps it. I am using the below CSS. When I convert the same to PDF using PISA, I dont see the word wrap and text is lost.
Do I need to set any properties on PISA for this?
{
margin-left: 20px;
padding: 0;
font-size: 12;
font-family: "Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif;
color: #333;
word-wrap: break-word;
}
Keep in mind that Pisa does not use CSS itself, it just implemented some of the CSS syntax and properties to apply its own rules in PDF generation.
See the section 6, Cascading Style Sheets, of the manual for the supported properties. And take a look at this nice manual, that is a little bit more detailed.
It's hard to find good documentation about pisa.