¿Cómo puedo distinguir entre segmentos de texto superpuestos usando HTML?

Question

Pregunta fácil, ¿es válido tener lazos superpuestos en html?

Ejemplo:

<span id="1">This is <span id="2"> some text </span> some other text </span> 
              ^     ^
              End1      End2 

Editar:

Ahora veo que los tramos de cierre del marcador serían ambiguas acerca de cuál se está cerrando, y que primero </span> cerraría span id = 2, no 1 como lo pretendí

Mi problema es que tengo un bloque de texto que estoy tratando de resaltar en función de lo que pasa el mouse. Este bloque de texto se compone de secciones, algunas de las cuales se "superponen" entre sí. Intento utilizar jQuery y HTML para presentar este documento, de modo que cuando coloque el cursor sobre las secciones, se resaltará el correspondiente.

Por lo tanto, en mi ejemplo anterior, el primer tramo debe terminar con la primera etiqueta de tramo cerrado, y el segundo tramo debe terminar con la segunda etiqueta de tramo cerrado. Esto se debe a la semántica de mi documento, estos son dos segmentos superpuestos.

Lo quiero así cuando me mueva hacia la izquierda, solo resaltará hasta span id = 1 y el primer lapso cercano, si me desplazo entre los dos tramos "superpuestos", los resaltará a ambos, y si me desplazo hacia la derecha, se resaltará desde el span id = 2 hasta el último lapso cercano.

Sin embargo, estoy empezando a pensar que esto no es posible. ¿Hay alguna manera de distinguir segmentos de texto en HTML que permitan la superposición? Así que mi script jQuery, que se destaca cuando pasé el cursor sobre diferentes tramos, resaltará las partes correctas.

¿Debo alternar entre div y tramos? ¿Eso desambiguaría lo que estoy cerrando entonces y me permitiría hacer el resaltado correcto con mi guión jQuery? Me pregunto sobre más de 2 segmentos que se superponen ahora. Suspiro, desearía poder explicar lo que estoy cerrando.

Answer 1

No hay etiquetas que se superpongan en HTML: deben estar anidadas correctamente. El HTML que ha publicado es válido, pero puede no ser semánticamente lo que está esperando. Un </span> terminará el <span> anterior en el mismo ámbito. No ha identificado qué <span> usted está esperando para ser cerrado con cada </span>

<span id="span1">This is <span id="span2"> some text </span> (ends span2) </span> (ends span1) 

Esto sin duda hará una gran diferencia en este caso:

<span>This is <span> some text </span> and more text </span> 

Answer 2

Sí, eso es legal. Puede hacer eso para especificar un estilo diferente para los tramos externo e interno (si tuviera que especificar una clase o estilo, etc.).

BTW - El término más común para esto es "anidar", no "superposición".

Answer 3

El contenido de un elemento SPAN puede contener cualquier elemento "en línea". SPAN es uno de estos elementos "en línea". Vea el DTD declaration for the SPAN element para más detalles.

Answer 4

Nº

Cuando golpeamos el primer cierre/lapso es ambiguo de los dos tramos de apertura que desea cerrar.

La mayoría de las personas, y una computadora, ya que es la única opción legal, concluirá que tiene la intención de cerrar el último lapso. Pero teniendo en cuenta el contexto adicional de su pregunta, sospecho que en realidad tenía la intención de cerrar el período anterior; que no es 'legal'.

La gente que te corrige con "quieres decir anidados, no superpuestos" está haciendo la misma deducción; no podría haber significado 'superposición' porque eso sería ilegal. Creo que de hecho significabas 'superposición', pero está bien, tu secreto está a salvo conmigo.

Answer 5

Esto es legal (foo es rojo; bar es azul; spam es de color rojo nuevo, ya que es anidada):

<span style="color: red">foo<span style="color: blue">bar</span>spam</span> 

Esto no es:

<div style="color: red">foo<span style="color: blue">bar</div>spam</span> 

pero puede ser digno de mención que en MediaWiki y algunos otros motores de desinfección en blogs, etc. es legal, ya que convierte lo anterior en esto:

<div style="color: red">foo<span style="color: blue">bar</span></div> 
<span style="color: blue">spam</span> 

Podría argumentarse que esto alienta el mal comportamiento, pero no todos los que escriben un blog son tan técnicos como las personas como nosotros que usan el desbordamiento de pila (publicando como wiki de la comunidad ya que esto probablemente será rechazado :-P)

Answer 6

Entiendo su problema, y ​​aparentemente no hay una solución elegante. Si solo te preocupa el resultado visual, una solución sería cerrar y volver a abrir las etiquetas correctamente. En lugar de:

<span id="1">This is <span id="2"> some text </span> some other text </span> 

usar algo como:

<span class="hl1">This is <span class="hl2"> some text </span></span><span class="hl2"> some other text </span> 

si se utiliza solo o propiedades de color de fondo para luminiscente (por ejemplo, utilizando el color RGBA, para permitir el resaltado múltiple), esto debería hacerlo. Si usa contorno/borde, no lo hará, ya que también tendrá bordes intermedios donde se cierran las etiquetas.

En mi humilde opinión, una etiqueta u otra estructura (lo veo más como un ancla), que permite la superposición e indica dónde se cierra sería algo a considerar para la implementación.

Answer 7

Lo sé, es demasiado tarde para responder a la pregunta. Pero, esto podría ayudar a alguien.

Sí! Es totalmente correcto que ninguna etiqueta puede solaparse en html. Tenía un escenario exacto, mencionado como en la pregunta anterior. ¡Pero, todo tiene una solución! ¡Podemos resolver este problema usando el control de versiones de etiquetas html!

El fragmento de HTML, que se menciona en el problema anterior puede ser romper como,

<span id="1_1">This is </span><span id="1_2"><span id="2_1"> some text </span></span><span id="2_2"> some other text </span> 

Ahora, hay que añadir unos manipuladores personalizados para sus cierne ratón. A través de las devoluciones de llamada del manejador, debe pasar el id del compás a JavaScript. En el controlador de JavaScript, debe conservar un mapa apropiado de parent id con child ids (por ejemplo, para la versión 1.x; {'1': ['1_1', '1_2', '1_3']}, etc.). Ahora, cada vez que desplace un mouse sobre cualquier tramo, podrá encontrar todos sus hermanos. ¡Aquí está el truco! Publica esto, solo necesitas agregar una clase CSS personalizada para todas las versiones. (Por ejemplo, si coloca el mouse sobre id 1_1, todas las versiones de 1_x se resaltarán).

Funcionó sin problemas para mí, para todos los casos extremos.