Login/Register
Indent line after each <br /> in HTML
Asked Answered
Solved htmltext-indent
A

5

4

I try to turn a PDF book into a mobi book (html), and I also want to recreate the layout. There, after every break the text is intended one line. This should be doable with

<body style="text-indent:20px each-line;">

but I'm doing something wrong, as it doesn't work.

I don't want to do this with paragraphs as that also includes a blank line by default, but those breaks don't always mean a entire new paragraph...

Ardellaardelle answered 23/7, 2012 at 20:12 Comment(1)
Semantically a paragraph has meaning, whereas a line break does not. Don't force a square peg into a round hole. – Weidner
F
3

each-line is not yet supported in browsers (see text-indent on MDN). However, this is what you will want to use when it becomes available.

Felker answered 23/7, 2012 at 20:17 Comment(1)
I come from the year 2021. There is still not a single browser which implements each-line. – Horatia
O
1

Use the semantically correct paragraph tags <p> and use CSS to modify padding/margin as needed.

Out answered 23/7, 2012 at 20:21 Comment(0)
C
1

Paragraphs are the way to go on the markup level. The blank lines you describe, are margins that are added by Web browsers by default. Since you will already be editing the style sheet to add the text indenting, overriding these default margins should be no hassle at all. In fact, the following should be enough:

p {
    margin: 0;
    text-indent: 2em
}

Why 2em? That means twice the width of the letter m of the typeface the paragraph is set in. So whatever the reader does with his or her personal settings (font size, resolution, et al.), the indenting should be proportional to the text. It is also somewhat of a typographic convention. Of course, you could set this value to a lot of other things, like 20px or 1cm.

Chatty answered 24/7, 2012 at 0:39 Comment(0)
G
1

I added this to my CSS:

p {
     text-indent: 15px;
     white-space: pre-wrap; 
 }

Then I indented every line that wasn't automatically indented with three spaces.

Gurango answered 1/3 at 7:38 Comment(1)
Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Harlotry
A
-1

When you run the code snippet it will give you example HTML text you can copy and past and play around with.

Hope this helps. As this is a way to put text any way you see fit. Thanks!

    <!DOCTYPE html>
    <html>

    <body>

    <style>
    	h3 {
    		text-indent: 25px;
    	   }
    	
    	h3.small {
    			  line-height: 0.2;
    			  margin-top: 0em;
    			  margin-bottom: 0em
    			 }

    	h4.small {
    			  line-height: 0.2;
    			  margin-top: 1.5em;
    			  margin-bottom: 1em;
    		     }
    </style>
      
      <h1>Example</h1>
      
      <h3 class="small">Put text where you want</h3>
      
      <pre style="font-family:verdana">
    	    This text will keep spacing. 
    	        This this line too.</pre>
    	
      <h4 class="small", style="text-indent: 50px">
    	This is how to make the above example, hope it helps:
      </h4>
    	
    <pre>
    &lt;html&gt;

    &lt;body&gt;

      &lt;style&gt;
    	h3 {
    		text-indent: 25px;
    	   }
    	
    	h3.small {
    			  line-height: 0.2;
    			  margin-top: 0em;
    			  margin-bottom: 0em
    			 }

    	h4.small {
    			  line-height: 0.2;
    			  margin-top: 1.5em;
    			  margin-bottom: 1em;
    		     }
    	&lt;/style&gt;
      
      &lt;h1&gt; Example &lt;/h1&gt;
      
      &lt;h3&gt; class="small">Put text where you want &lt;h3&gt;
      
      &lt;pre&gt; style="font-family:verdana"
    	    This text will keep spacing as formated in HTML file. 
    	        This line too.&lt;/pre&gt;
      &lt;/body&gt;
    &lt;/html&gt;</pre>
    REFERENCE:
    W3schools.com link to HTML <pre> Tag:
    https://www.w3schools.com/tags/tag_pre.asp

    W3schools.com link to HTML line height:
    https://www.w3schools.com/css/tryit.asp?filename=trycss_line-height

    W3schools.com link to HTML <p> tag default options:
    https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_p_default_css</pre>
    </body>
    </html>
Anglofrench answered 12/8, 2019 at 18:10 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.