How to Add Text in An Image

Sometimes we want to add text in the image, not below or above it. We can set the position, top, right, bottom, or left property or the text element. 

One important thing to keep in mind is that the we nee to add a some element to wrap around the target image and the text element we want to show in the image.

Example and Code

top-left:
top:
top-right:
left:
bottom-right:
bottom:
bottom-left:
right:
Apples
<div style = "posotion:relative">
    <img src = "something.jpg">
    <div style = "position:absolute;bottom:0;left:45%">some text</div>
</div>

How to Use

  1. Make sure the img tag and text div tag are wrap in a div tag.
  2. The wraper tag needs to have position: relative property, so that the text div can sit in it.
  3. Set the text div to position: absolute; and start defining the postion, left, top, right, or bottom until the text is at where you want it to be.
  4. One trick is to remember the wraper div is what the text being relative to, so its position should be relative. The text should have absolute position relative to the div.

A Big Problem

One big problem is that the wrapper div, in default, has a width of 100%, then the image text may show up in some expected place. It may show up in the fartherest right or left of the div when the image's width is bellow 100% of the browser.
Apple

<div style = "text-align:center;background-color:lightgrey;position:relative">
	<img src = "someapple.jpg">
	<div style = "right:0;top:0;position:absolute">Apple</div>
</div>
This problem can be solved by setting the wrapper div display to inline-block:
Apple
<div style = "text-align:center;background-color:lightgrey;position:relative;display:inline-block">
	<img src = "someapple.jpg">
	<div style = "right:0;top:0;position:absolute">Apple</div>
</div>

One more problem about how to center text in the image

In the above examples, when text div is set to left or right of 50%, the text will actually not aligned canter. This is the result that the text has some width and the left or right property pushes the text toward center respevtively with no consideration of the text width.
Big Apple
<div style = "text-align:center;background-color:lightgrey;position:relative;display:inline-block">
	<img src = "someapple.jpg">
	<div style = " right: 50%; bottom: 0px;position:absolute">Big Apple</div>
</div>
This problem can be solved by setting the text div width to 100% and remove the left or right property. And you can controll the left or right by setting the text div's text-align property, such as center.
Big Apple
<div style = "text-align:center;background-color:lightgrey;position:relative;display:inline-block">
	<img src = "someapple.jpg">
	<div style = "width:100%;text-align:center; bottom: 0px;position:absolute">Big Apple</div>
</div>

One use of this is we can add button on the image

<div style = "text-align:center;background-color:lightgrey;position:relative;display:inline-block">
	<img src = "someapple.jpg">
    <div style = "width:100%;text-align:center; bottom: 0px;position:absolute">
        <button style = "display:inline">Big Apple</button>Big Apple
    </div>
</div>

How to align text block vertically or horizontally in an image.

We can use the transform translate to move the text block half of its width to the left and half of its height up to align the text. This is needed because of the left, right, top or bottom CSS property applies to the left or top side of the text block, which will place the text block too much to the right if we use right:50%, too much to the bottom, if we use top:50%. More so especially when the text is long.

This problem can be addressed by assigning transform:translate(-50%, -50%) to center the text. If the text is right next to the image borders, we can use transform:translate(-50%,0) to move the text to the bottom or transform:translate(0,-50%) just to center vertically. 

By the way in the translate(0,-50%), the first parameter 0 is the x position and the second parameter -50% is the y position. We can adjust each of these parameters to move the text horizontally or vertically respectively.

Examples

TEXT
<div style = "position:relative">
<img style = "width:100%" src="someimg.png"/>
  <divstyle = "position:absolute;left:50%;bottom:0; transform: translate(-50%, 0%);">TEXT</div>
</div>
TEXT
<div style = "position:relative">
<img style = "width:100%" src="someimg.png"/>
  <div style = "position:absolute;left:50%;bottom:0; transform: translate(-50%, -50%);">TEXT</div>
</div>
TEXT
<div style = "position:relative">
<img style = "width:100%" src="someimg.png"/>
  <div style = "position:absolute;top: 50%; left: 0px; transform: translate(0, -50%);">TEXT</div>
</div>

Comments

Post a Comment

Popular posts from this blog

How to Make A Reusable Image Slideshow HTML Component With Vanilla JavaScript

Image
The image slide show I am making has no animation. The mechanism for displaying different slide is by using the display CSS property. The image with display none will not show, while the one with display block will. I will start build one that relys on HTML code then I will build one that relys on JavaScipt that renders the slide show onto the webpage. HTML Slideshow Setup A HTML image slide show can follow the following logic: An image is shown and the others are hidden, by defining the CSS display property to "block" to show and "none" to hide. An index is used to control the CSS display property of each slide with the initial index of 1. On initiation, all image tags for the slide show will be given the CSS property correspoding to whether it's shown or not. A left arrow and a right arrow are used to control the index with onclick event handlers. In order to position the left and right control...
Read more

HTML Tags and Inline CSS that Work In Plotly.js Title

When we create a plot object with Plotly.js, we throw in 3 basic parameters in the Plotly object which are the plot container id, data and layout, like this one: Plotly.newPlot('myDiv', data, layout); And in the layont object, there is a property, called title. The title property can be defined with an string, which will simply be just the title text that is going to display on the top of the plot.  I want to style my chart title when I use Plotly.js.; var layout = { title:`Plot Title` } Or in the text object within the title property. var layout = { title:{text:`Plot Title`} } Plot;y'js has some built-in title properties which we can use to style the title, sush as font color, family, size, padding, and position with x or y. var layout = { title: { text:'Plot Title', font: { family: 'Courier New, monospace', size: 24 }, xref: 'paper', x: 0.05, } }; Problems But I want to add a HTML tag...
Read more

How to Type Spaces In HTML Input And Display In the Browser

Image
When we type a space in an input and use it in JavaScript. The space will be recorded as text just like regular texts. Type In Multiple Spaces When we type some text with many spaces and displays the text in the browser, muiltple spaces will be parsed into one space, if they are connected. Type some text with spaces here: <input oninput="show_1.innerHTML = this.value" /><br /> <div id="show_1"></div> What does JavaScript Do to the Spaces? JavaScript does nothing to the spaces. It preservs all the spaces we type. The following code converts spaces into the letter "a". Space is represnted by \x20 in JavaScript. Type some text with spaces here: <input oninput="show_2.innerHTML = this.value.replace(/\x20/g,'a');" /><br /> <div id="show_2"></div> Why doesn't the Spaces Show in the Browser? Because the connected spaces are parsed into one space in HTML. ...
Read more