-1

I'm doing a parallel text with parallel paragraph highlighting. It's about halfway done, here: http://tinyurl.com/humecz2e

The problem is that it's very very tedious to manually edit the html so that each paragraph is flanked with incrementing numbers. For example:

<div class="indented numbered">
<label class="p2">
Those who have denied the reality of moral distinc&shy;tions, may be ranked among the disingenuous disputants; nor is it conceivable, that any human creature could ever seriously believe, that all characters and actions were alike entitled to the<span class="epagno"></span> affection and regard of everyone. The difference, which nature has placed between one man and another, is so wide, and this difference is still so much farther widened, by education, example, and habit, that, where the opposite extremes come at once under our apprehension, there is no scepticism so scrupulous, and scarce any assurance so determined, as absolutely to deny all distinction between them. Let a man&rsquo;s insensibility be ever so great, he must often be touched with the images of <strong>right</strong> and <strong>wrong</strong>; and let his prejudices be ever so obstinate, he must observe, that others are susceptible of like impressions. The only way, therefore, of converting an antagonist of this kind, is to leave him to himself. For, finding that nobody keeps up the controversy with him, it is probable he will, at last, of himself, from mere weariness, come over to the side of common sense and reason.
</label>
</div>

<div class="indented numberedlower"><div class="sbnumbered">
<label class="p3">
There has been a controversy started of late, much better worth examination, concerning the general foundation of <strong>morals</strong>; whether they be derived from <strong>reason</strong>, or from <strong>sentiment</strong>; whether we attain the knowledge of them by a chain of argument and induction, or by an immediate feeling and finer internal sense; whether, like all sound judgment of truth and falsehood, they should be the same to every rational intelligent being; or whether, like the perception of beauty and deformity, they be founded entirely on the particular fabric and constitution of the human species.
</label>
</div></div>

I'd like to do this automatically instead of manually, or perhaps some mix of automatic and manual. But I'm not sure how to do it. I have AutoHotKey, but I'm not sure if it's an ideal program to use, or even how to get it to increment numbers.

Any help would be appreciated. Thanks!

9
  • Are you looking for CSS Counters? Apr 24, 2012 at 2:50
  • Perhaps explain why you need to have incrementing numbers in the classes, that is what you want to achieve, and we could think of a way to do that without having to have incrementing class names at all. Apr 24, 2012 at 2:50
  • @Pumbaa80 No, I don't think so. The numbers need to be written into the html itself.
    – 97847658
    Apr 24, 2012 at 2:51
  • @MatthewLock Hi, I'm trying to get parallel paragraph highlighting, as per this earlier question.
    – 97847658
    Apr 24, 2012 at 2:52
  • 2
    Why not just have a table structure with a column for each language, and each corresponding paragraph from each language in a row so that they all line up? Like so abbyy.com/adx/aspx/adxGetMedia.aspx?DocID=3175 you could format it nicely like so neilfreeman.com/publications_parallel_ex_zoom.shtml Once the paragraphs are in a table it would be fairly easy to highlight the table row using hover() in jQuery for example. Apr 24, 2012 at 2:58

1 Answer 1

1

You'll want to use Javascript:

<script type="text/javascript">
    var elements = document.getElementsByTagName('label');
    for (var i in elements) {
        var elem = elements[i];
        elem.className += " p"+i;
    }
</script>

You might consider using unique IDs instead of unique classnames:

<script type="text/javascript">
    var elements = document.getElementsByTagName('label');
    for (var i in elements) {
        var elem = elements[i];
        elem.id = "p"+i;
    }
</script>

If you're just looking to style the labels differently, you could try using the nth-child CSS selector:

<style type="text/css">
    div label:nth-child(odd) {
        background-color: red;
    }

    div label:nth-child(even) {
        background-color: blue;
    }
</style>
2
  • I know little about Javascript, but I'm wondering whether it can be used to change the html itself, and whether it's consistent with the fact that the two languages don't always correspond in their paragraphing. Thanks!
    – 97847658
    Apr 24, 2012 at 3:10
  • Javascript is evaluated by the browser when the the page is rendered. So the classes won't be written to your .html files, however when the page is loaded the browser will execute the Javascript and dynamically write in the class values for the elements specified. Apr 24, 2012 at 3:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.