[CSS] Nowrap alinea meeschalen met grootte tabel cel - Softwareontwikkeling

woensdag 9 januari 2008 21:16

Acties:

Topicstarter

Voor een mededelingenscherm dat aan de muur opgehangen moet gaan worden probeer ik tekst in een cel van een tabel te plaatsen waarvan de font grootte automatisch meeveranderd. Dit zodat de tekst automatisch vergroot wordt om in de cel te passen, zonder dat regels gewrapped of afgekapt worden. Maar wel zodat de tekst zo groot mogelijk zodat het van een afstand nog te lezen is.

Typt een gebruiker bijvoorbeeld 2 regels met 1 hard return erin. Dan moet de font size aangepast worden zodat ieder van de regels zonder te wrappen nog net in de cel passen. En er in de uiteindelijke weergave enkel diezelfde hard return aanwezig is.

Voorbeelden:
Typt de gebruiker enkel de tekst

code:

AB

dan worden deze letters zover vergroot dat ze het hele scherm beslaan.
Typt de gebruiker de tekst

code:

1 2	Eeen heeeeeeeeeele lange zin die resulteerd in een klein lettertype 1234

Dan wordt de font-size kleiner dan bij het 1e voorbeeld zodat de eerste regel in zonder te wrappen in het vak past. De tekst 1234 vormt de 2e regel.

Het hele idee is dus nowrap maar zonder dat daar scrollbars bij komen kijken.

Is dit mogelijk met CSS/HTML of moet ik een andere oplossing gaan zoeken?

Ik heb al gezocht op GoT, w3schools en google maar ik kom er helaas niet uit.

woensdag 9 januari 2008 22:25

Acties:

Fuzzillogic

Cool

Dit kan niet puur met CSS/HTML. Je zult naar Javascript moeten kijken, of Flash. Houd wel rekening met de toegankelijkheid.

[ Voor 2% gewijzigd door Fuzzillogic op 09-01-2008 22:26 . Reden: Toegankelijkheid voor een display aan de muur, slaap verder Fuzzillogic :D ]

donderdag 10 januari 2008 12:27

Acties:

tonyisgaaf

Met Javascript bijvoorbeeld kun je net zo lang in een lus je lettergrootte kleiner/groter maken tot je scrollWidth en je offsetWidth of style.width gelijk zijn. Bij een mooie balans tussen stapgrootte en aantal iteraties is dit snel genoeg om niet opgemerkt te worden.
Dit uiteraard i.c.m. white-space: nowrap; in je CSS.

edit: Vergeet te zeggen, dan moet je natuurlijk wel de content in een div zetten met vaste width en bijv. overflow: hidden; (in goed Nederlands)

[ Voor 18% gewijzigd door tonyisgaaf op 10-01-2008 12:40 ]

NL Weerradar widget Euro Stocks widget Brandstofprijzen widget voor 's Dashboard

donderdag 10 januari 2008 21:34

Acties:

JasperE

Topicstarter

Thanks, het is opgelost.

Snel in elkaar gezet stukje script:

HTML:

<html>

<head>
    <script language="javascript">
        function isOversized()
        {
            var el = document.getElementById("text1");
            if ( el.offsetWidth < el.scrollWidth )
                return 1;
            else
                return 0;

        }
        function makeFit()
        {
            var el = document.getElementById("text1");

            if (isOversized())
            {
                while (isOversized())
                {
                    var curSize = el.currentStyle.fontSize.substring(0,el.currentStyle.fontSize.length-2);
                    if (curSize==1)
                        break;
                    el.style.fontSize=parseInt(curSize)-1;
                }
            }
            else
            {
                while (isOversized()==0)
                {

                    var curSize = el.currentStyle.fontSize.substring(0,el.currentStyle.fontSize.length-2);
                    el.style.fontSize=parseInt(curSize)+1;
                }
                el.style.fontSize=parseInt(curSize)-1;
            }

        }
    </script>
    <style>
    .textstyle {
        white-space: nowrap;
        overflow: hidden;
        font-size: 400px;
        border:1px solid #000000;
        width: 150px;
    
    }
    </style>
</head>

<body>
<div id="text1" class="textstyle">Lorem ipsum dolor bla bla?</div>
<input type="button" value="makeFit" onclick="makeFit()" />
</body>

</html>

(Nog niet Firefox compatible vanwege gebruik attribute "currentStyle")