Tengo elementos HTML <pre> que contienen 160 columnas por 62 filas de texto; capturas de pantalla del terminal, configuradas en una fuente monoespaciada. El texto está marcado por varios elementos <span> ; por ejemplo, para establecer el color del texto, el color de fondo, el grosor de la fuente, el subrayado; y también nombres de clase que encapsulan metadatos sobre el contenido, no necesariamente atributos de visualización. Los elementos <span> se pueden anidar en niveles arbitrarios.
Quiero una versión "recortada" de ese elemento <pre> original de 160x62; una selección rectangular del original, conservando el marcado <span> .
No quiero capturar la selección rectangular como una captura de pantalla de mapa de bits. Quiero mantener el contenido como HTML.
En un navegador web, quiero marcar con marquesina un área rectangular de texto en el elemento <pre> original de 160x62, y luego obtener un elemento <pre> que represente esa área de "recorte" (por ejemplo, 30x30; independientemente de las dimensiones de la selección podría ser).
El <pre> recortado debe conservar todo el formato, todos los elementos <span> "activos" de esa área en el <pre> original.
Para cada fila del área rectangular seleccionada, el software que crea el <pre> recortado debe reconocer qué elementos <span> están abiertos en el <pre> original en el borde izquierdo del área recortada e iniciar el conjunto apropiado de <span> elementos para reproducir ese "contexto".
Idealmente, existe un software para hacer esto que he pasado por alto, y la respuesta a esta pregunta es simplemente un enlace a ese software (por ejemplo, JavaScript en el navegador).
De lo contrario, ¿cuál es una buena técnica para realizar una selección rectangular de texto carácter por carácter en un elemento <pre> que se muestra en un navegador web, que proporciona las coordenadas de inicio y finalización (números de columna y fila) de la selección en el <pre> ?
He visto extensiones de navegador que resaltan una selección rectangular en un navegador web, pero ninguna que haga lo que he descrito aquí.
Me siento cómodo escribiendo JavaScript que explora el DOM. Dadas las coordenadas basadas en caracteres de una selección rectangular (números de fila y columna dentro del <pre> original), creo que podría escribir el código para crear el <pre> recortado, comenzando y terminando el <span> "activo"/antecedente necesario elementos en cada fila de la selección. Sin embargo, estoy menos seguro de cómo realizar la selección de marquesina carácter por carácter de los contenidos <pre> . Prefiero que me digan "Ya está hecho, aquí". Consejo bienvenido.
<pre> en un SVG <foreignObject> En caso de que esto sea útil para alguien más: he desarrollado una solución alternativa que logra una vista recortada sin recortar el marcado <pre> . No hay bibliotecas de código involucradas. Solo marca.
Reconozco que, estrictamente hablando, esta no es una respuesta directa a mi pregunta original. Pero logra el efecto que quiero.
La solución: incruste el elemento HTML <pre> en un elemento SVG <foreignObject> dentro de un elemento <svg> . Ajuste el viewBox SVG para mostrar solo el área que desea.
Elidí muchos detalles (por ejemplo, calcular los valores de viewBox en función de detalles como el número de filas y columnas y la relación de aspecto de la fuente), pero esa es la idea básica.