I have a body of text in regular paragraph form that I'd like to annotate with footnotes, and I'd like it to be clear on what exact text from the paragraph the footnote is commenting, so I'd like to have a line (with endpoints/arrowheads/etc. if possible) over the text, with the footnote number in the center, like so:
<--- 1---> <------ 2 ------>
Hi, here's some text to annotate, isn't it so cool?
I appreciate any pointers on how to do this with HTML/CSS/JS, if it's even possible.
Here's one way you can do it:
.annotation {
border-top: dashed 2px black;
position: relative;
}
.annotation::after {
content: attr(data-footnote);
position: absolute;
left: 50%;
top: -1.15em;
}
<p><span data-footnote="1" class="annotation">Hi, here's</span> text to annotate, <span data-footnote="2" class="annotation">isn't it so cool?</span>
</p>
The <span> (or it could be an <a href> link to the footnote itself) wraps the text. By putting position: relative on it, that allows the child pseudo-element to be absolutely positioned relative to it.
Then the border and positioning takes care of the dashing and number. Arrowheads would be harder though.... maybe they can be done with a background image, but I haven't trued.
You'll want to make sure the line-height in the paragraph is big enough so the number above doesn't overlap with other lines of text.
Related
I have a simple html with a div limited by width. Inside I have many span tags that are configured with nowrap. My css:
.content {
width: 50%;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
.adder {
color: blue;
cursor: pointer;
}
.added {
position: relative;
white-space: nowrap;
}
And my html:
<div class="content">
<span class="added">A text just a little large 1.</span>
<span class="added">A text just a little large 2.</span>
<span class="added">A text just a little large 3.</span>
<span class="added">A text just a little large 4.</span>
<span class="added">A text just a little large 5.</span>
<span class="adder">Add</span>
</div>
As expected, the text is broken when there is no more space in the line to be placed. Then the entire span is rendered on the next line. Now I added some javascript code:
$(function() {
$(".adder").click(function() {
$(document.createElement("span"))
.addClass("added")
.html("A custom text to be add,")
.insertBefore(this);
});
});
So, now a new span is placed before the Add text for every time I click on Add.
But the problem is this, when I click a few more times in the Add, there comes a point where the end of the line size is reached, but rather to break the line as the other part of the text does, the new span is simply rendered in the same line overlapping the edge of the div.
Why this happen? How to avoid it?
I'm testing this page in Google Chrome 42.0.2311.135.
The whole html can be viewed in jsfinddle.
Your original list of "added" <span> elements have whitespace between them. The ones you add with the JavaScript code don't. Therefore, the browser can't insert line breaks between them — it will only do that at whitespace boundaries.
You can fix that in a few different ways; one simple way is to add this to your "click" handler:
$("<span/>", { text: " " }).insertBefore(this);
Another way to fix it is with pure CSS:
.added::after {
white-space: normal;
content: "\00200B";
}
No JavaScript changes would be necessary with that approach.
When you use insertBefore there is no space added between yoru elements. Simply add a space yourself and they will wrap as you expect:
$(function() {
$(".adder").click(function() {
$(document.createElement("span"))
.addClass("added")
.html("A custom text to be add,")
.insertBefore(this)
.after(" "); // add a single space
});
});
http://jsfiddle.net/gtoh8hzp/
I'm trying to create a textarea control in which it is possible to mention other users. The feature is pretty much similar to the one found in Facebook, and the implementation is similar too. When the user types an "#", a dropdown is presented from which a user can be selected which is then displayed with a highlight in the textarea. To be able to selectively render highlights in the textarea, I'm using an overlay div with the same text, but with span tags to create highlights.
The overlay has the same width, the same font and font-size, the same letter-spacing, same line-height, etc., to make sure all highlights will align properly with the text in the textarea. All the text in the overlay div, except for the highlights themselves, is transparent to avoid artifacts of rendering anti-aliased text over text.
This all works pretty well, except that when there is a mention highlight, the text in the highlight is somehow just slightly less wide than the text below it in the textarea, which causes a very slight mismatch. Worse, this small mismatch accumulates when there are multiple highlights, and it can sometimes cause a line to wrap in the textarea but not in the div, after which the whole illusion just falls apart.
I have verified that all text rendering options are exactly the same for the text in the textarea and in the overlay and in the highlights. All have equal font, font-size, letter-spacing, line-height, there's no margin, border or padding on the highlights, etc.. I have also looked in the WebKit Inspector to see if I might have missed any properties that could still affect text rendering, but couldn't find any. Simply put, I can't explain where this slight rendering difference comes from.
Please note that the rendering difference does not occur as long as the overlay doesn't contain any highlights.
I have also tried only rendering the overlay and not rendering the textarea at all (instead of having the overlay be transparent outside of the highlights), but this has the nasty side-effect that I won't see any cursor anymore.
Is there some CSS property that I still might have overlooked or is there some other reason why breaking the text into multiple spans would cause the total width of the text to slightly differ from an uninterrupted text node? Any suggestions would be greatly appreciated!
Update: For any others who might run into this problem, it's illustrated in the following jsfiddle: http://jsfiddle.net/brt8w85z/5/
<style type="text/css">
.parent {
text-rendering: optimizeLegibility;
position: relative;
}
textarea {
border: 0;
color: #000;
resize: none;
}
.overlay {
color: transparent;
pointer-events: none;
}
textarea,.overlay {
font-family: Helvetica,sans-serif;
font-size: 12px;
left: 10px;
letter-spacing: normal;
margin: 0;
padding: 0;
position: absolute;
top: 10px;
width: 200px;
}
.highlight {
background-color: #00f;
color: #fff;
}
</style>
<div class="parent">
<textarea>Tom Kleijn, Mark van der Velden and Arend van Beelen</textarea>
<div class="overlay"><span class="highlight">Tom Kleijn</span>, <span class="highlight">Mark van der Velden</span> and <span class="highlight">Arend van Beelen</span></div>
</div>
The problem can be fixed by adding "text-rendering: geometricPrecision" to the "textarea,.overlay" rule.
Seems I have found the solution myself: On the body there's a definition of "text-rendering: optimizeLegibility". Setting this back to "text-rendering: geometricPrecision" on the textarea fixed the problem. The reason this was not obvious before was because the WebKit Inspector did not show the inherited text-rendering on the textarea, even though it does so for (most?) other inherited properties.
I am using the html entity (code) & #9679; which is a dark filled circle(●).
I want to display the first or the second half of the image(filled semi circle).
I could use image of a filled half circle to achieve this but I want to use html entity since that reduces page load time
Well, the easiest method would be to just use the the Unicode 'RIGHT HALF BLACK CIRCLE' character, HTML entity ◗.
◗
See Wikipedia: Geometric Shapes
Update: For a more general solution, you could use something like this:
<span class="clip">
<span class="l-half">◉</span>
</span>
.clip {
overflow: hidden;
display: inline-block;
}
.l-half {
font-size: 72px;
position: relative;
left: -50%;
}
Demonstration
I have an a href inside a div, and this link inside a table cell is multiline and text-align centered.
Now the whole cell becomes clickable, since the a href is filling the whole space except a little area closest to the border. I want the area around the link-text to not be clickable, and only the text.
this is the css:
tbody td.link a{
display: inline;
font-family: Arial;
font-size: 15px;
color: #545454;
position: absolute;
padding-top: 4px;
z-index: 10;
}
Since the z-index is 10, then the link is "closer to the user" than the background, and if I change this the whole link is disabled.
I also tried this, but without result:
$('td.link').find('a').click(function(ev){
ev.preventDefault();
ev.stopPropagation();
});
Summary: Is there a way to make only the actual text characters of a link clickable, and not the background?
THanks!
You cannot, because the actual text does not constitute an element. An element always contains some empty space around the characters (not to mention their inside). But you can limit the area occupied by the element. This may mean removing its padding, setting its line height to a smaller value (maybe 1), and changing a block element to an inline element. For more specific advice, you need to provide more specific information (HTML and CSS code).
I'm guessing you have a problem with the padding:4px
since padding is part of the element, it becomes clickable. I would suggest, using margin,
or padding on the parent element. (you could use box-sizing:border-box, to solve any sizing problems.)
You add this style
tbody td.rank a{
text-decoration:none;
}
Is it possible that we can write text on image using html or javascript.
I have done this
Created an em tag and create spans inside it and now we can write any text in spans and adjust the position of em tag such that it appears over image. Set the z-index of em tag to be larger value then image. Then it appears that text is written over image.
But I want to provide option using which a visitor can edit the text. How i can do it ?
Code Sample:-
$("#em1").html("<p><span>Hi I am</span><br>
<span> Trying to </span><br><br>
<span> To write text</span></p>");
#em1{
display: block;
/*border: 1px solid black;*/
position: absolute;
top: 160px;
right: 145px;
z-index : 10;
}
I am using a background (blank-nothing written on it) image
Set the contenteditable attribute on the em element. You probably need to inform users about the edibility, as people don’t normally expect it, and there is nothing in the visual appearance that suggests it.
You can have a textarea
<textarea class='abc' >Hello Boys</textarea>
with some css applied to it.
.abc{
background: url('http://www.bzfusion.net/skymaps/sky_englishspring.jpg') no-repeat;
background-color:red;
width:300px;
height:500px;
}
A good practice for this kind of feature is that drawing is done on server side. If you really need to draw on client, use HTML5 canvas.
If you will need to save that image, read this article:
http://www.nihilogic.dk/labs/canvas2image/