Databases
StackOverflow2013
Postsdbo
PO"Floating" annotations with HTML/CSS/JavaScript/whatever
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO"Floating" annotations with HTML/CSS/JavaScript/whatever
    primarykey
    data
    text
    <p>I have a text document with some annotations, and I would like to make them appear near the text they accompany, on a webpage.</p> <p>That is, I want to convert something like this:</p> <pre><code> The Houdan hen was never drawn into the cult of Sredni Vashtar. Conradin had long ago settled that she was an Anabaptist. He did not pretend to have [23] the remotest knowledge as to what an Anabaptist was, but he privately hoped that it was dashing and not very respectable. </code></pre> <p>appropriately, so that in a browser, the [23] is displayed somewhere on the same line as the words "pretend to have" (preferably in the left or right 'margin' on the page), whatever the font size or wherever the line breaks might be. Is this possible, with any mix of CSS/JavaScript/pre-processing, whatever?</p> <p>See <a href="http://www.gutenberg.org/files/21769/21769-h/21769-h.htm#2H_4_0036" rel="nofollow noreferrer">(the left margin on) this page</a> for an example of what I want to do: have page numbers accompany the text. Except that the text isn't just verse that is all in <code>&lt;pre&gt;</code>, so I can't exactly copy what they do. (I guess it is possible to move all the annotations to the top/bottom of paragraphs and have them appear there, but I'd really not prefer that.)</p> <p>I realise the question might be vague, but I'm open to suggestions.</p> <p>[<strong>Note</strong>: I don't need anything to "float" in the technical (CSS/whatever) sense; I just imagined that having these "annotations" beside text mid-paragraph requires something of a floating nature. I'm open to suggestions for a better question title too :)]</p> <p><strong>Update</strong>: Also, does your method work if the "annotations" are longer than just a number, e.g. small paragraphs themselves or images?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USShreevatsaR
    1. USShreevatsaR
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PO"Floating" annotations with HTML/CSS/JavaScript/whatever
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO"Floating" annotations with HTML/CSS/JavaScript/whatever
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO"Floating" annotations with HTML/CSS/JavaScript/whatever
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI reworked the answer... note how display:block isn't really necessary.
      singulars
      1. PO"Floating" annotations with HTML/CSS/JavaScript/whatever
      1. USilya n.
    2. COThanks @ShreevatsaR for the question and @everyone for upvoting my answer!
      singulars
      1. PO"Floating" annotations with HTML/CSS/JavaScript/whatever
      1. USilya n.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload