saber el ANCHO de cada caracter que recorremos.[Buenos días a tod@s]

el_javi · #1 (**permalink**) 03/11/2005, 03:03

Os propongo uno de mis nuevos retos / dudas

.

Necesitaría saber si alguien sabe (o existe la forma humana) de recorrer una palabra letra a letra, (para eso no hay problema) y saber el ANCHO de cada caracter que recorremos.

No me es util (para lo que estoy haciendo) coger el ancho de un SPAN donde esté el texto.... necesitaría recorrer letra a letra e ir sumando el ancho de cada CARACTER.

Si hay alguien que sepa como ayudarme, se lo agradecería.

Un saludo, y muchas gracias de antemano.

monoswim · #2 (**permalink**) 03/11/2005, 07:24

a que te referís con el anchod e cada caracter ? en pixeles ? en Kb ?

Saludos
PD: Es tu segundo mensaje, bienvenido a los foros
PD2: Intenta colocar en el título de los mensajes algo relacionado con el mismo...

tunait · #3 (**permalink**) 03/11/2005, 08:21

Er ... qué cosas más rara

¿tal vez metiendo cada letra en un span o div y midiendo el ancho?

...por cierto ¿y ese cambio de nick?

caricatos · #4 (**permalink**) 04/11/2005, 02:30

Hola:

Algo así:

Código:

<html>
	<head>
		<title>
			explorar texto
		</title>
		<script type="text/javascript">
			function explorar(){
				var explorador = document.getElementById("explorando").firstChild.nodeValue;
				temporal = document.createElement("span");
				letras = new Array(explorador.length);
				for (var i = 0, total = letras.length; i < total; i ++) {
					letras[i] = document.createElement("span");
					letras[i].appendChild(document.createTextNode(explorador.charAt(i)));
					temporal.appendChild(letras[i]);
				}
				document.body.appendChild(temporal);
				for (var i = 0, total = temporal.childNodes.length; i < total; i ++)
					document.getElementById("resultado").value +=
					explorador.charAt(i) + " = " + temporal.childNodes[i].offsetWidth + " px\n";
				document.body.removeChild(temporal);
			}
		</script>
	</head>
	<body >
		<div>
			<button onclick="explorar()">
				explorar
			</button>... 
			<span id="explorando"> este texto</span>
		</div>
		resultado: </br/>
		<textarea id="resultado" cols=30 rows=10>
		</textarea>
	</body>
</html>

Saludos

KarlanKas · #5 (**permalink**) 04/11/2005, 02:53

Gracias por el saludo, pero os lo ruego: Títulos descriptivos, por favoooor!!

furoya · #6 (**permalink**) 04/11/2005, 08:17

Hola todos :

Iba a escribir algo así y te me adelantaste, caricatos. Pero está muy bien, ya que siempre tus códigos están mejor escritos que los míos.

Igual comento lo que se me ocurrió, que era justamente la idea original de tunait (

Hola! ), usar un span y recorrer cada letra de la cadena metiéndolas de a una en ese span, midiendo y reemplazando.

Pero lo que más me detuvo fue que yo tampoco entiendo para que sirve y en qué circunstancias se usa.

Dime, el_javichu, ¿es para una estadística de tamaños de fuente?; ¿o lo vas a aplicar a un texto que ingresas en una cadena?; ¿ o lo tomas de algún elemento de la página ?

Los problemas para cada caso son varios. Desde que hay navegadores que falsean el tamaño real de la fuente ( como el Firefox que usa tamaño proporcional ) hasta que el texto puede tener formato, que el escript debería leer para duplicarlo en el span y, por supuesto, excluir las etiquetas.

Si después hay que calcular el ancho "final" del texto, puede haber errores por tabulaciones o saltos de línea o caracteres especiales como el "zero width join". Todo depende desde dónde lo estés leyendo. Si usas un pre la fuente es monospace, así que con medir una letra te alcanzaría para saber el tamaño de todas. aunque si usas algún caracter por encima del ANSI es posible que el navegador lo reemplace por el de otra fuente, y entonces sí tendrías que leer 2 anchos.

Lo que quiero decir es que yo también tengo mucha curiosidad.

saludos

furoya

virla · #7 (**permalink**) 04/11/2005, 08:57

el ancho de un caracter depende del tipo de letra, del tamaño si es mayuscula o minuscula y si es para saver el espacio que ocupa un texto dentro de una caja eso dependera tambien del tamaño del espacio que varia segun el par de letras (va) no es igual que (im) ya que para que el aspecto sea bueno la a debe entrar un poquito mas dentro de la v. no se si me explico, ni si lo sabian, ni si les interesa, pero creo que tiene que ver con todo esto.

el_javi · #8 (**permalink**) 05/11/2005, 05:27

Buenos días a tod@s.

No he tenido posibilidad de leer vuestros Post hasta hoy, pero ante todo.. GRACIAS por la dedicación y atención que prestais.

tunait: La verdad que no tengo ni idea de porque se me habia cambiado el nick.. porque que yo sepa, no tengo otro usuario

... asi que no tengo ni idea de porque fue....

La verdad que si, que hago cosas mu raras.... JEJEJEJEEJ

Es cierto que tampoco le he dado una explicación a lo que pregunto, por lo que no os puede ayudar mucho ... asi que empiezo a describiros la utilidad:

Tengo una tabla, la cual tuiene que mostrar un pequeño listado de enlaces.
Entonces, esa tabla, tiene un ancho FIJO (por ejemplo, 200px).

Si en esa celda, creando el listado de enlaces, meto un texto laaaaaaargo, si, la celda mide 200px, pero se me generan 2 o 3 líneas.

Entonces, quiero lanzar un enlace por línea, y si una de las líneas tiene muchos caracteres, cortarla, y mostrar "En un lugar de la mancha ...".

Osea, acortar las líneas a la anchura de la celda, y ponerla puntos suspensivo (...).

"PEROOOOOO": Agravante-> El texto de ese listado, es personalizable, por lo que depende del estilo de fuente (negrita o no, arial, verdana..., tamaño de fuente).. por lo que quiero generar un script, el cual me determine cuantos caracteres entran en una celda de X pixeles de ancho, segun la fuente que tenga.

No se si me he explicado bien o no

pero espero que podais ayudarme.

caricatos: Siempre sorprendiendo profesionalmente

. Me parece una buena salida lo que propones

, y lo entiendo perfectamente (llegué a planteármelo)... pero el problema es la sobrecarga que supone esto en la página.

Si fuera para una sola zona, local y concreta, me parece BRUTAL.... Pero, teniendo en cuenta que en mi pagina puede haber un minimo de 1 y maximo N elementos en los cuales tendría que hacer este cálculo.. creo que el crear objetos "span" dinamicamente, me supondrá una sobrecarga en el proceso de Load de la página, no crees?

Espero, que podais seguir aportandome ideas y ayudas, y asi, siga aprendiendo.

Muchas gracias a tod@s.

furoya · #9 (**permalink**) 06/11/2005, 08:00

Éso se hace generalmente por la cantidad de caracteres y no por el tamaño. Si lo vas a hacer en forma local (y no hay otra opción) tienes que recorrer los nombres de enlace letra por letra. O usar la manera que sugerí más arriba : que la fuente sea nada más de ancho fijo, entonces sí mides un solo caracter y lo usas como patrón. El problema -como expliqué- es que te ingresen algún caracter que no está en la fuente y el navegador lo muestre con otra, que va a tener seguramente otro tamaño; pero con validar que no te usen más que letras y números y algún otro signo, debe ser suficiente. La monospace más completa que encontré es Courier New.

Otras soluciones serían :

Meter los enlaces en un div con overflow hidden o scroll.
Meter en los enlaces un input text readonly con el texto como value, que se tendrá que activar con doble click o hacer foco con mouseover para poder desplazar el contenido con el teclado.
Usar nombres de enlace genéricos ( Link01 , Link02 , ...) y que el nombre real se vea en un tooltip.

Dejo aquí un tema parecido

Enlaces largos

Lo del cambio de nick ... Haz memoria si no te dejaste abierta la sesión en alguna máquina y un gracioso metió mano.

saludos

Cap.Buscapina · #10 (**permalink**) 06/11/2005, 09:38

Cita:

Iniciado por el_javi

Tengo una tabla, la cual tuiene que mostrar un pequeño listado de enlaces.
Entonces, esa tabla, tiene un ancho FIJO (por ejemplo, 200px).

Si en esa celda, creando el listado de enlaces, meto un texto laaaaaaargo, si, la celda mide 200px, pero se me generan 2 o 3 líneas.

Entonces, quiero lanzar un enlace por línea, y si una de las líneas tiene muchos caracteres, cortarla, y mostrar "En un lugar de la mancha ...".

Osea, acortar las líneas a la anchura de la celda, y ponerla puntos suspensivo (...).

"PEROOOOOO": Agravante-> El texto de ese listado, es personalizable, por lo que depende del estilo de fuente (negrita o no, arial, verdana..., tamaño de fuente).. por lo que quiero generar un script, el cual me determine cuantos caracteres entran en una celda de X pixeles de ancho, segun la fuente que tenga.

probalo a ver si te sirve:

Cita:

<html>
<head>
<script>
//*************************
var cuantos=30;
var letra="Courier New, Courier, mono";
var sz="12px";
// **********************

function lnk(){
lnk=document.getElementById('contenedor').getEleme ntsByTagName('a');
for (x=0;x<lnk.length;x++){
if(lnk[x].innerHTML.length>cuantos){
lnk[x].innerHTML=lnk[x].innerHTML.slice(0,cuantos-3)+"...";
}
lnk[x].style.fontFamily=letra;
lnk[x].style.fontSize=sz;
}
}

</script>

</head>

<body onLoad="lnk()">
<a href="www.forosdelweb.com" >www.forosdelweb.com</a>
<a href="www.forosdelweb.com/nombremuylargoooooooooooooooooooooo" >www.forosdelweb.com/nombremuylargoooooooooooooooooooooo</a>
<a href="www.forosdelweb.com/nombreextremadamentelargoooooooooooooooooooooooooo oo_ooooooo_ooo" >www.forosdelweb.com/nombreextremadamentelargoooooooooooooooooooooooooo oo_ooooooo_ooo</a>

<a href="www.forosdelweb.com/este_link_no_se_debe_acortar">www.forosdelweb.com/este_link_no_se_debe_acortar</a>
</body>
</html>

Suerte.
besitos para las chicas y para el resto un abrazo

el_javi · #11 (**permalink**) 06/11/2005, 12:56

Hola a todos de nuevo.

Cap.Buscapina: Gracias por tu mensaje.

He de señalarte que cortar por una cantidad de caracteres (quiero quedarme con 10, con 100, con 30...) se hacerlo. Lo que yo buscaba, era recortar palabras en función de PIXELES que ocupan

.

He de darle la enhorabuena a nuestro fiel e incondicional caricatos, el cual nos sorprende constantemente con muy buenos script's.

He de decirte caricatos, que ya he probado, y aquello que te comenté respecto a la posible sobrecarga que produzca en el navegador ir creando objetos SPAN, e ir "atacheandolos" al documento... no es un grabamen, dado que tampoco son muy largas las listas que he de recorrer y recortar.

He de haceros mención, que todo lo que pregunto, es para el desarrollo de un componente en Javascript batante potente (a mi juicio), que en un plazo de 1 semana (mas o menos) lo sacaré a la luz, y lo compartiré con todos vosotros. (tunait... creo que me he retrasado.. te dije que estaría la semana pasada jejejejej Lo siento)

Ahora mismo lo tengo en versión BETA, pero no quiero sacar nunguna versión, porque no quiero que se "trafique" sin estar completo.

Os doy las gracias a todos, porque por vuestra participación, va a aumentando funcionalmente el Script.

Gracias y hasta mi proxima duda

caricatos · #12 (**permalink**) 06/11/2005, 13:10

Hola:

Me alegra de que te sirva... y también pensaba que solo ralentizaría la carga un número elevado de recortes...

Bueno, también hay que agradecer a tunait (¡Hola

!) porque dió la idea (no se me ocurriría otra mejor)

¡Je, je!... no siempre te he podido ayudar en el proyecto, pero por suerte hay un buen equipo que están pendientes de dar buenas respuestas a los problemas que se presentan (¡Enhorabuena a todos los foros

!)

Bueno, esperemos que termine bien, y nos lo puedas mostrar.

Saludos

Cap.Buscapina · #13 (**permalink**) 06/11/2005, 15:33

ya me parecía raro

que participando quienes participaron no se les hubiera occurrido esa solución.

saludos