Revision bars in CSS?

[Galethog]

I have a repository of aircraft technical documents that are converted
to HTML. The markup is incredibly ugly now because of the decision to
use table-based formatting. I'd like to remove everything from the
tables except, well, tables. The thing that has me stumped is that the
documents are required to display revision bars in the right-hand
margin alongside the data that has been changed since the previous
version. Of course, what was done was to add a narrow column to the
right and display the cell borders where necessary.

Does anyone know of a way to accomplish this same revision bar effect
with CSS instead of tables? Although sometimes there will need to be
revision bars to the right of particular rows of actual tables, in
addition to elements like paragraphs and list items.

I think this could be accomplished with Javascript, but I'd like to see
if there's a CSS-only solution to begin with.

[Carolyn Marenger]

Ga******@gmail.com wrote:

I have a repository of aircraft technical documents that are converted
to HTML. The markup is incredibly ugly now because of the decision to
use table-based formatting. I'd like to remove everything from the
tables except, well, tables. The thing that has me stumped is that the
documents are required to display revision bars in the right-hand
margin alongside the data that has been changed since the previous
version. Of course, what was done was to add a narrow column to the
right and display the cell borders where necessary.

Does anyone know of a way to accomplish this same revision bar effect
with CSS instead of tables? Although sometimes there will need to be
revision bars to the right of particular rows of actual tables, in
addition to elements like paragraphs and list items.

I think this could be accomplished with Javascript, but I'd like to see
if there's a CSS-only solution to begin with.

That is a good question. I haven't tried it, but I imagine you could create
a class for 'insert' and a class for 'delete' and include not only the
styling for the text but also an image, vertical bar, in the left or right
margin. it obviously wouldn't be any more automatic than specifying a
border in a table, but it should work.

Carolyn
--
Carolyn Marenger

[Steve Pugh]

Carolyn Marenger <ca****@marenger.com> wrote:

That is a good question. I haven't tried it, but I imagine you could create
a class for 'insert' and a class for 'delete'
Why? The ins and del elements are made for exactly that purpose.
and include not only the
styling for the text but also an image, vertical bar, in the left or right
margin.

Or specify border-right: 3px solid red; or similar? Why much about
with images?

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Jukka K. Korpela]

Ga******@gmail.com wrote:

The thing that has me stumped is that the
documents are required to display revision bars in the right-hand
margin alongside the data that has been changed since the previous
version.

If we limit ourselves to marking _blocks_ that way (and the approach you
describe implies such a limitation, too), it's fairly easy. Introduce a
class, say "chg", and use it for any changed block, e.g.
<p class="chg">Changed paragraph.</p>
or
<li class="chg">Changed list item</li>

In CSS, use e.g.

..chg { border-right: solid medium green; }

perhaps together with some right padding (to prevent text from hitting
the border) like

..chg { padding-right: 0.3em; }

In theory, you could use <ins> and <del> markup in HTML, but they imply
presentational idiosyncrasies (e.g., underlinking) that you would need
to fight against. Besides, they are really crappy markup for changes,
since they give no natural way for normal _changes_ (a paragraph
replaced by another one, for example).

[Carolyn Marenger]

Steve Pugh wrote:

Carolyn Marenger <ca****@marenger.com> wrote:

That is a good question. I haven't tried it, but I imagine you could
create a class for 'insert' and a class for 'delete'

Why? The ins and del elements are made for exactly that purpose.

and include not only the
styling for the text but also an image, vertical bar, in the left or right
margin.

Or specify border-right: 3px solid red; or similar? Why much about
with images?

Steve

Steve,

Why much about images? Simple. I didn't think of it. Your idea is a much
more elegant solution however.

Carolyn
--
Carolyn Marenger

[Carolyn Marenger]

Jukka K. Korpela wrote:

Ga******@gmail.com wrote:

The thing that has me stumped is that the
documents are required to display revision bars in the right-hand
margin alongside the data that has been changed since the previous
version.

If we limit ourselves to marking _blocks_ that way (and the approach you
describe implies such a limitation, too), it's fairly easy. Introduce a
class, say "chg", and use it for any changed block, e.g.
<p class="chg">Changed paragraph.</p>
or
<li class="chg">Changed list item</li>

In CSS, use e.g.

.chg { border-right: solid medium green; }

perhaps together with some right padding (to prevent text from hitting
the border) like

.chg { padding-right: 0.3em; }

In theory, you could use <ins> and <del> markup in HTML, but they imply
presentational idiosyncrasies (e.g., underlinking) that you would need
to fight against. Besides, they are really crappy markup for changes,
since they give no natural way for normal _changes_ (a paragraph
replaced by another one, for example).

Your solution is more elegant than mine was. I will however point out that
in any document revision control system that I have worked with, a strike
through denotes deleted text and underline denotes inserted text. Changed
text is denoted by striking through that which has been deleted and
underlining that which has been inserted in its place.

That works fine for content, but how does it work with styling or graphics?
Underlining does not always mean inserted. How do you strike through a
graphic?

Carolyn
--
Carolyn Marenger

[Galethog]

The problem I have with displaying a right-hand border is that I have
to account for table rows. Sometimes, whole tables need a revision bar
- but most often, revision bars are required for only certain rows of a
table.

[Stan Brown]

Tue, 14 Mar 2006 15:00:42 -0500 from Carolyn Marenger
<ca****@marenger.com>:

I haven't tried it, but I imagine you could create
a class for 'insert' and a class for 'delete' and include not only the
styling for the text but also an image, vertical bar, in the left or right
margin.

I was thinking along similar lines, but border-left or border-right
rather than an image.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

[Jukka K. Korpela]

Carolyn Marenger <ca****@marenger.com> wrote:

in any document revision control system that I have worked with, a strike
through denotes deleted text and underline denotes inserted text.
That explains the common default rendering in browsers for <del> and <ins>,
but my point was that the default rendering is a problem. First, you cannot
be sure of overriding it; CSS is by definition optional suggestions only.
Second, there is no simple way to say in CSS that you wish to override
whatever defaults a browser has for some elements and then start setting up
your own styling for them. Instead, you need to set different properties
explicitly to neutral values, and there are many properties in CSS (and many
of them _could_ be used in default styling).
Changed
text is denoted by striking through that which has been deleted and
underlining that which has been inserted in its place.

Yes, but that's rather unnatural for indicating small changes and creates the
problem that the old text appears as deleted, instead of simple indication of
change.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Chris Beall]

Ga******@gmail.com wrote:

I have a repository of aircraft technical documents that are converted
to HTML. The markup is incredibly ugly now because of the decision to
use table-based formatting. I'd like to remove everything from the
tables except, well, tables. The thing that has me stumped is that the
documents are required to display revision bars in the right-hand
margin alongside the data that has been changed since the previous
version. Of course, what was done was to add a narrow column to the
right and display the cell borders where necessary.

Does anyone know of a way to accomplish this same revision bar effect
with CSS instead of tables? Although sometimes there will need to be
revision bars to the right of particular rows of actual tables, in
addition to elements like paragraphs and list items.

I think this could be accomplished with Javascript, but I'd like to see
if there's a CSS-only solution to begin with.

G,

The last example at http://www.w3.org/TR/CSS21/visuren.html#q28 might
give you a starting point. <span> brackets the changed text and the
marker is floated left (but could as well be right).

Chris Beall

[Galethog]

That was a very interesting and informative read. I'm not sure that it
takes me any closer, though. I've created a simplified example of the
problem here:

http://xnoubis.org/revbar.html

The revision bars are drawn vertically. I don't know in advance how
tall any of the revised rows will be. In a perfect world, I would be
able to style a TR element so that it drew a right border, say, 10
pixels to the right of its actual bounding box (sometimes in addition
to a regular right border, depending on the style of the table).