Text Blocks in Rmarkdown - html

I really like how text blocks look like when used in a code chunk. I even like the border of the box that wraps the text shading. I'm struggling to wrap text correctly either using cat('Some paragraph here', comment=NA) or Some paragraph here. I noticed there's a lot of stackoverflow questions dealing with \n strategies or width options. I also found that the author does not recommend using cat but instead using message or formatting as a block. See here
Here's an example of a paragraph that will not render properly.
```{r comment=NA}
cat('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.')
```
I understand that what I'm asking might be something knitrand rmarkdown were not designed for. However, if there are implementations with css (which I'm not familiar with), how should one write those style.css?
In the example, it goes like
```{block, type=FOO}
Your long text here
```
And you will have to include a style.css
div.FOO {
font-weight: bold;
color: red;
}
(Which my little knowledge tells me it's not for producing the code blocks I want.). You should include them in the YAML somehow.
I couldn't find examples of these style.css files that people use to format text in that way. My question is How to do this?

Related

How to keep indentation in R markdown?

I am creating an html document with R markdown. I have many numbered points that are automatically indented. I want to be able to take a new paragraph below a numbered point but still have the paragraph indented so it lines up with the numbered point. How can I do this? If you look at my image you can see that the text goes further to the left when I take a new paragraph. The points below are still a part of point 14 but I just need them in a new paragraph. Thanks
As jkatam tersely said, "try giving the space". I interpret this to mean "indent the part to be indented.
Raw markdown:
The standard Lorem Ipsum passage, used since the 1500s
- *"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."*
*"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."*
And something else not in the bullet-list.
Formatted HTML:
Rendered using
rmarkdown::render("doc.md", output_file = "doc.html", output_format = "html_document")

How to highlight long sentences with padding in a paragraph?

I would like to highlight sentences in some text. The normal way is to wrap the sentence in a span element and set a background color:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. <span class="highlight">Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur</span>.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
And:
.highlight{
background-color: yellow;
}
If I now want to use some padding and other styles with this highlight, I have a problem:
.highlight{
background-color: yellow;
padding: 5px;
border-radius: 5px
}
With small highlights, this problem is adequately solved by display: inline-block;. But here I now have the problem of my sentence being, well, a block, breaking the text in three paragraphs:
.highlight{
background-color: yellow;
padding: 5px;
border-radius: 5px;
display: inline-block;
}
Is there a way to use inline-block without all the trouble?
Working JS fiddle
Use line-height property. Do little bit math, if your font-size is 16px and you are adding 5px padding then line-height will be 26px
p{
width: 300px;
}
.highlight{
background-color: yellow;
padding: 5px;
border-radius: 5px;
line-height: 26px;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span class="highlight">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</span>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
It sounds to me like you're not entirely clear what you want. Observer has given you a solution that might work for you and might not, since the line height persists throughout your entire paragraph, making all of the lines wider. If that is indeed what you want, then you have your answer.
From a UX perspective, though, it seems to me that you need to take a couple of steps back. Do you really want to set highlighted text apart in such a way as it interrupts the flow of reading? That's what you will do, if you add extra padding to it. The idea that you don't like it to be set apart as a paragraph suggests that you don't want padding to be added to it, because after all that's how a paragraph is set apart.
If you want to keep the sentence in with the rest of the paragraph and pad it as well, you can probably go to the trouble of figuring out exactly how to do it, but you'll notice that a line that has a combination of both highlighted and normal text will have the entire line padded. So you'll have some normal text that will be set apart farther than other normal text, as in Observer's sample. That draws the reader's attention to the text in such a way as to be distracting.
If you wanted it to stick out more than it would by just highlighting it, you could put a border around it, as in my example. But I think that looks a bit off, too, because the border gets broken on line breaks. You might consider putting a border on just the top and bottom as well.
In the end, though, I would stick to what everyone else does, and just change the color. That's what readers are used to, and if you change it, they'll have to take a little time to figure out what you're up to.
.highlight{
background-color: yellow;
border: 1px solid green;
padding: 0 5px;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span class="highlight">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</span>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

centering an image while text covers both canvas (left and right)

I have a simple text like this, with image in the middle of the content:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. <img src="img/foo.png" /> Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
What I want is the text to be on left on right, while the image completely covered in the center. It seems I can use the float, which works well, but only to either left or right.
Is there anyway to achieve this with css, without any hacks?
What you are trying to achieve is something very new in HTML5 and CSS3 Called CSS shapes that allow text to wrap around images and shapes. You can see how to achieve this by following this link http://www.html5rocks.com/en/tutorials/shapes/getting-started/
But the down side is that it is only supported in very modern browsers.

How to remove space at top of <p> tag / align contained text to top of container?

This is undoubtedly a stupid question but i'm having a bad day and it's confusing me!
If you view http://jsfiddle.net/E6kGP/1/ then you can see 2 simple divs next to each other each of which contains a p tag each with different font sizes and matching line-heights.
There is a small gap between the top of the p container and the top of the contained text which is different depending on the font sizes (and line-heights). This means that the top of the text in each p is not vertically aligned. If the line-heights didn't match the font-sizes then I could understand this but surely if they are the same then the line-heights should match the tallest character and hence the highest point of the first line should be the top of the p container? Obviously this can be hacked using padding/margins or absolute positioning but i would like to understand why this doesn't work by default and what the correct way is to fix it?
As requested by SO the code from jsfiddle is also below:
div {float: left; width: 50%;}
p {margin:0 0 1em;padding:0;}
#left p {line-height:36px;font-size:36px;}
#right p {line-height:16px;font-size:16px;}
<div id="left">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="right">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
Thanks very much as ever everyone!
It might be to accommodate accented characters, try putting Ä into the first <p>, the extra space helps accommodate the accent. That said, I'm not 100% convinced that is the definitive reason.
You can always specifically target the first line of a <p> element to reduce it using:
p::first-line {
line-height: 0.8em;
}
Though granted, that doesnt solve the 'why' issue.
Like ExtPro has said, it's to accommodate accented characters. A simple work around is to have margin-top:-<number>px; so that you manually align it.

Drop-caps using CSS

How can I make the first character of each paragraph look like this:
I'd prefer using CSS only.
p:first-letter {
float: left;
font-size: 5em;
line-height: 0.5em;
padding-bottom: 0.05em;
padding-top: 0.2em;
}
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Tweak the font, padding, line-height as needed.
Example: http://jsfiddle.net/RLdw2/
add this p:first-letter{font-size:50px}
DEMO
Here is the exact solution for your requirement shown in the image
DEMO 2
WIKIPEDIA EXPLANATION
see DEMO here...
CSS///
p{ width:300px; border:1px solid #000;}
p:first-letter
{font-size:52px;color:#8A2BE2;font-weight:bold;float: left;margin-top:4px;}
HTML///
<p>The first character of this paragraph will be 52px big
as defined in the CSS rule above. Rest of the
characters in this paragraph will remain normal. This example
shows how to use :first-letter pseduo element to give effect to
the first characters of any HTML element.</p>
<p>The first character of this paragraph will be 52px big
as defined in the CSS rule above. Rest of the
characters in this paragraph will remain normal. This example
shows how to use :first-letter pseduo element to give effect to
the first characters of any HTML element.</p>