造型与HTML和LT重叠文本注释; SPAN＆GT;标签和CSS [英] Styling overlapping annotations in text with HTML <SPAN> tags and CSS

问题描述

我想注释的文字与类别。每个categorie具有特定的颜色。另外，我想专注于重叠的附注的可视化。

注解和原子

文本（用户选择），这是注释的一部分，我称之为原子。

对于我来说有4种类型的原子也可以相互重叠，描述如下：

1. 的Lorem {[存有]}悲坐阿梅德，consetetur sadipscing elitr。 （身份）


2. {的Lorem [存有]悲}坐阿梅德，consetetur sadipscing elitr。 （包含）


3. 的Lorem {存有悲[坐阿梅德，} consetetur] sadipscing elitr。 （重叠）


4. Lorem存有悲坐阿梅德，[consetetur] {} sadipscing elitr。 （邻居）

我们假设只有2类带[]和B {}。 （但它的作品更多的太）

所有我看着重叠由背景颜色或不同的风格类型的工具（如强调A和背景颜色为B）。当使用背景颜色，重叠部分通常具有更暗，或混合色。

CSS和跨越

我的做法是为边框的原子。因此，每个原子被包裹在一个跨度标记。我有一些问题（3）重叠。当然，我把它弄坏了下来4 跨度 S：开始，结束和两个用于重叠部分

 ＆LT;跨度类=A外启动＆GT; IAM nonumy＆LT; / SPAN＆GT;＆LT;跨度类=A外端重叠＆GT;
    ＆LT;跨度类=B开始＆GT;
    eirmod
    ＆LT; / SPAN＆GT;
＆LT; / SPAN＆GT;＆LT;跨度类=B端＆GT; tempor＆LT; / SPAN＆GT;`
 

1. 行高需求增加，因为更多的原子注解和重叠。



2. 我如何加入使用相同的A类和B中的跨度？ （我试过填充，但它不工作。我也设法降低字间距，但它工作的重叠，但打破了正常的文本。）




3. 如何移动跨度 S使用的z-index ，我知道他们必须 inline-block的或块元素。如果他们是块，一个跨度超过一个以上的线S $ P $垫。

示例

这个例子显示了所有4种类型。你还可以看到与重叠的问题，我尝试使用字间距，也是在最后一个例子，紫原子应该是在顶部。

http://jsfiddle.net/Bb62u/289/

下面是字间距，我必须将它设置为-10加入部分的另一个例子。

http://jsfiddle.net/Bb62u/297/

解决方案

• 使用个/长度单位或的图像与垂直对齐 ，使行高流体


• 使用相对/绝对定位通吃跨度


• 使用空格：NOWRAP ，以避免在文本换行内联块或块元素

I want to annotate text with categories. Each categorie has a specific color. Also, I want to focus on the visualization of overlapping annotations.

Annotations and Atoms

The part of the text (user selection), which is annotated, I call atoms.

For me there are 4 types of atoms which can overlap, described as follows:

1. Lorem { [ ipsum ] } dolor sit amet, consetetur sadipscing elitr. (Identity)
2. { Lorem [ ipsum ] dolor } sit amet, consetetur sadipscing elitr. (Inclusion)
3. Lorem { ipsum dolor [ sit amet, } consetetur ] sadipscing elitr. (Overlap)
4. Lorem ipsum dolor sit amet, [ consetetur ] { sadipscing } elitr. (Neighbor)

We assume there are only 2 categories A with [ ] and B with { }. (but it works for more too)

All the tools I looked at overlap by background-color or different style types (like underlining A and background-color for B). When using background colors, the overlapping parts have usually a darker or a mixed color.

CSS and SPANs

My approach is to border the atoms. So each atom gets wrapped in a span tag. I have some problems with the (3.) overlap. Of course, I broke it down to 4 spans: start, end and two for the overlapping part.

<span class="A outer start">iam nonumy</span>

<span class="A outer end overlap">
    <span class="B start">
    eirmod
    </span>
</span>

<span class="B end">tempor</span>`

1. The line-height needs to increase as more atoms are annotated and overlapping.

2. How do I join the spans with the same class A and B ? (I tried padding, but it is not working. Also I tried to decrease the word-spacing, but it works for the overlaps but breaks the normal text.)

3. How do I move spans using z-index, I know they have to be inline-block or block elements. If they are block, a span is spread over more than one line.

Example

The example shows all 4 types. Also you can see the problem with the overlap and my attempt to use word-spacing, also in the last example, the purple atom should be at the top.

http://jsfiddle.net/Bb62u/289/

Here is another example with word-spacing, I have to set it to -10 to join the parts.

http://jsfiddle.net/Bb62u/297/

解决方案

• Use percentage/length units or images with vertical-align to make line-height fluid
• Use relative/absolute positioning to bookend the spans
• Use white-space:nowrap to avoid wrapping of text in inline-block or block elements

这篇关于造型与HTML和LT重叠文本注释; SPAN＆GT;标签和CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！