Andrew DS a11n

<p>This plugin allows you to tag people and objects in your images by selecting a region of the image and add names, URLs and descriptions.  Implements the jQuery-Notes plugin by Lukas Rydygel (http://jquery-notes.rydygel.de/) and the jQuery-autocomplete plugin by Dylan Verheul (http://code.google.com/p/jquery-autocomplete/).</p>
<p>See the <a href="http://www.alleba.com/blog/2010/09/29/wordpress-plugin-wp-pic-tagger/" rel="nofollow ugc">WP Pic Tagger homepage</a> for more complete and detailed information.</p>
<h3>Usage</h3>
<h4>Enabling Tags on an Image</h4>
<p>To tag an image, you need to assign the class “wp-tag-people-abc” or “wp-tag-objects-xyz” to your images through your blog’s HTML editor.  ‘abc’ and ‘xyz’ must be unique strings of text to identify an image.  Simply use the ‘Tag People’ or ‘Tag Objects’ buttons found in the editor to easily insert these tags.</p>
<p>To tag people, click the ‘Tag People’ button.  This type of tag allows you to insert names of people and their website or blog URLs.  The URL field may be left empty.</p>
<p>If you wish to tag objects, click the ‘Tag Objects’ button.  This tag allows you to add only textual notes or descriptions.</p>
<p>Some samples:</p>
</p>
<p>If you have more than one image in your post, they must be assigned different classes:</p>
</p>
<p>Do not assign more than one class to an image, such as this:</p>
</p>
<p>Doing so will disable the tagging feature.</p>
<h4>Tagging the Images</h4>
<p>After writing your post, publish it or save it as draft.  View or preview the blog post.  You will notice that each of your images assigned with the required classes are loading tags.  To begin tagging, click the button with the plus (+) sign found below the image.</p>
<p>Click on the image.  Drag and resize the tag box to your desired location and size.  To save the tag, click on the button with the check mark to save it.</p>
<p>To edit or delete a tag, right-click on the tag to make the necessary changes.</p>
<h3>License</h3>
<p>This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation.</p>


WP Pic Tagger

Tag, caption, annotate pictures and images on your Wordpress blog.

setzer

<p>Side Matter turns footnotes into sidenotes, magically aligning each note in the sidebar next to its corresponding reference in the text. Unlike hyperlinked footnotes, sidenotes don’t require jumping down the page to follow up on each reference; instead, they perch humbly and accessibly beside the material to which they refer.</p>
<p>To use, place the Side Matter widget in your sidebar, then enclose sidenote text in a page or post using the <code>[ref]</code> shortcode, like so:</p>
<pre><code>Here's the text to annotate.[ref]Note text goes here.[/ref]
</code></pre>
<p>To change default settings, use the Side Matter options page linked under the Appearance menu on your admin screen.</p>
<h3>Styling Side Matter with CSS</h3>
<p>Changing the appearance of Side Matter elements—for example, editing your notes’ typeface or indentation—requires using CSS. The simplest way to go about this is to install a custom CSS plugin that will preserve your rules even when Side Matter or your theme is updated. (<a href="https://wordpress.org/plugins/simple-custom-css/" rel="ugc">Simple Custom CSS</a> is a good example.)</p>
<p>Side Matter comes with a set of built-in class selectors. As an example, all sidenote and reference elements may be styled at once using the class <code>side-matter</code>. The following CSS will render all Side Matter elements in blue serif text:</p>
<pre><code>.side-matter {
    color: blue;
    font-family: serif;
}
</code></pre>
<p>Notes and figures may be formatted with greater precision using element-specific class selectors. For example, the following CSS will render reference and list numerals in green and sidenote text in black:</p>
<pre><code>a.side-matter-ref, ol.side-matter-list {
    color: green;
}

div.side-matter-text {
    color: black;
}
</code></pre>
<h4>List of Class Selectors</h4>
<p>Here is a full list of Side Matter class selectors and their uses:</p>
<ul>
<li><code>a.side-matter-ref</code> selects the link elements that enclose in-text reference numerals. Use this class to modify the links’ colors, underline, etc.</li>
<li><code>sup.side-matter-sup</code> selects the <code>sup</code> (superscript) elements that enclose in-text reference numerals. Use this class to modify the numerals’ typographic properties, such as size, offset, and font.</li>
<li><code>.widget_side_matter</code> (note the underscores) selects the widget container element, which may be an <code>aside</code> or a <code>div</code>.</li>
<li><code>ol.side-matter-list</code> selects the <code>ol</code> (ordered list) element that encloses notes in the sidebar, including list numerals.</li>
<li><code>li.side-matter-note</code> selects sidenote <code>li</code> (list item) elements, including each note’s numeral.</li>
<li><code>div.side-matter-text</code> selects the <code>div</code> elements that enclose sidenote text, but not sidenote list numerals. Use this to style sidenote text separately from numerals.</li>
</ul>
<p>Each paragraph within a note is further wrapped in a <code>p</code> tag. However, as they’re generated outside the plugin, these <code>p</code> elements cannot be selected directly using the <code>side-matter</code> class. Instead, select them indirectly, e.g. <code>div.side-matter-text > p</code>.</p>
<h4>Default CSS</h4>
<p>Side Matter sets a few rules by default in the included stylesheet <code>side-matter.css</code>. These rules will generally defer to your theme stylesheet in the event of a conflict.</p>
<p>The first rule removes underlines from reference numeral links:</p>
<pre><code>a.side-matter:link,
a.side-matter:visited,
a.side-matter:hover,
a.side-matter:active {
    text-decoration: none;
}
</code></pre>
<p>The second rule specifies a consistent cross-browser, cross-theme format for superscript figures:</p>
<pre><code>sup.side-matter-sup {
    position: relative;
    top: -0.5em;
    vertical-align: baseline;
    font-size: 0.75em;
    line-height: 0;
}
</code></pre>


Side Matter

Turns footnotes into sidenotes, magically aligning each note in the sidebar next to its corresponding reference in the text.

WP Pic Tagger vs Side Matter