Tips on aligning an entire text in R Markdown using the bookdown::gitbook function as the desired output

I've been looking for a way to justify the text in my gitbook, but haven't had any luck finding a solution. I've attempted:

  • Adding "text-align: justified" to the CSS right after the YAML Header:

    <style>
body {
  text-align: justify
}
</style>

Unfortunately, this didn't work.

  • Applying "text-align: justify" to a div tag for the entire text:

    <div style="text-align:justify;">
my whole text
</div>

This approach did justify the text, but it caused the topic numbering to disappear (along with other features I haven't quite figured out).

The key is that I want to maintain all the standard features of the output from bookdown::gitbook while only adjusting the text alignment to "justified."

Additionally, manually adding a div tag to every sentence would be too time-consuming. Any suggestions?

Thanks in advance!

htmlcssr-markdownbookdowngitbook

Answer №1

To organize your CSS code, create a file called custom.css:

body {
  text-align: justify;
}

Next, link this CSS file using the css option (Note: placing CSS in the LaTeX preamble is incorrect):

bookdown::gitbook:
  css: "custom.css"

If this method doesn't work for you, kindly provide a reproducible example and possibly a published version online so we can investigate further.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arrow indicating the correct direction to expand or collapse all items with a single click

I have successfully implemented the "expand/collapse all" function, but I am facing an issue with the arrow direction. The arrows are not pointing in the correct direction as desired. Since I am unsure how to fix this problem, I have left it empty in my co ...

javascriptjqueryhtmltoggleexpander

Align Horizontal Fixed Element

<html> <head> <style> #rectangle { position: absolute; right: 0; bottom: 0; width: 150px; height: 200px; } </st ...

javascripthtmlcss

Issue with navigational button layout

I am facing an issue while designing my navigation menu with 4 circular items spaced about 20 px apart on the top right of the screen. I have managed to style each nav item as a circle, but when I try to position them in the upper right corner, only the 4t ...

htmlcssnavigation

Set HTML form elements to be shown in 'display only' mode, without any interactivity

In the process of developing a dynamic form builder, I am allowing users to add various blocks of content like buttons, text inputs, paragraphs of text, and images to a page. They can later publish this as a simple HTML form for their use. When it comes t ...

htmlaccessibilitywai-aria

When attempting to transfer data from the parent component to child components, the data is appearing as undefined in the display

I have been working on passing data from a parent component to child components, but I keep encountering an issue where the data is showing as undefined. Below is the code snippet: Parent Component In this section, I have declared the variable part_data ...

htmlangulartypescriptangular5

When you apply margins in CSS and HTML, it can cause elements to break out of the row alignment

I'm struggling with my html code that contains elements arranged in rows: <div class = "row"> <div class="col-sm-3 cont-box"> <h1>Title1<h1> </div> <div class="col-sm9 cont-box"> <img src="onepic.jpeg" class=" ...

htmlcss

What is the best way to place my website's logo in the top-left corner using html and css?

Hello everyone. I am currently working on customizing a website using an HTML and CSS template for a project, but I need to make some modifications. My main goal is to add the company logo to the header, specifically in the top-left corner, however, I&apo ...

htmlcss

Is there a solution to fix the issue with IE causing hover effects not to

I'm currently in the process of designing a website, and I have implemented some image hover effects that reveal elements within the image when you hover over it. These effects are functioning correctly on Chrome, Safari, and Firefox; however, they ar ...

javascripthtmlcssinternet-explorer

Is there a way to conceal the scrollbar while still permitting scrolling?

I'm interested in creating a custom scrollbar, but in order to do so I need to hide the default scrollbar while still allowing scrolling functionality. I've attempted: overflow-y:hidden; but this method hides the scrollbar and prevents scrolli ...

jqueryhtmlcss

I'm having trouble getting my CSS and HTML to connect properly, and I'm not sure what the issue is

Hi there, I'm having some trouble with my HTML code. I haven't even started building my website because I can't seem to connect it to the CSS file, and I have no idea why. I'm using Aptana Studio 3 by the way. <head> <titl ...

htmlcss

What is the best way to connect a line from the edge of the circle's outermost arc?

I am attempting to create a label line that extends from the outermost point of the circle, similar to what is shown in this image. var svg = d3.select("body") .append("svg") .append("g") svg.append("g") .attr("class", "slices"); svg.append("g") ...

javascripthtmlcssd3.jssvg

My button is overflowing its container in Bootstrap 5, how can I fix this issue?

I've been experiencing an issue with the button in my code. It keeps extending outside of the parent div container, regardless of the screen size. <header class="header"> <div class="hero text-white pt-7"> <div ...

htmlcssfrontendbootstrap-5

Applying background color within an *ngFor loop

My question may not be perfectly described by the title, but here it is. In my Angular Material2 project, I have an md-toolbar where I am dynamically looping through values: <md-toolbar (click)="selectedToolbarValue(key.Name)" *ngFor="let key of array ...

cssangularangular-materialangular-material2

What is the best placement for video content in a website development project?

Storing images in a folder named images is recommended for better website organization and SEO benefits. But what about local video content? Should it go in a folder labeled videos? ...

htmlassetsdirectory-structure

Utilize HTML code within a .php file without it being parsed

When I include HTML code in my PHP file, the HTML code doesn't get interpreted and just appears as text in the browser. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Document</title> ...

phphtml

Using HTML <style> in a bash script is a great way to enhance

I am attempting to eliminate the bullet points from HTML code generated by a bash script. I am currently struggling to apply the style across the entire program. Given my limited knowledge of html, I suspect that I may be misinterpreting or incorrectly p ...

htmlcssbashstylesheet

Creating a circular frame for your image to use as a Facebook profile picture

In the process of developing an input feature that allows users to upload file images for avatar changes, similar to Facebook's functionality. However, I am aware that Facebook utilizes a circular area for avatars and enables users to adjust the image ...

javascripthtmlcssreactjs

Tips on aligning carousel images and captions next to each other

Would anyone be able to assist me in creating a carousel similar to this? I haven't been able to locate any examples or tutorials that match the design of my desired carousel. Here is the design I am referring to ...

htmlcsscarousel

divs placed next to each other

I'm facing an issue with 4 divs within a parent div. I've used float:left in the style of all 4 divs to display them side by side. Although the divs are appearing next to each other, the height of the parent div is not adjusting to accommodate th ...

csshtml

AngularJS function orderBy reverses the array instead of sorting it

I encountered an issue where, after clicking the 'order button', the table does not order as expected. Instead, it reverses all the td elements. For example, 'A', 'C', 'B' becomes 'B', 'C', "A". I ...

javascripthtmlangularjsangularjs-orderby