Foros del Web » Programando para Internet » Javascript »

rotar horizontalmente texto e imágenes con javascript

Estas en el tema de rotar horizontalmente texto e imágenes con javascript en el foro de Javascript en Foros del Web. Hola gente tengo una duda (ya que con la hoja de estilo y el parametro FlipH no funca) (podria funcionar en versiones muuuuuuuuuuy viejas) Tengo ...
  #1 (permalink)  
Antiguo 21/01/2012, 13:09
Avatar de alette666  
Fecha de Ingreso: febrero-2010
Ubicación: En la luna
Mensajes: 277
Antigüedad: 14 años, 2 meses
Puntos: 5
Exclamación rotar horizontalmente texto e imágenes con javascript

Hola gente tengo una duda (ya que con la hoja de estilo y el parametro FlipH no funca) (podria funcionar en versiones muuuuuuuuuuy viejas)

Tengo el siguiente script rescatado de www.giratutexto.com.ar pero evidentemente no es la posicion que quiero.
Ejemplo:

Código:
Oracion original: "hola, mi nombre es alejandro"
que me aparesca en el texbox la visualizacion de esta manera:
Código:
Vista previa: "ordnajela se erbmon im ,aloh"
evidentemente con las letras apuntando en la otra dirección

PASANDO CODIGO:
se necesitan 3 archivos:
test.html
theSecret.js
validar.js


test.html
Código HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Gira tu Texto - Dale un estilo diferente y original a tus Textos</title>
	<link rel="stylesheet" type="text/css" href="http://www.escribealreves.com.mx/css/style.css">
<script type="text/javascript" src="theSecret.js"></script>
    <script type="text/javascript" src="validar.js"></script>
</head>
<body>
<div id="header"> <a href="http://www.GiraTuTexto.com.ar"><img 
src="index_files/logo.png" alt="Gira tu Texto" border="0" 
width="174" height="140"></a> 
  <h1>Gira tu Texto!</h1>
</div>	
<div id="page-wrap"> 
  <div id="main-content"> 
    <h2>Gira texto y dale un estilo diferente </h2>
    <hr>
    <p>¿Qué es GiraTuTexto.com.ar?</p>
    <p><strong>Gira 
      tu texto</strong> es un <strong>generador online</strong> que 
      te permite darle una rotación a los aburridos textos para que sorprendas 
      a tus amigos </p>
    <p>Te cambia la fuente del texto, rotando cada letra en 180 grados (no sólo 
      te lo invierte si no que lo puedes poner hacia atrás). Entonces podés <strong>copiar 
      y pegar el texto girado</strong> y ponerlo como tu nickname o en tus actualizaciones 
      de estado del Facebook. <br>
      <i>Definitivamente llamaras la atencion!</i><br>
      <br>
            <!-- si vas a piratear aqui esta la parte interesante -->
    </p>
    <div id="box"> 
      <form name="f" action="">
        <p>Escriba su mensaje de texto original:<br>
          <textarea style="background-color: rgb(216, 223, 234);" 
onkeyup="flip()" cols="57" rows="5" name="original"></textarea>
          <br>
          <input checked="checked" name="backwards" value="yes" 
onclick="flip()" type="checkbox">
          (Marque esta casilla para reflejar el texto girado.)</p>
        <p>Copy-paste el texto al revés:<br>
          <textarea style="background-color: rgb(216, 223, 234);" 
cols="57" rows="5" name="flipped"></textarea>
        </p>
      </form>
      <img src="index_files/box-foot.png" alt="" class="foo" 
width="561" height="13"></div>
    <!-- no te olvides de las partes importantes de arriba -->
    <br>
    <h3>¿Dónde puedes utilizar el texto de Gira tu Texto?</h3>
    <hr>
    <ul>
      <li>Usalo en tus actualizaciones de estatus o en tus post's del Facebook, 
        como aqui:</li>
    </ul>
    <img src="index_files/comentario.gif" alt="wall post del 
Facebook al revés" width="540" height="91">
    <ul>
      <li>Usa una palabra al revés <strong>como password ultra seguro!</strong>.</li>
      <li>Usa los textos en tu <strong>Nickname del Windows Live Messenger </strong>(MSN 
        Messenger)</li>
      <li>Postea texto boca abajo en <strong>Facebook, Twitter, blogs, foros, 
        MySpace, Netlog, Bebo, Hi5, <br>
        Yahoo! Messenger, Flickr, AIM, eBuddy, Meebo, Windows Live Messenger, 
        Google Talk</strong>, etc.</li>
    </ul>
  </div>

</div>
</body></html> 
theSecret.js
Código:
// JavaScript Document
function flip() {
   var result = flipString(document.f.original.value.toLowerCase());
  if (document.f.backwards.checked)
	  {
	  result = result.split("").reverse().join("");
	  }
   document.f.flipped.value = result;
  }
  
  function flipString(aString) {
   var last = aString.length - 1;
   //Thanks to Brook Monroe for the
   //suggestion to use Array.join
   var result = new Array(aString.length)
   for (var i = 0; i <= last; i++) {
var c = aString.charAt(i)
var r = flipTable[c]
result[last +i] = r != undefined ? r : c
}
   return result.join('')
  }
  
  var flipTable = {
  a : '\u0250',
  b : 'q',
  c : '\u0254',
  d : 'p',
  e : '\u01DD',
  f : '\u025F',
  g : '\u0183',
  h : '\u0265',
  i : '\u0131',
  j : '\u027E',
  k : '\u029E',
  l : '|',
  m : '\u026F',
  n : 'u',
  //ñ : '',
  r : '\u0279',
  t : '\u0287',
  v : '\u028C',
  w : '\u028D',
  y : '\u028E',
  '.' : '\u02D9',
  '[' : ']',
  '(' : ')',
  '{' : '}',
  '?' : '\u00BF',
  '!' : '\u00A1',
  "\'" : ',',
  '<' : '>',
  '_' : '\u203E',
  ';' : '\u061B',
  '\u203F' : '\u2040',
  '\u2045' : '\u2046',
  '\u2234' : '\u2235',
  '\r' : '\n'
  }
  
  for (i in flipTable) {
	flipTable[flipTable[i]] = i
}
validar.js
Código:
// JavaScript Document
function esCampoVacio(campo){
	if(campo.value=='') return false;
	else return true;	
}

function comprobarMail(m){
	arroba = m.indexOf('@');
	
	if(arroba==-1) return false;
	else if(m.indexOf('.', arroba)==-1) return false;
	else return true;	
}

function limpiar(txt){
	txt= txt.split('.').join('');
	txt= txt.split(' ').join('');
	txt= txt.split('-').join('');
	txt= txt.split('/').join('');
	txt= txt.split(',').join('');
	txt= txt.split('\n').join('');
	txt= txt.split('\r').join('');
	txt= txt.split('\t').join('');
	txt= txt.split('\\').join('');
	txt= txt.split('$').join('');
	return txt;
}

function gestionarError(campo, mensaje){
	alert(mensaje);
	campo.focus();
	campo.select();
}
Alguien me tiraria un cable????
__________________
Y Sócrates dijo...Solo sé que no sé nada.
Entiende la filosofía como una búsqueda colectiva basada en el diálogo.
  #2 (permalink)  
Antiguo 21/01/2012, 17:24
Avatar de madhatterdef  
Fecha de Ingreso: diciembre-2011
Ubicación: argentina
Mensajes: 213
Antigüedad: 12 años, 4 meses
Puntos: 59
Respuesta: rotar horizontalmente texto e imágenes con javascript

que tal así

Código:
<script language="JavaScript">
var message1="Escribe aquí el texto que quieras,... ¡APARECERÁ AL REVÉS!";
var message2="";
for (count=message1.length; count >= 0; count--)
message2+=message1.substring(count,count-1);
document.write (before,message2,after);
</script>
  #3 (permalink)  
Antiguo 21/01/2012, 21:25
Avatar de alette666  
Fecha de Ingreso: febrero-2010
Ubicación: En la luna
Mensajes: 277
Antigüedad: 14 años, 2 meses
Puntos: 5
Respuesta: rotar horizontalmente texto e imágenes con javascript

Cita:
Iniciado por madhatterdef Ver Mensaje
que tal así

Código:
<script language="JavaScript">
var message1="Escribe aquí el texto que quieras,... ¡APARECERÁ AL REVÉS!";
var message2="";
for (count=message1.length; count >= 0; count--)
message2+=message1.substring(count,count-1);
document.write (before,message2,after);
</script>
Pero en que o como llamo la función desde el textarea xq lo quiero tal cual esta en esa pagina (un textearea donde el usuario agrega su frase o texto, y en la otra hace la previsualizacion previa
__________________
Y Sócrates dijo...Solo sé que no sé nada.
Entiende la filosofía como una búsqueda colectiva basada en el diálogo.
  #4 (permalink)  
Antiguo 22/01/2012, 00:14
Avatar de madhatterdef  
Fecha de Ingreso: diciembre-2011
Ubicación: argentina
Mensajes: 213
Antigüedad: 12 años, 4 meses
Puntos: 59
Respuesta: rotar horizontalmente texto e imágenes con javascript

listo cambia el código del theSecret.js por este
Código:
function flip() {
   var result = flipString(document.f.original.value.toLowerCase());
       result = result.split("").reverse().join("");
      document.f.flipped.value = result;
  }
  
  function flipString(aString) {
   var last = aString.length - 1;
   var result = new Array(aString.length)
   for (var i = 0; i <= last; i++) {
var c = aString.charAt(i)
var r = flipTable[c]
result[last +i] = r != undefined ? r : c
}
   return result.join('')
  }
  
  var flipTable = {
  '&' : '&',
  }
  
  for (i in flipTable) {
    flipTable[flipTable[i]] = i
}
y el html por este
Código:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Gira tu Texto - Dale un estilo diferente y original a tus Textos</title>
    <link rel="stylesheet" type="text/css" href="http://www.escribealreves.com.mx/css/style.css">
<script type="text/javascript" src="thesecret.js"></script>
    <script type="text/javascript" src="validar.js"></script>
</head>
<body>
      <form name="f" action="">
        Escriba su mensaje de texto original:<br>
          <textarea style="background-color: rgb(216, 223, 234);" 
onkeyup="flip()" cols="57" rows="5" name="original"></textarea>
          <br>
        el texto al reves:<br>
          <textarea style="background-color: rgb(216, 223, 234);" 
cols="57" rows="5" name="flipped"></textarea>
      </form>
</body></html>
proba y decime

Última edición por madhatterdef; 22/01/2012 a las 00:21
  #5 (permalink)  
Antiguo 23/01/2012, 11:35
Avatar de alette666  
Fecha de Ingreso: febrero-2010
Ubicación: En la luna
Mensajes: 277
Antigüedad: 14 años, 2 meses
Puntos: 5
Respuesta: rotar horizontalmente texto e imágenes con javascript

Cita:
Iniciado por madhatterdef Ver Mensaje
listo cambia el código del theSecret.js por este
Es lo mismo que el anterior, me sale de esta forma
Código:
original: alejandro

previa: oɹpuɐɾǝ|ɐ
o sea lo unico que falta es que este como la previa, pero con las patas para abajo y mirando para la izquierda en vez de a la derecha
__________________
Y Sócrates dijo...Solo sé que no sé nada.
Entiende la filosofía como una búsqueda colectiva basada en el diálogo.
  #6 (permalink)  
Antiguo 23/01/2012, 16:41
Avatar de madhatterdef  
Fecha de Ingreso: diciembre-2011
Ubicación: argentina
Mensajes: 213
Antigüedad: 12 años, 4 meses
Puntos: 59
Respuesta: rotar horizontalmente texto e imágenes con javascript

que extraño a mí me sale

Cita:
ordnajela
dejame revisarlo

perdón por la tardanza
__________________
PD gracias por el karma
  #7 (permalink)  
Antiguo 23/01/2012, 16:58
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años
Puntos: 1485
Respuesta: rotar horizontalmente texto e imágenes con javascript

buenas...
@madhatterdef, no se tú pero del tema estoy entendiendo otra cosa. me parece a mi, lo que @alette666 quiere hacer no es una simple inversión de orden, sino una inversión en orientación visual, como en la siguiente imagen.

__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #8 (permalink)  
Antiguo 23/01/2012, 18:12
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 19 años, 10 meses
Puntos: 834
Respuesta: rotar horizontalmente texto e imágenes con javascript

Fijate si te sirve esto:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title>Documento sin título</title>
<
script type="text/javascript">
function 
voltear(id){
    var 
cnv=document.createElement('canvas'),
    
ctx=cnv.getContext('2d'),
    
img=document.getElementById(id),
    
w=img.offsetWidth,
    
h=img.offsetHeight;
    
cnv.width=w;
    
cnv.height=h;
    
ctx.translate(w,0);
    
ctx.scale(-1,1);
    
ctx.drawImage(img,0,0,w,h);
    
document.body.appendChild(cnv);
}
onload=function(){voltear('i')};
</script>

</head>

<body>
<img id="i" src="arwen.jpg" />
</body>
</html> 
Para texto canvas cuenta con el método fillText (investigando un poco podrás adaptar esto fácilmente para poder flipear el texto escrito en un campo de formulario):
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title>Documento sin título</title>
<
style>
*{ 
margin:0padding:0}
#resultados canvas{ margin:10px}
</style>
<
script type="text/javascript">
function 
voltear(id){
    if(
document.getElementById('oldvolteado'))
        
document.getElementById('resultados').removeChild(document.getElementById('oldvolteado'));
    var 
cnv=document.createElement('canvas'),
    
ctx=cnv.getContext('2d'),
    
img=document.getElementById(id),
    
w=img.offsetWidth,
    
h=img.offsetHeight;
    
cnv.id='oldvolteado'
    
cnv.width=w;
    
cnv.height=h;
    
ctx.translate(w,0);
    
ctx.scale(-1,1);
    
ctx.drawImage(img,0,0,w,h);
    
document.getElementById('resultados').appendChild(cnv);
}
function 
procesar(t){
    var 
test=document.createElement('span');
    
test.style.fontFamily='Arial';
    
test.style.fontSize='12px';
    
test.innerHTML=t;
    
document.body.appendChild(test);
    var 
w=test.offsetWidth;
    var 
h=test.offsetHeight;
    
document.body.removeChild(test);
    if(
document.getElementById('oldcanvas'))
        
document.getElementById('resultados').removeChild(document.getElementById('oldcanvas'));
    var 
cnv=document.createElement('canvas'),
    
ctx=cnv.getContext('2d');
    
cnv.width=w;
    
cnv.height=h;
    
ctx.fillStyle 'rgb(0,0,0)';
    
ctx.font '12px Arial';
    
    
cnv.id='oldcanvas';
    
    
ctx.fillText(t1,12);
    
ctx.textAlign="start";
    
document.getElementById('resultados').appendChild(cnv);
    
voltear('oldcanvas')
}
</script>

</head>

<body>
<form action="" method="get">
<input style="width:300px" name="txt" type="text" id="txt" /><input name="bt" type="button" id="bt" value="procesar" onclick="procesar(txt.value)" />
</form>
<div  id="resultados"></div>
</body>
</html> 

Última edición por Panino5001; 23/01/2012 a las 23:14
  #9 (permalink)  
Antiguo 24/01/2012, 00:55
Avatar de madhatterdef  
Fecha de Ingreso: diciembre-2011
Ubicación: argentina
Mensajes: 213
Antigüedad: 12 años, 4 meses
Puntos: 59
Respuesta: rotar horizontalmente texto e imágenes con javascript

Cita:
Iniciado por Panino5001 Ver Mensaje
Fijate si te sirve esto:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title>Documento sin título</title>
<
script type="text/javascript">
function 
voltear(id){
    var 
cnv=document.createElement('canvas'),
    
ctx=cnv.getContext('2d'),
    
img=document.getElementById(id),
    
w=img.offsetWidth,
    
h=img.offsetHeight;
    
cnv.width=w;
    
cnv.height=h;
    
ctx.translate(w,0);
    
ctx.scale(-1,1);
    
ctx.drawImage(img,0,0,w,h);
    
document.body.appendChild(cnv);
}
onload=function(){voltear('i')};
</script>

</head>

<body>
<img id="i" src="arwen.jpg" />
</body>
</html> 
Para texto canvas cuenta con el método fillText (investigando un poco podrás adaptar esto fácilmente para poder flipear el texto escrito en un campo de formulario):
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title>Documento sin título</title>
<
style>
*{ 
margin:0padding:0}
#resultados canvas{ margin:10px}
</style>
<
script type="text/javascript">
function 
voltear(id){
    if(
document.getElementById('oldvolteado'))
        
document.getElementById('resultados').removeChild(document.getElementById('oldvolteado'));
    var 
cnv=document.createElement('canvas'),
    
ctx=cnv.getContext('2d'),
    
img=document.getElementById(id),
    
w=img.offsetWidth,
    
h=img.offsetHeight;
    
cnv.id='oldvolteado'
    
cnv.width=w;
    
cnv.height=h;
    
ctx.translate(w,0);
    
ctx.scale(-1,1);
    
ctx.drawImage(img,0,0,w,h);
    
document.getElementById('resultados').appendChild(cnv);
}
function 
procesar(t){
    var 
test=document.createElement('span');
    
test.style.fontFamily='Arial';
    
test.style.fontSize='12px';
    
test.innerHTML=t;
    
document.body.appendChild(test);
    var 
w=test.offsetWidth;
    var 
h=test.offsetHeight;
    
document.body.removeChild(test);
    if(
document.getElementById('oldcanvas'))
        
document.getElementById('resultados').removeChild(document.getElementById('oldcanvas'));
    var 
cnv=document.createElement('canvas'),
    
ctx=cnv.getContext('2d');
    
cnv.width=w;
    
cnv.height=h;
    
ctx.fillStyle 'rgb(0,0,0)';
    
ctx.font '12px Arial';
    
    
cnv.id='oldcanvas';
    
    
ctx.fillText(t1,12);
    
ctx.textAlign="start";
    
document.getElementById('resultados').appendChild(cnv);
    
voltear('oldcanvas')
}
</script>

</head>

<body>
<form action="" method="get">
<input style="width:300px" name="txt" type="text" id="txt" /><input name="bt" type="button" id="bt" value="procesar" onclick="procesar(txt.value)" />
</form>
<div  id="resultados"></div>
</body>
</html> 
muy bueno no conocía ese método


así es automático (el de texto)


Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style>
*{ margin:0; padding:0}
#resultados canvas{ margin:10px}
</style>
<script type="text/javascript">
function voltear(id){
    if(document.getElementById('oldvolteado'))
        document.getElementById('resultados').removeChild(document.getElementById('oldvolteado'));
    var cnv=document.createElement('canvas'),
    ctx=cnv.getContext('2d'),
    img=document.getElementById(id),
    w=img.offsetWidth,
    h=img.offsetHeight;
    cnv.id='oldvolteado'
    cnv.width=w;
    cnv.height=h;
    ctx.translate(w,0);
    ctx.scale(-1,1);
    ctx.drawImage(img,0,0,w,h);
    document.getElementById('resultados').appendChild(cnv);
}
function procesar(t){
    var test=document.createElement('span');
    test.style.fontFamily='Arial';
    test.style.fontSize='12px';
    test.innerHTML=t;
    document.body.appendChild(test);
    var w=test.offsetWidth;
    var h=test.offsetHeight;
    document.body.removeChild(test);
    if(document.getElementById('oldcanvas'))
        document.getElementById('resultados').removeChild(document.getElementById('oldcanvas'));
    var cnv=document.createElement('canvas'),
    ctx=cnv.getContext('2d');
    cnv.width=w;
    cnv.height=h;
    ctx.fillStyle = 'rgb(0,0,0)';
    ctx.font = '12px Arial';
    
    cnv.id='oldcanvas';
    
    ctx.fillText(t, 1,12);
    ctx.textAlign="start";
    document.getElementById('resultados').appendChild(cnv);
    voltear('oldcanvas')
}
</script>

</head>

<body>
<form action="" method="get">
<input style="width:300px" type="text" id="txt" onkeyup="procesar(txt.value)" />
</form>
<div  id="resultados"></div>
</body>
</html>
el problema es que el resultado es un gráfico y no texto como quiere alette666 como solucionarías ese problema
__________________
PD gracias por el karma

Última edición por madhatterdef; 24/01/2012 a las 01:05
  #10 (permalink)  
Antiguo 24/01/2012, 12:30
Avatar de alette666  
Fecha de Ingreso: febrero-2010
Ubicación: En la luna
Mensajes: 277
Antigüedad: 14 años, 2 meses
Puntos: 5
Respuesta: rotar horizontalmente texto e imágenes con javascript

Cita:
Iniciado por Panino5001 Ver Mensaje
Fijate si te sirve esto:
La verdad es lo que estoy tratando de realizar es el metodo de madhatterdef (ordnajela), pero no se xq en mi pc (en localhost) me sale de otra manera
__________________
Y Sócrates dijo...Solo sé que no sé nada.
Entiende la filosofía como una búsqueda colectiva basada en el diálogo.
  #11 (permalink)  
Antiguo 24/01/2012, 12:35
Avatar de alette666  
Fecha de Ingreso: febrero-2010
Ubicación: En la luna
Mensajes: 277
Antigüedad: 14 años, 2 meses
Puntos: 5
Respuesta: rotar horizontalmente texto e imágenes con javascript

Cita:
Iniciado por zerokilled Ver Mensaje
buenas...
@madhatterdef, no se tú pero del tema estoy entendiendo otra cosa. me parece a mi, lo que @alette666 quiere hacer no es una simple inversión de orden, sino una inversión en orientación visual, como en la siguiente imagen.

ecole cual, asi de esa forma la necesito
__________________
Y Sócrates dijo...Solo sé que no sé nada.
Entiende la filosofía como una búsqueda colectiva basada en el diálogo.
  #12 (permalink)  
Antiguo 24/01/2012, 14:26
Avatar de madhatterdef  
Fecha de Ingreso: diciembre-2011
Ubicación: argentina
Mensajes: 213
Antigüedad: 12 años, 4 meses
Puntos: 59
Respuesta: rotar horizontalmente texto e imágenes con javascript

alette666

perdona pero ya me perdí quieres esto

Código:
Vista previa: "ordnajela se erbmon im ,aloh"
o esto

__________________
PD gracias por el karma
  #13 (permalink)  
Antiguo 24/01/2012, 22:14
Avatar de alette666  
Fecha de Ingreso: febrero-2010
Ubicación: En la luna
Mensajes: 277
Antigüedad: 14 años, 2 meses
Puntos: 5
Respuesta: rotar horizontalmente texto e imágenes con javascript

Cita:
Iniciado por madhatterdef Ver Mensaje
alette666

perdona pero ya me perdí quieres esto

Código:
Vista previa: "ordnajela se erbmon im ,aloh"
o esto

madhatterdef, tal cual lo explique, si leyeras te darías cuenta que pido lo que dice Panino5001 , ademas explique que quería así como dijiste "ordnajela se erbmon im ,aloh" pero con las letras apuntando a la izquierda (como en al imagen) de Panino5001 (tampoco dejo afuera el tuyo, xq ese es otra opción que quiero meterle al sistema (que ya lo tengo) solo me falta el de Panino5001 nada mas

(por responder y a verme ayudado van karma a los dos por buenas respuestas (ya dicho y lo hago ahora)
__________________
Y Sócrates dijo...Solo sé que no sé nada.
Entiende la filosofía como una búsqueda colectiva basada en el diálogo.
  #14 (permalink)  
Antiguo 24/01/2012, 22:44
Avatar de alette666  
Fecha de Ingreso: febrero-2010
Ubicación: En la luna
Mensajes: 277
Antigüedad: 14 años, 2 meses
Puntos: 5
Respuesta: rotar horizontalmente texto e imágenes con javascript

Cita:
Iniciado por Panino5001 Ver Mensaje
Fijate si te sirve esto
Hay un problema, panino, es que genera una imgane y lo que necesito es que el usuario pueda elegir el texto y copiarlo, xq es un sistema para que lo puedan copiar a sus cuentas de face, yahoo, MSN y demas, y siendo una imagen generada no me dejara copiar y pegar la frase generada, en donde debo cambiar para que sea copiable?? en que funcion debo cambiar
__________________
Y Sócrates dijo...Solo sé que no sé nada.
Entiende la filosofía como una búsqueda colectiva basada en el diálogo.
  #15 (permalink)  
Antiguo 24/01/2012, 23:22
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años
Puntos: 1485
Respuesta: rotar horizontalmente texto e imágenes con javascript

me temo que será complicado, sino imposible. desconozco si canvas tiene la posibilidad de renderizar una cadena como texto. y aunque fuera posible, creo que tampoco sería una solución a lo que buscas. esto porque el usuario final copiaría una serie de bytes y no la apariencia de la misma. fíjate en el código del script que inicialmente compartes, la técnica que utiliza consiste en caracteres normales de otros sistemas de escrituras. para que te hagas una idea a lo que me refiero, el siguiente ejemplo utiliza css3 para rotar un elemento en el eje de Y. debes usar chrome para ver el ejemplo; dada mi ignorancia en css3 desconozco las variantes para los demas navegadores.

Código:
<span style="display: inline-block; -webkit-transform: rotateY(-180deg);">copia y pega</span>
tendrías que buscar en unicode caracteres que se asemejen a la orientación que quieres lograr y luego hacer el mismo proceso como el script que muestras. a eso agregale que también depende mucho de la tipografia. algunas no tienen soporte completo para unicode, además de que cada una tiene su propio estilo visual. de modo que puede ser que para ti te funcione pero para otros no.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #16 (permalink)  
Antiguo 24/01/2012, 23:29
Avatar de alette666  
Fecha de Ingreso: febrero-2010
Ubicación: En la luna
Mensajes: 277
Antigüedad: 14 años, 2 meses
Puntos: 5
Respuesta: rotar horizontalmente texto e imágenes con javascript

Cita:
Iniciado por zerokilled Ver Mensaje
me temo que será complicado, sino imposible. desconozco si canvas tiene la posibilidad de renderizar una cadena como texto.
Me daré por vencido y dejare solo el de madhatterdef, hasta el momento solo le dejare ese, luego encontrare otra solución a esta que me faltaría; muchisimas gracias, y como les había prometido a madhatterdef y a panino, ya le fueron karma (ahora a nuestro amigo y colaborador zerokilled); muchísimas gracias por su valioso tiempo, hasta mañana.
__________________
Y Sócrates dijo...Solo sé que no sé nada.
Entiende la filosofía como una búsqueda colectiva basada en el diálogo.
  #17 (permalink)  
Antiguo 24/01/2012, 23:50
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 19 años, 10 meses
Puntos: 834
Respuesta: rotar horizontalmente texto e imágenes con javascript

Probá así:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title>Documento sin título</title>
<
style>
.
flip1{
        -
moz-transformscaleX(-1); /* Gecko */
        
-o-transformscaleX(-1); /* Operah */
        
-webkit-transformscaleX(-1); /* webkit */
        
transformscaleX(-1); /* standard */
        
filterFlipH/* IE 6/7/8 */
}
.
flip2{
    
directionrtl;
    
unicode-bidibidi-override;
}
</
style>
</
head>

<
body>
<
form action="" method="get"><input onkeyup="document.getElementById('uno').innerHTML=document.getElementById('dos').innerHTML=this.value" style="width:300px" name="" type="text" />
</
form>
<
div id="uno" class="flip1" style=" text-align:right"></div>
<
div id="dos" class="flip2" style=" text-align:left"></div>
</
body>
</
html
Podés elegir la clase css que más te guste :)
  #18 (permalink)  
Antiguo 25/01/2012, 00:02
Avatar de alette666  
Fecha de Ingreso: febrero-2010
Ubicación: En la luna
Mensajes: 277
Antigüedad: 14 años, 2 meses
Puntos: 5
Respuesta: rotar horizontalmente texto e imágenes con javascript

Cita:
Iniciado por Panino5001 Ver Mensaje
Podés elegir la clase css que más te guste :)
Panino5001 SABEEEEEEE! jejeje sisi lo demás me encargo yo, che ya te di karma pero no se si se me permitirá darte mas en un mismo post o en el mismo día me alegraste el cumple jejejeje
Bueno fue ayer (24/01/2012) jejeje hasta luego, me voy a dormir con una sonrisa de oreja a oreja jeje
__________________
Y Sócrates dijo...Solo sé que no sé nada.
Entiende la filosofía como una búsqueda colectiva basada en el diálogo.
  #19 (permalink)  
Antiguo 25/01/2012, 00:56
Avatar de madhatterdef  
Fecha de Ingreso: diciembre-2011
Ubicación: argentina
Mensajes: 213
Antigüedad: 12 años, 4 meses
Puntos: 59
Respuesta: rotar horizontalmente texto e imágenes con javascript

vaya

Panino5001 tu sí que sabes

me había esmerado mucho y ni así lo había conseguido
(bueno por algo eres moderador de js)

alette666


Cita:
¿Cómo doy karma?
Para dar karma, haz clic en el icono de karma en el mensaje pertinente. Esto te mostrará una pequeño formulario para completarlo con el tipo de karma y la razón para darla. Si el karma negativa no está habilitada, entonces no será mostrado el formulario. No puedes dar karma para el mismo tema dos veces.
__________________
PD gracias por el karma
  #20 (permalink)  
Antiguo 25/01/2012, 01:14
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 19 años, 10 meses
Puntos: 834
Respuesta: rotar horizontalmente texto e imágenes con javascript

Gracias, madhatterdef, sólo soy persistente en mis búsquedas en Google . Igualmente creo que alette666 terminará usando tu solución porque las mías no pueden compartirse en Facebook, ni en otros sitios que no admitan formateo de texto con css
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 09:53.