My main objective involves dynamically inserting images above text on any given page using a content script. The challenge lies in maintaining the proper alignment of the text after adding the images. To achieve this, I surround the words where the image is injected with a span element that has a specific attribute. Then, my script (the content script of a Chrome extension) wraps that span with another span (the parent in my CSS) that includes the image wrapped within its own span.
The issue at hand pertains to a CSS problem; when injecting the images, the text's lining gets disrupted.
To visualize this more clearly, you can refer to the example at https://jsfiddle.net/wyfumrx6/2/
In the current implementation, I utilize inline-flex and flex-direction:
Here's an HTML example:
<a href="https://www.wikihow.com/Make-a-Good-Cup-of-Tea" style="/* line-height: 57px; *//* height: auto; */font-size: 150%;font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;/* height: 55px; *//* display: inline-flex; */">
<span id="div0" class="aui_top_in_page_parent" tabindex="0" style="">
<span id="span0" class="aui_top_in_page"><img src="http://www.arasaac.org/repositorio/thumbs/10/50/1/12313.png"
class="aui_header_images"></span>
<span aui-symbol="14907" aria-describedby="span0" accesskey="Shift + E">How
</span>
</span>
<span id="div5" class="aui_top_in_page_parent" tabindex="0">
<span id="span5" class="aui_top_in_page"><img src="http://www.arasaac.org/repositorio/thumbs/10/50/7/7194.png"
class="aui_header_images"></span>
<span aui-symbol="17982" aria-describedby="span5" accesskey="Shift + E">to</span></span> <span id="div6" class="aui_top_in_page_parent" tabindex="0"><span id="span6" class="aui_top_in_page"><img src="http://www.arasaac.org/repositorio/thumbs/10/50/3/32751.png"
class="aui_header_images"></span><span aui-symbol="15410" aria-describedby="span6" accesskey="Shift + E">Make</span></span>
a Good <span id="div7" class="aui_top_in_page_parent" tabindex="0"><span id="span7" class="aui_top_in_page"><img
src="http://www.arasaac.org/repositorio/thumbs/10/50/2/2429.png" class="aui_header_images"></span><span aui-symbol="13621 12324 17511" aria-describedby="span7" accesskey="Shift + E">Cup of Tea</span></span>
</a>
Accompanied by the CSS code (also injected):
For the span wrapping the image (inside a span) and the text (also inside its own span):
.aui_top_in_page_parent {
display: inline-flex;
flex-direction: column;
position: relative;
z-index: 99999999;
margin: 1%;
}
For the inner span wrapping the image only:
.aui_top_in_page {
font-size: 14px;
font-weight: regular;
overflow: visible;
padding: 0px 0px 0px;
color: #fff;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
text-align: center;
text-decoration: none;
z-index: 99999999;
align-items: center;
}
To see the outcome clearly, visit: https://jsfiddle.net/wyfumrx6/
I strive for the text to remain in a straight line while having the images positioned above the designated words. Moreover, there should be sufficient spacing between the image and the text line above to indicate which word the image corresponds to.