Foros del Web » Creando para Internet » HTML »

[SOLUCIONADO] Texto imposible de contener en una tabla

Estas en el tema de Texto imposible de contener en una tabla en el foro de HTML en Foros del Web. Hola. Estoy haciendo uso de una aplicación que permite utilizar html. Dicha aplicación es Anki. La aplicación permite crear mazos de tarjetas para estudiar y ...
  #1 (permalink)  
Antiguo 17/10/2017, 08:45
Avatar de Pip
Pip
 
Fecha de Ingreso: noviembre-2003
Ubicación: Málaga
Mensajes: 280
Antigüedad: 21 años
Puntos: 0
Texto imposible de contener en una tabla

Hola.

Estoy haciendo uso de una aplicación que permite utilizar html. Dicha aplicación es Anki. La aplicación permite crear mazos de tarjetas para estudiar y estas tarjetas pueden tener contenido html. El contenido de mis tarjetas es, directamente, texto de la propia RAE (www.rae.es) copiado, ya que la web permite mantener todo el formato. Es decir, que visualmente yo copio esto:



Sin embargo, el código html que se genera internamente es tan bestia que no me deja ni ponerlo aquí. Lo he subido a una web en un archivo txt, podéis verlo aquí http://ge.tt/2U7tswm2

No obstante, si vosotros mismos seleccionáis una definición breve de la RAE y la copiais a un editor online como este, veréis que os genera un chorizo descomunal.

El caso es que mi problema es que no consigo que este breve pero tan aparentemente complejo texto, pueda contenerse en una tabla o similar que haga que no haya que desplazarse hacia un lado cuando vemos la tarjeta en una pantalla pequeña como la de un móvil. No puedo meter el texto dentro de una tabla y constreñirlo, no responde a ello. Quería saber si a alguien se le puede ocurrir una idea de cómo llevarlo a cabo con éxit, ya que yo probé a meter el código del texto en una tabla con bordes visibles para comprobar lo que estaba pasando y el texto salía de la tabla como ignorándola.

En fin, lo veo muy complicado, ya que me imagino que las únicas soluciones pasarán por destruir el formato tan complejo que tiene ese texto, lo que pasa es que yo necesito que sea fiel al original.

Gracias por anticipado. Un saludo.
__________________
por Pip
  #2 (permalink)  
Antiguo 17/10/2017, 11:55
Avatar de haggenx  
Fecha de Ingreso: febrero-2007
Ubicación: México
Mensajes: 823
Antigüedad: 17 años, 9 meses
Puntos: 24
Respuesta: Texto imposible de contener en una tabla

¿y cuál es el código de tu tabla?
__________________
Mi blog informático http://marjuanm.blogspot.mx
Fanpage del blog https://www.facebook.com/pages/Mis-p...36397183215592
  #3 (permalink)  
Antiguo 17/10/2017, 14:15
Avatar de Pip
Pip
 
Fecha de Ingreso: noviembre-2003
Ubicación: Málaga
Mensajes: 280
Antigüedad: 21 años
Puntos: 0
Respuesta: Texto imposible de contener en una tabla

He probado varios. Por ejemplo, podría ser este:



El código está arriba a la izquierda y la vista previa está arriba a la derecha, ya que lo de abajo a la izquierda se corresponde con abajo a la derecha y lo de en medio es el estilo.

La palabra {{Anverso}} es equivalente al código que puse antes, contiene exactamente eso, y no se deja "dominar" por las etiquetas que la contienen. Si {{Anverso}} fuese algo tan simple como un texto plano, sí que me dejaría, por ejemplo con el texto "Así las cosas son más fáciles.":



En definitiva, hay algo en el tipo de código que usa la RAE que hace que sea muy difícil de manipularlo. El problema es que utiliza muchos estilos (y más cosas que ya no sabré porque me he quedado desfasado) para que, por ejemplo, cuando pasas el ratón por encima de una palabra técnica, te salga una etiqueta flotante que te dice el significado de esa acortación. Por ejemplo, donde pone "Med" pasas el ratón y en la etiqueta flotante te pone "Médico" o en "Cin" te pone "Cinegética", cosas así, además de que muchas palabras contienen enlaces a su página de la RAE con la definición. Sé que si le quitara todo el formato al texto, no tendría problemas, pero necesito mantenerlo y al mismo tiempo poder hacer que se adapte a una tabla o cualquier otra etiqueta que me permita que el usuario no tenga que desplazar una barra horizontal (o con el móvil usar el dedo para mover la pantalla) hacia un lado.

No sé si me he explicado. Ni menos aún si esto tiene solución.

Gracias nuevamente por el interés haggenx
__________________
por Pip
  #4 (permalink)  
Antiguo 17/10/2017, 15:20
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 8 meses
Puntos: 1826
Respuesta: Texto imposible de contener en una tabla

Cita:
<span class="n_acep" style="margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 0px;border-left-width: 0px;border-style: initial;border-color: initial;font-style: inherit;font-variant: inherit;font-weight: bold;font-stretch: inherit;font-size: inherit;line-height: inherit;font-family: inherit;vertical-align: baseline;letter-spacing: 0.015em">1.&nbsp;</span><abbr class="d" title="nombre masculino" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-top-color: initial; border-right-color: initial; border-left-color: initial; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; color: rgb(0, 112, 192); letter-spacing: 0.015em; cursor: pointer; ">m.</abbr>&nbsp;<abbr class="c" title="F�sica" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-top-color: initial; border-right-color: initial; border-left-color: initial; font-style: italic; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; color: rgb(0, 112, 192); letter-spacing: 0.015em; cursor: pointer; ">F�s.</abbr>&nbsp;<mark data-id="UOPJ9JT" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; background-color: white; color: inherit !important; letter-spacing: 0.015em; ">Proporci�n</mark>&nbsp;<mark style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; background-color: white; color: inherit !important; letter-spacing: 0.015em; cursor: pointer; ">existente</mark>&nbsp;<mark data-id="FkLKqOW|FkNx2AZ" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; background-color: white; color: inherit !important; letter-spacing: 0.015em; ">entre</mark>&nbsp;<mark data-id="ESraxkH|MiZ5vEt|NWnohQu" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; background-color: white; color: inherit !important; letter-spacing: 0.015em; ">la</mark>&nbsp;<mark style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; background-color: white; color: inherit !important; letter-spacing: 0.015em; cursor: pointer;
Ok el código es una estupidez y una muestra de cómo no se debe de hacer. Ese que pego es sólo la mitad.

¿Dónde está el problema?

No, no lo voy a revisar.

Lo que podrías hacer es buscar algun script php o JavaScript que haga strip attributes.

https://www.google.com.mx/search?q=s...tes+javascript

Un simple codigo como un position absolute ya salta por fuera de la tabla.

El problema es de que no sé si puedas extraer el contenido importante en realidad, y aaplicar otros estilos por tu cuenta.
  #5 (permalink)  
Antiguo 17/10/2017, 16:27
Avatar de Pip
Pip
 
Fecha de Ingreso: noviembre-2003
Ubicación: Málaga
Mensajes: 280
Antigüedad: 21 años
Puntos: 0
Respuesta: Texto imposible de contener en una tabla

Tengo que preguntarte porque mis conocimientos de html datan de hace más de 10 años (lo estudié pero mi vida profesional tomó otros derroteros) y no he entendido exactamente lo que me has querido decir como solución.

Que el código es aberrante y una basura, lo sé. El problema es que no lo creo yo ni puedo permitirme el depurarlo de ninguna manera que me consuma tiempo porque tengo que incluir aproximadamente 2000 tarjetas y requeriría hacer ese hipotético proceso por cada una. Necesito saber si existe una manera de ajustar el texto a un ancho menor que el de una ventana o si debido a lo complejo de cómo es el código es una causa perdida.

Por ejemplo:



Ahí se puede observar como la segunda línea, donde se ve el origen etimológico de la palabra, sí que "obedece" si lo limito a un ancho determinado. En la siguiente imagen le establezco un ancho menor y funciona:



Sobre lo que me has dicho de "un script php o JavaScript que haga strip attributes", como no lo entiendod el todo bien te pregunto, ¿Quieres decir que pudiera existir un código que anule los atributos de todo sin cargarse el estilo que es lo que realmente me importa mantener? Imagino que eso es algo parecido a lo que muestro en esta imagen (solamente que realizado por una aplicación externa), y el resultado no es satisfactorio:

Aquí se ve la opción


Y aquí que el resultado es que se carga todo el formato


Por eso temo que esto no tenga solución.
__________________
por Pip
  #6 (permalink)  
Antiguo 17/10/2017, 18:08
Avatar de Pip
Pip
 
Fecha de Ingreso: noviembre-2003
Ubicación: Málaga
Mensajes: 280
Antigüedad: 21 años
Puntos: 0
Respuesta: Texto imposible de contener en una tabla

Respondo para explicar cómo he podido solucionar (en realidad es poner un parche) mi problema.

Que el texto de la RAE que, por su formato extraño, estilos o código complejo e ineficiente, no reaccionara cuando lo colacaba por ejemplo en el interior de una tabla, he podido solucionarlo utilizando esta web, tan sólo dándole a "Clean". ¿Cuál es el problema? Que esa web sólamente me acepta código html. Es decir, he tenido que buscar una web donde pudiera pegar el texto que copio directamente de aquí y luego mostrar el html resultante para pegarlo en la primera web que he puesto, volver a pegar el html resultante y, entonces, pegar ese html en la aplicación Anki que estoy utilizando.

La parte buena es que funciona, la mala es que si he de hacer esto para cientos o miles de tarjetas, no he conseguido hacerlo de una manera mínimamente eficiente. Si a alguien se le ocurre alguna manera de, sin modificar el código (pero sí valdría añadiendo código por delante y detrás), conseguir que se adapte a una tabla o a una ventana en general, se lo agradezco mucho. Si sirve de ayuda, esto sería lo que la aplicación web que limpia el código CSS hace.

Esto sería antes (Todo este código es el resultado de copiar la línea de la RAE que puse antes que dice "1. m. Repertorio en forma de libro o en soporte electrónico en el que se recogen, según un orden determinado, las palabras o expresiones de una o más lenguas, o de una materia concreta, acompañadas de su definición, equivalencia o explicación." solo que sin ser texto plano, sino su código con estilos y demás)

Y esto después

Nuevamente recordar que lo subo en un archivo txt porque aquí no me deja escribir tantos caracteres (en total son más de 60.000). Sé que es ineficiente al máximo pero, no sabiendo otra solución, este trabajo de chinos es lo único que puede parchearme el problema.

Si alguien tiene alguna idea de cómo poder hacer que el código del "antes" obedezca a atributos tales como justificar o establecer un ancho determinado, se lo agradecería en el alma.

Dejo el tema concluido porque abrí un nuevo hilo donde explico más concisamente lo que sucede.
__________________
por Pip

Última edición por Pip; 17/10/2017 a las 21:04 Razón: Abrir nuevo hilo para enfocar mejor el problema
  #7 (permalink)  
Antiguo 18/10/2017, 09:41
Avatar de Pip
Pip
 
Fecha de Ingreso: noviembre-2003
Ubicación: Málaga
Mensajes: 280
Antigüedad: 21 años
Puntos: 0
Respuesta: Texto imposible de contener en una tabla

El tema acabó solucionándose aquí.
__________________
por Pip
  #8 (permalink)  
Antiguo 19/10/2017, 13:18
Avatar de haggenx  
Fecha de Ingreso: febrero-2007
Ubicación: México
Mensajes: 823
Antigüedad: 17 años, 9 meses
Puntos: 24
Respuesta: Texto imposible de contener en una tabla

está raro...
__________________
Mi blog informático http://marjuanm.blogspot.mx
Fanpage del blog https://www.facebook.com/pages/Mis-p...36397183215592

Etiquetas: imposible, tabla
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:17.