I need help coding a poetry book. The book will be available on amazon and readers will be able to change the text size. I need the lines to wrap with a hanging indent if they are longer than the width of the reader's device.
The book is currently set up so that each stanza is its own paragraph and each line has a at the end of it. How can I ensure that the lines will wrap with a hanging indent? It will be translated into an EPUB document.
All advice is appreciated thank you.
You might try something like this:
.hang {
padding-left: 2em ;
text-indent: -2em ;
}
Notice there is a point / period / full stop before "hang".
Then every other paragraph would be tagged as follows:
<p class="hang">
Or You can try something like this, if You don't mind solving it without CSS:
<p width="-30">First line</p>
<p width="-60"> Second line</p>
<p width="-30">Third line</p>
<p width="-60"> Guess which line</p>
<p width="-30">Next line</p>
<p width="-60"> And so on</p>
Then there is this topic, and also this one.
Also You can ask it over at Ebooks Stackexchange!
Related
I can't float my image the way I want in the post editor. I need to have it sit next to several separate elements (2 different headings + a paragraph), not just one element. And I see no way to do that.
Any suggestion would be welcome.
I would do it in the text tab of the editor like this.
<img src="my image" style="float:right" />
<h3>Title</h3>
<h4>Discription</h4>
<p>paragraph text</p>
You want the <img> with the float:right property first, then the rest of headings and the paragraph
Here is a demo http://jsfiddle.net/d55psoqq/
Note: the Wordpress "alignright" property usually added when you add an image with the media manager, will do the same as the style="float:right;" if it is properly defined in the stylesheets. (I have encountered some themes were it is not defined) If "alignright" does not work you can add it to the main stylesheet like this...
.alignright {float:right;}
Update:
To get all the text to stay at the left and never flow under the image, you need to force it into a column like this...
<img src="http://placehold.it/350x200/" style="float:right" />
<div style="overflow:hidden">
<h3>Title</h3>
<h4>Discription</h4>
<p>paragraph text</p>
</div>
Demo http://jsfiddle.net/d55psoqq/3/
I am using the bootstrap jumbotron but the header wont wrap in next line when long text is used. any way to fix it?
This is what I am using in my html
<div class="jumbotron">
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<p class="lead">Help visualize leadership networks in the Upper Midwest</p>
</div>
Try the following on the text that you want to wrap on to the next line.
h1 {
word-wrap:break-word;
}
This will break up the long word at any character though. See the links below for more information.
mdn doc for word-break
css-tricks
So I've done a lot of research before asking this question. I already know how to use the if/else and conditional tags to make certain code applicable to only certain pages, BUT, I noticed that there isn't a single guide or question-answer out there addressing my question on only styling the first/most recent post in my blogger.
The closest I got to finding the solution (other than codes that I didn't have the skill to implement), was this one: http://helplogger.blogspot.ro/2014/01/create-magazine-style-layout-for-blogger-posts.html
Sample site from that tutorial: http://helploggertestblog.blogspot.com/
The problem with the above script is that was made to be too automated, and I don't need a post-summary or thumbnail for my other posts-- I'm only trying to change the look for the first post. I love that the first post's width was increased, bordered, color-changed, and what not.
Does anyone have any ideas on how I might isolate what I'm looking for, point me towards the right direction, or even hand me a general container so that I can get on with my life?
Without seeing any of your code it's kinda guessing, but I'll give it a try anyway.
I'm guessing that you have the posts in a div or other parent element. Something like this:
<div class="container">
<div>
<h3>Title</h3>
<p>Content of the post ... </p>
</div>
<div>
<h3>Title</h3>
<p>Content of the post ... </p>
</div>
<div>
<h3>Title</h3>
<p>Content of the post ... </p>
</div>
</div>
To style only the first div inside the container, you can use:
.container > div:nth-first-child {
/* your specific style here */
}
With your code, it would be easier to help...
EDIT
Use:
.blog-posts > .post-outer:first-child {
background: green;
}
There is a conditional tag available for 1st post
<b:if cond='data:post.isFirstPost'>
Your custom css only for the 1st post here
</b:if>
Hello i have been coding on a template and there seams to be a problem when articles from my website are being echoed,
Here is my code (Note: This code is the same twice just with a different content)
<section class="slice bg-5">
<div class="w-section inverse">
<div class="container">
<div class="row">
<div class="col-md-5" style="display:inline-block;"> <h3>IceSword</h3>
<p> Voici un news </p>
</div>
HERE IS A IMAGE -------------------------> http://i.stack.imgur.com/g5suv.jpg
in real world scenario the words not as long as you are using in demo.
i mean if the word is too much long (without space) then it will break through its container, you can apply word-break rule but its not necessary.
just try demo with some real paragraph or lorem ipsum paragraph, not with a series of single characters without space.
but if you explicitly want to break words then try this css property:
p {word-break:break-all;}
I am experiencing a problem that never happened before and seems really unprecedented, some text is not wrapping inside a div.
In this link is a sample of my html code:
http://jsfiddle.net/NDND2/2/
<div id="calendar_container">
<div id="events_container">
<div class="event_block">
<div class="title">
lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem
</div>
</div>
</div>
</div>
Any help??
I found this helped where my words were breaking part way through the word in a WooThemes Testimonial plugin.
.testimonials-text {
white-space: normal;
}
play with it here http://nortronics.com.au/recomendations/
<blockquote class="testimonials-text" itemprop="reviewBody">
<a href="http://www.jacobs.com/" class="avatar-link">
<img width="100" height="100" src="http://nortronics.com.au/wp-content/uploads/2015/11/SKM-100x100.jpg" class="avatar wp-post-image" alt="SKM Sinclair Knight Merz">
</a>
<p>Tim continues to provide high-level technical applications advice and support for a very challenging IP video application. He has shown he will go the extra mile to ensure all avenues are explored to identify an innovative and practical solution.<br>Tim manages to do this with a very helpful and professional attitude which is much appreciated.
</p>
</blockquote>
That's because there are no spaces in that long string so it has to break out of its container. Add word-break:break-all; to your .title rules to force a break.
#calendar_container > #events_container > .event_block > .title {
width:400px;
font-size:12px;
word-break:break-all;
}
jsFiddle example
The problem in the jsfiddle is that your dummy text is all one word. If you use your lorem ipsum given in the question, then the text wraps fine.
If you want large words to be broken mid-word and wrap around, add this to your .title css:
word-wrap: break-word;
This may help a small percentage of people still scratching their heads. Text copied from clipboard into VSCode may have an invisible hard space character preventing wrapping. Check it with HTML inspector
you can add this line: word-break:break-all; to your CSS-code
Might benefit you to be aware of another option, word-wrap: break-word;
The difference here is that words that can completely fit on 1 line will do that, vs. being forced to break simply because there is no more real estate on the line the word starts on.
See the fiddle for an illustration http://jsfiddle.net/Jqkcp/