0

Taking any page from any book or article that is justified and trying to make an exact online replica (same look and feel with HTML/CSS), that is including justifying the text with the exact line break and setting the outer wrapper with a width that match the min/max-width of the text itself - is this at all possible?

The HTML could be something like this:

...
<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:

This CSS-trick isen't scalable as it relies on the rendering engine, and either the fix with (in example below set as 500px) will break either A) too early and add unwanted breaklines, B) too late and add large word-spacing or C) a case-by-case assessment that's of no good either as it's maybe perfect on the desktop but falls short on either A) or B) on mobile, vice versa.

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

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

Note 2: I would prefer a pure HTML/CSS solution, if this is not possible, let's get JS on the table...

imdk4242
  • 15
  • 4
  • 1
    Don't. Print and web a two very different mediums. Print you can get pixel perfect results and you're dealing with fixed dimensions. Web you're dealing with different dimensions varying from wide screen hi def monitors to mobile phones in portrait mode. To complicate further, pixel density can change between devices. In general, trying to replicate print media in web is folly. The best way to guarantee it, a good, scanned image of the page, which gives a massive hit to accessibility. – Jon P Nov 28 '19 at 04:19
  • 1
    As a graphic designer migrated over to web design; never ever use justified text in medias where you can't tell the pixel density or width. The word spacing will decrease the legibility and you can never (in an easy way anyway) hyphenate or kern (change letter spacing) to make up for that word space. Use the strengths of the medium instead of working against it. If you truly want to do this, create/use an online pdf reader instead. – Rickard Elimää Nov 28 '19 at 05:03
  • Thanks for both of the replies, however no of them brings us closer to a solution. If the question needs elaborating please as so and I'll love to update it with more information, examples or specs – imdk4242 Nov 28 '19 at 15:16
  • The question is clear enough. If you really must recreate the printed page, take the advice from @RickardElimää and use an embedded PDF: https://stackoverflow.com/questions/291813/recommended-way-to-embed-pdf-in-html . It will give you the most control. The web (HTML/CSS) is just not designed to work this way. Any javascript solution is likely to load one way then jarringly refresh to the style you want. – Jon P Nov 28 '19 at 22:52

2 Answers2

0

You could just use <p> paragraph with <br> break tags where necessary.

CSS wouldn't be complicated either

p {
   text-align: justify;
}

Although I'm not necesarilly sure

  1. What you're asking for

  2. Why it has to be an exact replica of the source, since web is fairly dynamic.

C) a case-by-case assessment that's of no good either as it's maybe perfect on the desktop but falls short on either A) or B) on mobile, vice versa.

Seeing as you are also having problems with different sizes, @media queries might help quite a bit.

@media only screen and (max-width: 600px) {
    // DO SOMETHING HERE IF SCREEN IS SMALLER THAN 600px
}

You could also have 2 different divs and hide one where necessary, and show 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;
    }
}
Shib
  • 296
  • 1
  • 13
  • I think the OP wants the lines to be justified, *and* to break at the same places the original did. I.e. a CSS directive to stretch a given line out so that it reaches both margins. – Ray Butterworth Nov 28 '19 at 14:59
  • Making use of `

    ` with `
    ` will not slow the problem and I'll be losing the ability to style each line separately. I think the why is less important, and the **if**, and in which case **how** is more interesting. However we have some pages we want to display in full searchable and indexable way for an old manuscript. The `@media` breakpoints don't solve the problem either, as two identical screen size can display (text render) the content different and thereby require a different specific width. The only way to get about this is not using `width` but something like `minmax`, `max-width`..

     – imdk4242 Nov 28 '19 at 15:14
0

The quick and dirty way:

Work out you maximum character length. Use a monospaced font. Set your wrapper width using the ch unit and your max character count, eg 82ch. Next set a container with a max width of 100vw and overflow:auto so that the content is 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>

Slightly fancier:

Same as the above but set some media break points to adjust the font size. I'll leave it to you to work out font-sizes and break points.

.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>

What javascript can add

You could use javascript to calculate the max number of characters per line and update the with in ch based on the result.

Why not calculate font size based on width I hear someone ask? Well the problem with that is font size is based on character height, so basing it of width is... problematic.

Jon P
  • 19,442
  • 8
  • 49
  • 72