Indent line after each <br /> in HTML

StackOverflow https://stackoverflow.com/questions/11619794

  •  22-06-2021
  •  | 
  •  

Вопрос

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

Это было полезно?

Решение

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.

Другие советы

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

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.

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>

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top