07. september 2010 - 18:41Der 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?
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.
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...
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');
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
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.
Fandt frem til løsningen. Spørgsmålstegnende (eller � 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
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å :)
Synes godt om
Ny brugerNybegynder
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.