Using HTML and CSS to evenly align text in individual sections

Question

Using HTML and CSS to evenly align text in individual sections

Is it possible to recreate the exact look and feel of a justified page from a book or article online using HTML/CSS? This would include replicating the text justification with precise line breaks and setting the outer wrapper width to match the min/max-width of the text itself.

An example HTML structure could be:


...
<div class="page-wrapper">
<span class="line">The Republic of Plato is the longest of his works with the exception of the Laws,</span>
<span class="line">and is certainly the greatest of them. There are nearer approaches to modern</span>
<span class="line">metaphysics in the Philebus and in the Sophist; the Politicus or Statesman is</span>
<span class="line">more ideal; the form and institutions of the State are more clearly drawn out</span>
</div>
...

Note 1:

While this CSS-trick may work for specific scenarios, it has limitations as it relies on the rendering engine. The fixed width (e.g., 500px) can cause issues such as premature breaklines or excessive word-spacing. It may not be scalable across different devices.

.page-wrapper {
    text-align: justify;
    width: 500px;
}

.line:after {
    content: "";
    display: inline-block;
    width: 100%;
}

Note 2: Ideally, I'm looking for a pure HTML/CSS solution. If that's not achievable, we might need to consider JavaScript...

html css text render

Answer 1

Answer №1

You have the option to utilize a <p> paragraph along with <br> break tags whenever needed.

Styling with CSS should not pose a challenge either

p {
   text-align: justify;
}

However, I am unsure about

The specific details you are seeking
Why an exact replication of the original is necessary, considering the dynamic nature of the web.

C) A case-by-case evaluation may not be effective either, as it might be perfect on desktop but lacking on mobile or vice versa.

If you are experiencing issues with varying screen sizes, @media queries could offer assistance.

@media only screen and (max-width: 600px) {
    // ADD STYLES IF SCREEN WIDTH IS LESS THAN 600px
}

You can also consider using two different divs, hiding one when needed and displaying the other.

div.mobile {
    display: block;
}
div.desktop {
    display: none;
}
@media only screen and (max-width: 600px) {
    div.desktop {
        display: block;
    }
    div.mobile{
        display: none;
    }
}

Answer 2

You have the option to utilize a <p> paragraph along with <br> break tags whenever needed.

Styling with CSS should not pose a challenge either

p {
   text-align: justify;
}

However, I am unsure about

The specific details you are seeking
Why an exact replication of the original is necessary, considering the dynamic nature of the web.

C) A case-by-case evaluation may not be effective either, as it might be perfect on desktop but lacking on mobile or vice versa.

If you are experiencing issues with varying screen sizes, @media queries could offer assistance.

@media only screen and (max-width: 600px) {
    // ADD STYLES IF SCREEN WIDTH IS LESS THAN 600px
}

You can also consider using two different divs, hiding one when needed and displaying the other.

div.mobile {
    display: block;
}
div.desktop {
    display: none;
}
@media only screen and (max-width: 600px) {
    div.desktop {
        display: block;
    }
    div.mobile{
        display: none;
    }
}

Answer 3

Answer №2

A quick and efficient solution:

To determine the maximum character length, use a monospaced font and set the wrapper width using the ch unit with your max character count, for example 82ch. Then, create a container with a maximum width of 100vw and include overflow:auto to make the content scrollable.

.page-container {
  max-width:100vw;
  overflow:auto;
}
.page-wrapper {
    text-align: justify;
    width: 82ch;
    background-color:#EEE;
    font-family:courier;
    font-size:15px;    
}

.line:after {
    content: "";
    display: inline-block;
    width: 100%;
}

<div class="page-container">
<p class="page-wrapper">
<span class="line">The Republic of Plato is the longest of his works with the exception of the Laws,</span>
<span class="line">and is certainly the greatest of them. There are nearer approaches to modern</span>
<span class="line">metaphysics in the Philebus and in the Sophist; the Politicus or Statesman is</span>
<span class="line">more ideal; the form and institutions of the State are more clearly drawn out</span>
</p>
</div>

A more stylish approach:

Build upon the previous method by adding media breakpoints to adjust the font size. Determine suitable font sizes and breakpoints accordingly.

.page-container {
  max-width: 100vw;
  overflow: auto;
}

.page-wrapper {
  text-align: justify;
  width: 82ch;
  background-color: #EEE;
  font-family: courier;
  font-size: 15px;
}

.line:after {
  content: "";
  display: inline-block;
  width: 100%;
}

@media screen and (max-width:768px) {
  .page-wrapper {
    background-color: #EFE;
    font-size: 12px;
  }

}

@media screen and (max-width:575px) {
  .page-wrapper {
    background-color: #FEE;
    font-size: 11px;
  }
}

<div class="page-container">
  <p class="page-wrapper">
    <span class="line">The Republic of Plato is the longest of his works with the exception of the Laws,</span>
    <span class="line">and is certainly the greatest of them. There are nearer approaches to modern</span>
    <span class="line">metaphysics in the Philebus and in the Sophist; the Politicus or Statesman is</span>
    <span class="line">more ideal; the form and institutions of the State are more clearly drawn out</span>
  </p>
</div>

Enhancing with javascript:

Utilize javascript to calculate the maximum number of characters per line and dynamically adjust the width using the ch unit based on the calculation.

If you're wondering about calculating font size based on width, it's worth noting that font size is typically determined by character height, so basing it on width can present challenges.

Answer 4

A quick and efficient solution:

To determine the maximum character length, use a monospaced font and set the wrapper width using the ch unit with your max character count, for example 82ch. Then, create a container with a maximum width of 100vw and include overflow:auto to make the content scrollable.

.page-container {
  max-width:100vw;
  overflow:auto;
}
.page-wrapper {
    text-align: justify;
    width: 82ch;
    background-color:#EEE;
    font-family:courier;
    font-size:15px;    
}

.line:after {
    content: "";
    display: inline-block;
    width: 100%;
}

<div class="page-container">
<p class="page-wrapper">
<span class="line">The Republic of Plato is the longest of his works with the exception of the Laws,</span>
<span class="line">and is certainly the greatest of them. There are nearer approaches to modern</span>
<span class="line">metaphysics in the Philebus and in the Sophist; the Politicus or Statesman is</span>
<span class="line">more ideal; the form and institutions of the State are more clearly drawn out</span>
</p>
</div>

A more stylish approach:

Build upon the previous method by adding media breakpoints to adjust the font size. Determine suitable font sizes and breakpoints accordingly.

.page-container {
  max-width: 100vw;
  overflow: auto;
}

.page-wrapper {
  text-align: justify;
  width: 82ch;
  background-color: #EEE;
  font-family: courier;
  font-size: 15px;
}

.line:after {
  content: "";
  display: inline-block;
  width: 100%;
}

@media screen and (max-width:768px) {
  .page-wrapper {
    background-color: #EFE;
    font-size: 12px;
  }

}

@media screen and (max-width:575px) {
  .page-wrapper {
    background-color: #FEE;
    font-size: 11px;
  }
}

<div class="page-container">
  <p class="page-wrapper">
    <span class="line">The Republic of Plato is the longest of his works with the exception of the Laws,</span>
    <span class="line">and is certainly the greatest of them. There are nearer approaches to modern</span>
    <span class="line">metaphysics in the Philebus and in the Sophist; the Politicus or Statesman is</span>
    <span class="line">more ideal; the form and institutions of the State are more clearly drawn out</span>
  </p>
</div>

Enhancing with javascript:

Utilize javascript to calculate the maximum number of characters per line and dynamically adjust the width using the ch unit based on the calculation.

If you're wondering about calculating font size based on width, it's worth noting that font size is typically determined by character height, so basing it on width can present challenges.

Using HTML and CSS to evenly align text in individual sections

Answer №1

Answer №2

Similar questions

Is the form being submitted with the href attribute?

When attempting to update a database, the Jquery ajax response is not being reflected

Ensure that all content in the table rows remains visible, even in a table with unusually lengthy cells

Automatically close an element when you click on a different element

The animation isn't loading

Adding descriptive text before a website link is a helpful way to provide context for the reader. For example

Setting the height of a div to 100% is not effective

Inserting lines into the text, creating a visually appealing layout

What is the best way to wrap text and move the lines up without affecting the bottom margin?

A more efficient approach to creating a personalized design

Moving a popup div along with a marker in Leaflet can be achieved by using the set

Fixing the error message "page attempting to load scripts from an unauthenticated source"

Get a polished look using HTML and CSS exclusively

Submitting numerous data fields using a post AJAX call

Transitioning between pages causes a delay in loading the background

Is there a way to disregard inherited styles without relying on the use of "!important"?

What is the best way to include default text in my HTML input text field?

Employing a lexicon of hexadecimal color code values to harmonize CSS styles

Ways to reload an independent page in order to access PHP session variables:

Bootstrap 5 does not support tab navigation functionality