CSS中的修订栏？ [英] Revision bars in CSS?

问题描述

我有一个飞机技术文档的存储库，它们被转换为HTML
。由于决定使用基于表格的格式来确定
，因此标记现在非常难看。我想删除

表格中的所有内容，除了表格。令我难过的是，

文件需要显示右侧

边距的修订条以及自上一次以来已更改的数据/>
版本。当然，所做的是在

右边添加一个窄柱，并在必要时显示单元格边框。


有没有人知道如何通过完成同样的修订栏效果

用CSS而不是表格？虽然有时需要在特定行的实际表格的右边有

修订条，但在

中除了段落和列表项之外的元素。


我认为这可以通过Javascript完成，但是如果有一个仅限CSS的解决方案，我想看看

。

解决方案

Ga ****** @ gmail。 com 写道：

我有一个飞机技术文档库，可以转换为HTML。由于决定使用基于表格的格式，因此标记现在非常难看。我想删除
表中的所有内容，除了表格。令我难过的是，
文档需要在右边
边距中显示修订栏以及自上一个
版本以来已更改的数据。当然，所做的是在
右侧添加一个窄柱并在必要时显示单元格边框。

有没有人知道如何实现相同的修订条效果
我认为这可能是用Javascript完成，但是我想看看
是否有一个仅限CSS的解决方案。

这是一个很好的问题。我没有尝试过，但我想你可以为''insert'创建

a类，为''删除'创建一个类，不仅包括

为文本设置样式，但也在左侧或右侧显示图像，垂直条

边距。它显然不会比在表格中指定

边框更自动，但它应该可以工作。


Carolyn

-

Carolyn Marenger

Carolyn Marenger< ca **** @ marenger.com>写道：

这是一个很好的问题。我没有尝试过，但我想你可以创建一个插入类和一个删除类'


为什么？ ins和del元素就是为了这个目的而制作的。

不仅包括文本的
样式，还包括左侧或右侧的图像，垂直条
保证金。

或指定border-right：3px solid red;或者类似的？为什么

带图像呢？


Steve

-

我的理论appal你，我的异端邪说你愤怒，

我从不回信，你也不喜欢我的领带。 - 医生


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

Ga ******@gmail.com 写道：

让我难过的事情是
文件需要显示修改条右边
边距以及自上一个
版本以来已更改的数据。

如果我们仅限于标记_blocks_（你所描述的方法也意味着这种限制，这很容易。引入一个

类，比如chg，并将其用于任何更改的块，例如

< p class =" chg">更改段落。< ; / p>

或

< li class =" chg">更改了列表项< / li>


在CSS中，使用例如


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


或许还有一些正确的填充（以防止文字击中

边框）如


。 .chg {padding-right：0.3em;理论上，您可以使用< ins>和< del> HTML中的标记，但它们暗示了你需要

来对抗的表现特性（例如，链接不足）。此外，它们对于更改来说真是糟糕的标记，因为它们没有为正常的_changes_提供自然的方式（例如，一个段落

被另一个替换）。

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.

解决方案

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

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/>

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).

这篇关于CSS中的修订栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！