Avatar billede smeier Nybegynder
07. september 2010 - 18:41 Der er 6 kommentarer og
2 løsninger

inspiration til at dreje tekst 90grader.

Jeg forsøger at lave en div der viser tiden og datoen eller tekst på højkant.
Som http://www.kontrabande.com har i deres højreside.
Dette er dog lavet i flash og jeg vil meget gerne holde mig inden for css, html, php, javascript, jquery osv.

Har forsøgt med:
-webkit-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Men synes det er fuldstændigt umuligt at placere den drejede div korrekt på siden.

Nogen der kan komme med et råd eller lidt inspiration til hvordan jeg kan løse dette problem?

Mvh Troels
Avatar billede danco Nybegynder
07. september 2010 - 19:20 #1
Mig bekendt er det ikke muligt at dreje tekst uden at bruge en anden teknologi.
Dog kunne det muligvis lade sig gøre at printe teksten på et dynamisk billede og derefter rotere det som ønsket.
Avatar billede mbsnet Nybegynder
08. september 2010 - 07:52 #2
Gem eventuelt alle bogstaver og tal (roteret) i separate billeder, og sammensæt med igen html. Men normalt bør man bruge et server-komponent til at danne et enkelt resultat-billede...
Avatar billede smeier Nybegynder
08. september 2010 - 10:51 #3
Tak for ideer.
Tror jeg går mod at printe teksten på et dynamisk billede.
Har rettet følgende script til  så det passer til undertegnende:



<?php
  header("Content-type: image/jpeg");
  // option one 
  // create a 100*30 image
  $im = imagecreate(250, 77);
  // option two 
  // creating a image from jpeg 
  $im = @imagecreatefromjpeg("test.jpg") 
  or die("Cannot Initialize new GD image stream");

  // white background and blue text
  $bg = imagecolorallocate($im, 255, 255, 255);
  $textcolor = imagecolorallocate($im, 0, 0, 0);
 
  // write the string at the top left
  $skrivetekst = date('d.m.Y');
    $skrivetekst2 = date('H:i:s');

  imagestring($im, 5, 0, 0, $skrivetekst, $textcolor);
  imagestring($im, 5, 0, 20, $skrivetekst2, $textcolor);
$rotate = imagerotate($im, 90, 0);
  // output the image


// Output
imagejpeg($rotate);


  ImageDestroy ($rotate);
?>


Det virker også efter hensigten. På nær når jeg inkluderer denne fil i en anden fil.
Får en masse underlige tegn ud af det.
Går ud fra at det er et header problem. Jeg ik lige kan regne ud hvordan man løser.
Mvh TRoels
Avatar billede danco Nybegynder
08. september 2010 - 16:10 #4
Hvis du poster her hvilke "underlige tegn" du snakker om så har vi bedre mulighed for at hjælpe dig.
Avatar billede smeier Nybegynder
08. september 2010 - 18:16 #5
hehe god pointe.

Peger jeg direkte på php filen fungerer det perfekt.
Men inkluderer jeg den i en anden fil resultatet nendestående:

F&#65533;&#65533;>CREATOR: gd-jpeg v1.0 (using IJG JPEG v62), default quality &#65533;&#65533;C       $.' ",#(7),01444'9=82<.342&#65533;&#65533;C     2!!22222222222222222222222222222222222222222222222222&#65533;&#65533;&#65533;M"&#65533;&#65533;    &#65533;&#65533;&#65533;}!1AQa"q2&#65533;&#65533;&#65533;#B&#65533;&#65533;R&#65533;&#65533;$3br&#65533; %&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;    &#65533;&#65533;&#65533;w!1AQaq"2&#65533;B&#65533;&#65533;&#65533;&#65533;    #3R&#65533;br&#65533; $4&#65533;%&#65533;&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533; ?&#65533;&#65533;(&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533; (&#65533;&#65533;<&#65533;&#65533;W&#65533;&#65533;c&#65533;    W&#65533;&#65533;&#65533;&#65533;k&#65533;&&#65533;&#65533;?&#65533;&#65533;F&#991;&#65533;&#65533;&#65533;&#65533;&#65533;-6&#65533;&#65533;>&#65533;_&#65533;7&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;K&#65533;O&#65533;&#65533;&#65533;&#1715;&#65533;&#1011;&#65533;&#65533;&#65533;}&#65533;&#65533;&#65533;&#65533;v&#65533;&#65533;O&#65533;&#65533;_&#65533;$&#65533;V&#65533;&#65533;+k sß&#65533;V&#65533;&#65533;&#65533;&#809;&#65533;&#35772;&#65533;Y &#65533;Whs&#65533;&#65533;&#65533;@&#65533;Q@Q@Q@Q@_&#65533;&#65533;^o&#65533;&#65533;&#65533;o#&#65533;.&#65533;m&#65533;&#65533;&#65533;V&#65533;*&#65533;C&#65533;P#q$&#65533; &#65533;S'&#65533;F kZ&#65533;>%&#65533;<#&#65533;^G&#65533;&#65533;&#65533;[&#65533;&#65533;&#65533;"%&#65533;&#29223;E&#65533;9z&#65533;&#65533;&&#65533;&#65533; &#65533;%>&#65533;&#65533;&#1870;&#65533;&#65533;Q&#65533;7&#65533;&#65533;&#65533;&#65533; &#65533;uH&#65533;d;&#65533;g&#65533;&#65533;&#65533;&#65533;@&#65533;&#65533;lT&#65533;&#65533;&#65533;-&#65533;&#65533;&#65533;&#65533;V&#65533;;=2k{&#65533;&#65533;m&#65533;V\&#65533;$ &#65533;&#760;&#65533;y&#65533;&#65533;8    &#65533;&#65533;&#65533;5&#65533;O&#65533;&#65533;&#1694;&#65533;&#65533;&#65533;&#65533;a&#65533;&#65533;&#65533;&#65533;&#1911;~&#65533;-&#65533;88&#65533;1&#65533;&#65533;3q&#65533;&#65533;P7&#65533;m&#65533;4&#65533;&#65533;&#65533;&#65533;&#65533;&#1350;&#65533;y3&#65533;`;&#65533;,&#65533;&#65533;P&#28863;7&#65533;_&#65533;[&#65533;u&#65533;&#65533;&#65533;]&#65533;&#65533;O4&#1012;&#65533;&#65533;&#65533;&#65533;8&#65533;zW&#65533;&#65533;&#65533;4&#65533;'&#65533;&#65533;&#65533;&#65533;&#65533;=&#65533;Z&#65533;&#65533;&#65533;&#65533;}6wI&#65533;U&#65533; (<&#65533;*&#65533;&#65533;=CB&#65533;&#65533;&#65533;&#65533;=&#65533;j&#65533;O&#65533;&#65533;&#65533;H&#65533;|&#65533;&#1782;o@&#65533;s&#65533;&#65533;g&#65533; &#65533;&#1077;?&#65533;i&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;+&#65533;+v&#65533;&#65533;6&#65533;&#65533;g&#65533;p+B&#65533; (&#65533;&#65533; (&#65533;&#65533;2&#65533; &#65533;X&#65533;d&#65533;P&#65533;G&#65533;Km&#65533;b`s&#65533;&#65533;@&#65533;8&#65533;(#&#65533;-&#65533;|-g&#65533;*&#1012;Ao&#65533;k&#65533;>H&#65533;&#65533;p&#65533;&#65533;w2&#65533;a&#65533;&#65533;J&#65533;&#65533;&#65533;<9&#65533;&#65533;&#65533;&#65533;&#1949;&#65533;K r"&#65533;V&#65533;&#65533;.&#65533;&#65533;&#65533;oA&#65533;&#65533;7n\&#65533;T&#65533;&#65533;;J&#65533;&#65533;&#65533;&#65533; hR&#65533;&#65533;z&#65533;&#65533;&#65533;&#697;&#65533;&#65533;{A Qo&#65533;;1&#65533; &#65533;$&#65533;&#65533;C/&#65533;A^f&#65533;0&#65533;C&#65533;&#65533;&#65533;&#65533;?v&#65533;&#65533;&#65533;,.&#65533;F&#65533;&#65533;&#65533;&#65533;ZbpP&#65533;&#65533;&#65533;c &#65533;UA&#454;&#65533;&#65533;.|5&#65533;&#65533;&#65533;,r&#65533;"&#65533;&#1105;&#65533;&#65533;&#65533;s&#65533;F0A&#65533;A&#65533;5&#65533;T&#65533;*&#65533;C&#65533;&#65533;&#65533;&#65533;2&#65533;;k;t&#65533;I&#65533;G&#65533;$&#65533;&#65533;O$&#65533;NI&#65533;&#65533;QEQE&#65533;&#65533;&#65533;&#65533;&#65533;&#1831;&#65533;&#65533;^$&#65533;&#65533;&#15882;=:&#65533;&#65533;[&#65533;&#65533;P&#65533;&#65533;$*&#65533;sL&#65533;d&#65533;!&#688;98 &#65533;&#65533;&#65533;{}/R&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;ZF&#65533;&#65533;&#65533;&&#65533;&#388;/&#65533;2&#65533;&#65533;4&#65533;&#65533;FG&#65533; wn2x&#65533;E&#65533;&#65533;&#65533;.&#65533;&#65533;&#65533;&#65533;=^&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&.&#65533;<&#65533;&#65533;&#65533;&#65533;1?y28 d&#156395;&#65533;&#65533;]C&#65533;&#65533;&#1372;zE&#65533;&#65533;Z&#65533;e[&#65533;%]&#65533;x&#65533;w^$&#65533;&#65533;R>&#65533;`rI&#65533;Q&#65533;Ccs&#65533;_A&#65533;&#415;%&#65533;&#65533;td&#65533;b&#65533;&#65533;&#65533;&#65533;l&#65533;&#65533;ny&#65533;&#65533;x&#65533;Ee&#65533;&#65533;&#65533;&#65533;O&#65533;%O&#65533;&#65533;&#65533;&#941;&#65533; m&#65533;&#65533;m&#65533;&#1833;&#1574;?0&#65533;:o h&#65533;n&#65533;&#24056;&#65533;9&#65533;&#65533; I&#65533;]H&#65533;#&#65533;W&#65533;&#65533;&#65533; '&#65533;Ze&#65533;&#1205; &#65533;.&#65533;&#65533;xb3&#1705;&#65533;U&#65533;$,34e&#65533;    &#65533;.&#65533;6p&#65533;&#65533;=3I&#65533;&#65533;&#65533;F&#65533;&#65533;K1&#65533;>;x&#65533;&#65533;&#65533;&&#65533;10&#65533;;&#65533;&#65533;s&#65533;&#65533;&#65533;Q&#65533;6&#65533;&#65533;[&#65533;&#65533;0D&#65533;#&#65533;5 &#65533;&#65533;`&#65533;*J(&#65533;&#65533;(&#65533;&#65533;+&#65533;&#65533;&#65533;u&#1660;s&#65533;j&#65533;&#65533;&#2003;&#65533;Ai,Wo&#65533;&#65533;!?+g&#65533;9&#65533;08&#65533;&#65533;&#65533;&#65533;G&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;G&#65533;&#65533;&#65533;&#65533;&#65533;W&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;W&#65533;&#65533;g&#65533;&#65533;y&#65533;&#25543;&#65533;&#65533;&#65533;&#65533;&#65533;3&#65533;&#65533;&#65533;F&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;!-&#65533;&#65533;&#65533;&#65533;h&#65533;&#65533;y&#65533;>O&#65533;~&#65533;&#65533;&#766;&#65533;&#65533;V&#65533;F&#65533;}&#65533;|&#65533;6&#65533;OX,m~&#815;&#65533;I&#65533;?&#65533;&#65533;&#65533;r&#65533;&#65533;o&#65533;&#65533;E&#65533;A&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;#&#65533;&#65533;S&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;8&#65533;&#65533;z]&#65533;&#65533;-J&#65533;n&#65533;&#65533;&#65533;6.]&#1133;&#65533;&#65533;&#65533;dR&#65533;W&#65533;&#65533;&#65533;&#1794;    GZ&#65533;<+&#65533;&#65533;W&#65533;&#65533;&#65533;kQ&#65533;&#65533;&#1313;&#65533;,&#65533;X&#65533;&#65533;< &#65533;[ &#65533;&#65533;&#65533;&#65533;&#65533;&#1580;    &#65533;&#65533;&#65533;&#65533;G&#65533;&#65533;w&#65533;}&#65533;&#65533;>&#1119;3&#65533;&#65533;&#65533;v&#65533;&#65533;9&#65533;y&#65533;lPEPEP&#65533;&#65533;&#65533;R&#65533;&#65533;&#65533;&#65533;tK&#65533;Zxz&#65533;'&#65533;]f    &#65533;O$&#65533;&#65533;&#1737;Op7&#65533;?n&#65533;&#65533;'&#65533;&#65533;+&#65533;&#65533;&#65533;KD&#65533;&#1383;&#65533;&#65533;&#65533;"I"&#65533;g&#65533;J&#65533;&#65533;&#1845;&#65533;&#65533;q?~&#65533;&#65533;7m=&#65533;|m&#65533;&#65533;C&#65533;&#65533;&#1791;&#65533;&#65533;GG&#65533;/&#65533;$:&#65533;&#65533;D&#65533;&#65533;_&#65533;qo&#65533;\&#65533;gk&#65533;&#65533;w&#65533;&#65533;&#65533;&#65533;*&#65533;&#65533; &#65533;&#65533;&#65533;&#65533;5&#65533;z_&#65533;k6 {e&#65533;&#65533;F&#65533;&#65533;&#65533;&#65533;&#65533;Q0dr&#65533; &#65533;2&#65533;&#65533;J&#65533;&#65533;(&#65533;w&#65533;&#65533;&#65533;t;&#65533;&#65533;<&#747;&#65533;>&#65533;i&#65533;h&#65533;&#65533;R&#65533;&#65533;&#65533;OJ&#1570;&#65533;(&#65533;&#65533;(&#65533;&#65533;&#65533;&#65533;
Avatar billede danco Nybegynder
09. september 2010 - 16:39 #6
På de tegn der må jeg nok indrømme at jeg står af. Men det kunne umiddelbart lidt noget uni-code eller måske HEX.
Uden at jeg skal vide mig sikker på det.
Avatar billede smeier Nybegynder
09. september 2010 - 18:24 #7
Fandt frem til løsningen. Spørgsmålstegnende (eller &#65533; tegnende) er det binære output fra mit billede. Det kom fordi at jeg forsøgte enten forsøgte at sætte min kode direkte ind i en side med andet indhold, eller da jeg forsøgte at kalde min kode med <?php include ('img.php'); ?>
Løsningen var at inkludere det som et billede istedet for <img src="img.php">


Tusind tak for hjælpen i må meget gerne smide et svar da i alle fortjener point for at hjælpe mig på vejen.

Men endelige kode er da jeg besluttede at anvende en font plus:
Ligeledes anvender jeg imagerotate(); hvilket strengt taget ikke er nødvendigt da man i  imagettftext(); kan bestemme vinkel teksten skal skrives i.
For en god ordens skyld hvis nogen skulle støde på denne løsning i fremtiden så er det lavet i php og kræver vist gd installeret på serveren.


<?php
  header("Content-type: image/png");
  // option one 
  // create a 100*30 image
  $im = imagecreate(240, 77);
  // option two 
  // creating a image from jpeg 
  $im = @imagecreatefrompng("test.png") 
  or die("Cannot Initialize new GD image stream");

  // white background and blue text
  $bg = imagecolorallocate($im, 255, 255, 255);
  $textcolor = imagecolorallocate($im, 0, 0, 0);
    $textcolor2 = imagecolorallocate($im, 102, 102, 102);
 
//create the text
  $skrivetekst = date('d.m.Y');
    $skrivetekst2 = date('H:i:s');
$font = 'fine_festival_pro-webfont.ttf';
// write the string at the top left
// imagestring($im, 5, 10, 0, $skrivetekst, $textcolor);
// imagestring($im, 5, 10, 20, $skrivetekst2, $textcolor);
  imagettftext($im, 10, 0, 10, 15, $textcolor, $font, $skrivetekst);
  imagettftext($im, 10, 0, 10, 35, $textcolor2, $font, $skrivetekst2);
 
///Rotate the image
$rotate = imagerotate($im, 90, 0);
  // output the image


// Output
imagepng($rotate);


  ImageDestroy($rotate);
?>

Mvh Troels
Avatar billede danco Nybegynder
09. september 2010 - 19:13 #8
Argh, ja naturligvis, den havde jeg ikke lige tænkt over.
Men jeg er glad for at du fandt en løsning og det kom til at virke som det skulle.
Jeg smider et svar så :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester