Jump to content

Recommended Posts

I would like to place a poem on top of an image I have already made. I want each line of the poem to be single spaced and the starting letter of each line to be vertically below each other as it would be in a column. I want the column to be on the right hand side of the image.

How do I regulate the spacing between the lines of text?

How can I ensure that each line of the poem is retained as per the original layout?

How do I position the column of text on the image?

Link to post
Share on other sites

Simple questions. Just search the w3 site.


For example, I searched "line spacing" on the w3 and found this:




You get the idea.

Edited by niche
Link to post
Share on other sites

To put text ontop of an image make the image a background of the container that the text is in using the CSS background-image property.

You can use the :first-letter pseudo selector or simply wrap the first letter of the line in a <span> tag to style them separately. You can use the vertical-align property to make the first letter go below or centered relative to the rest of the text.

The separation between lines of text can be regulated using the line-height property

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...