[ASP] Trimmen op lengte i.p.v. aantal karakters - Softwareontwikkeling

maandag 28 februari 2005 22:41

Acties:

Topicstarter

Ik gebruik in ASP de volgende functie om een string te trimmen naar een bepaalde lengte van een kolom in een tabel.
Hierbij wil ik dus dat de breedte van de kolommen in de tabel blijven zoals gespecificeerd in de HTML code.

ASP:

1
2
3

If Len(groepsnaam) > 21 Then
 groepsnaam = "<div title=" & Chr(34) & groepsnaam & Chr(34) & ">" & Left(groepsnaam,20) & "..</div>"
End If

Echter neemt het ene karakter meer ruimte in dan de andere, waardoor de ene string toch nog 2 regels nodig heeft i.p.v. maximaal 1. Heb de search al gebruik, en wellicht is dit een moeilijke materie maar is er geen mogelijkheid van te voren te berekenen hoe lang een string word in pixels en naar aanleiding daarvan te trimmen ofzo?

Bovenstaande code checkt dus hoeveel karakters een bepaalde string is, is deze langer dan opgegeven word hij 1 karakter eerder afgebroken en word er ".." aan toegevoegd, als je op de tekst blijft staan verschijnt de hele string in een alt text.

En ik wil geen gebruik maken van <PRE> tags.

Zoals hier: [rml]Nikel in "[ PHP] string afkappen op bepaalde lengte"[/rml] alleen is dit voor PHP

[ Voor 19% gewijzigd door Urk op 28-02-2005 22:47 ]

maandag 28 februari 2005 22:48

Acties:

DRAFTER86

Je kunt natuurlijk een array'tje maken met de breedte van elk karakter in pixels. Maar iedereen kan in z'n browser het lettertype groter maken. En aangezien ASP serverside is kun je daar vrij weinig aan doen.

maandag 28 februari 2005 22:51

Acties:

Urk

Topicstarter

DRAFTER86 schreef op maandag 28 februari 2005 @ 22:48:
Je kunt natuurlijk een array'tje maken met de breedte van elk karakter in pixels. Maar iedereen kan in z'n browser het lettertype groter maken. En aangezien ASP serverside is kun je daar vrij weinig aan doen.

Tja, dat zou een optie zijn inderdaad. Echter krijg je dan lijkt me een heel uitgebreide functie die redelijk lang zal duren om uit te voeren denk ik.
Tevens wat je zelf al zegt is het niet waterdicht. Font size en weight speelt daarbij natuurlijk ook een rol.
Zijn er nog andere manieren? $_/-\o_$

maandag 28 februari 2005 22:53

Acties:

André

Analytics dude

Om de breedte van karakters te bekijken:

code:

<html>
  <head>
    <title>Test</title>
    <style>
      * {
       font-size: 13px;
       font-family: Arial;
      }

      #test {
        padding: 0;
        margin: 0;
        display: inline;
        visibility: hidden;
      }
    </style>
    <script type="text/javascript">
      alfabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789~!@#$%^*()_+;:'\"\/.,\\";
      
      function doe()
      {
        resultdiv = document.getElementById("results");
        testdiv = document.getElementById("test");

        for (var i = 0; i < alfabet.length; i++)
        {
          testdiv.innerHTML = alfabet.substr(i, 1);
          
          resultdiv.appendChild(document.createTextNode(alfabet.substr(i, 1) + ": " + testdiv.offsetWidth));
          resultdiv.appendChild(document.createElement("br"));
        }
      }
    </script>
 </head>
  <body onload="doe()">

    <div id="test"></div>
    
    <div id="results"></div>

  </body>
</html>

maandag 28 februari 2005 23:08

Acties:

R4NCOR

eigenlijk gewoon Niels

je kan ook een fixed size font nemen, Fixedsys bijvoorbeeld. Maar dan moet het wel in je design / idee passen.

DRAFTER86 schreef op maandag 28 februari 2005 @ 22:48:
Je kunt natuurlijk een array'tje maken met de breedte van elk karakter in pixels. Maar iedereen kan in z'n browser het lettertype groter maken. En aangezien ASP serverside is kun je daar vrij weinig aan doen.

Op zich valt dit op te lossen door een stylesheet te gebruiken en daarin de font een vaste grootte in pixels te geven? Dat is dan wel client-side, maar ik ga er toch van uit dat je ASP-script iets dergelijks uitpoept

maandag 28 februari 2005 23:14

Acties:

Urk

Topicstarter

R4NCOR schreef op maandag 28 februari 2005 @ 23:08:
je kan ook een fixed size font nemen, Fixedsys bijvoorbeeld. Maar dan moet het wel in je design / idee passen.
[...]

Nee, daar wil ik geen gebruik van maken! Ik gebruik in de applicatie het Verdana font op 8pt.

R4NCOR schreef op maandag 28 februari 2005 @ 23:08:
Op zich valt dit op te lossen door een stylesheet te gebruiken en daarin de font een vaste grootte in pixels te geven? Dat is dan wel client-side, maar ik ga er toch van uit dat je ASP-script iets dergelijks uitpoept

Dat heb ik nu al en viel me inderdaad op als ik in IE de textsize vergroot er niets gebeurd, dat is dus een probleem minder!

Ik ben nu bezig een array te maken van iedere letter en daarbijbehorend de pixelbreedte

maandag 28 februari 2005 23:30

Acties:

DRAFTER86

Urk schreef op maandag 28 februari 2005 @ 23:14:
[...]

Nee, daar wil ik geen gebruik van maken! Ik gebruik in de applicatie het Verdana font op 8pt.

[...]

Dat heb ik nu al en viel me inderdaad op als ik in IE de textsize vergroot er niets gebeurd, dat is dus een probleem minder!
Ik ben nu bezig een array te maken van iedere letter en daarbijbehorend de pixelbreedte

Natuurlijk is dat dmv CSS te omzeilen, de vraag is of je dat wil. Ik ken zat mensen die websites met een voor mij onmogelijke grootte (groter of kleiner) bekijken.

dinsdag 1 maart 2005 00:49

Acties:

Urk

Topicstarter

Ik heb nu de volgende ASP code geprogrammeerd:

ASP:

Function StringPixelLength(var, maxpixellength)
 pixellength = 0
 ReDim charlength(1,83)
  charlength(0,0) = "A"
  charlength(1,0) = 8
  charlength(0,1) = "B"
  charlength(1,1) = 8
  charlength(0,2) = "C"
  charlength(1,2) = 9
  charlength(0,3) = "D"
  charlength(1,3) = 9
  charlength(0,4) = "E"
  charlength(1,4) = 7
  charlength(0,5) = "F"
  charlength(1,5) = 6
  charlength(0,6) = "G"
  charlength(1,6) = 9
  charlength(0,7) = "H"
  charlength(1,7) = 8
  charlength(0,8) = "I"
  charlength(1,8) = 5
  charlength(0,9) = "J"
  charlength(1,9) = 5
  charlength(0,10) = "K"
  charlength(1,10) = 8
  charlength(0,11) = "L"
  charlength(1,11) = 6
  charlength(0,12) = "M"
  charlength(1,12) = 9
  charlength(0,13) = "N"
  charlength(1,13) = 8
  charlength(0,14) = "O"
  charlength(1,14) = 9
  charlength(0,15) = "P"
  charlength(1,15) = 7
  charlength(0,16) = "Q"
  charlength(1,16) = 9
  charlength(0,17) = "R"
  charlength(1,17) = 8
  charlength(0,18) = "S"
  charlength(1,18) = 8
  charlength(0,19) = "T"
  charlength(1,19) = 7
  charlength(0,20) = "U"
  charlength(1,20) = 8
  charlength(0,21) = "V"
  charlength(1,21) = 8
  charlength(0,22) = "W"
  charlength(1,22) = 11
  charlength(0,23) = "X"
  charlength(1,23) = 8
  charlength(0,24) = "Y"
  charlength(1,24) = 7
  charlength(0,25) = "Z"
  charlength(1,25) = 8
  charlength(0,26) = "a"
  charlength(1,26) = 7
  charlength(0,27) = "b"
  charlength(1,27) = 7
  charlength(0,28) = "c"
  charlength(1,28) = 6
  charlength(0,29) = "d"
  charlength(1,29) = 7
  charlength(0,30) = "e"
  charlength(1,30) = 7
  charlength(0,31) = "f"
  charlength(1,31) = 4
  charlength(0,32) = "g"
  charlength(1,32) = 7
  charlength(0,33) = "h"
  charlength(1,33) = 7
  charlength(0,34) = "i"
  charlength(1,34) = 3
  charlength(0,35) = "j"
  charlength(1,35) = 4
  charlength(0,36) = "k"
  charlength(1,36) = 7
  charlength(0,37) = "l"
  charlength(1,37) = 3
  charlength(0,38) = "m"
  charlength(1,38) = 11
  charlength(0,39) = "n"
  charlength(1,39) = 7
  charlength(0,40) = "o"
  charlength(1,40) = 7
  charlength(0,41) = "p"
  charlength(1,41) = 7
  charlength(0,42) = "q"
  charlength(1,42) = 7
  charlength(0,43) = "r"
  charlength(1,43) = 5
  charlength(0,44) = "s"
  charlength(1,44) = 6
  charlength(0,45) = "t"
  charlength(1,45) = 4
  charlength(0,46) = "u"
  charlength(1,46) = 7
  charlength(0,47) = "v"
  charlength(1,47) = 7
  charlength(0,48) = "w"
  charlength(1,48) = 9
  charlength(0,49) = "x"
  charlength(1,49) = 7
  charlength(0,50) = "y"
  charlength(1,50) = 7
  charlength(0,51) = "z"
  charlength(1,51) = 6
  charlength(0,52) = "0"
  charlength(1,52) = 7
  charlength(0,53) = "1"
  charlength(1,53) = 7
  charlength(0,54) = "2"
  charlength(1,54) = 7
  charlength(0,55) = "3"
  charlength(1,55) = 7
  charlength(0,56) = "4"
  charlength(1,56) = 7
  charlength(0,57) = "5"
  charlength(1,57) = 7
  charlength(0,58) = "6"
  charlength(1,58) = 7
  charlength(0,59) = "7"
  charlength(1,59) = 7
  charlength(0,60) = "8"
  charlength(1,60) = 7
  charlength(0,61) = "9"
  charlength(1,61) = 7
  charlength(0,62) = "~"
  charlength(1,62) = 9
  charlength(0,63) = "!"
  charlength(1,63) = 4
  charlength(0,64) = "@"
  charlength(1,64) = 10
  charlength(0,65) = "#"
  charlength(1,65) = 9
  charlength(0,66) = "$"
  charlength(1,66) = 7
  charlength(0,67) = "%"
  charlength(1,67) = 12
  charlength(0,68) = "^"
  charlength(1,68) = 9
  charlength(0,69) = "*"
  charlength(1,69) = 7
  charlength(0,70) = "("
  charlength(1,70) = 5
  charlength(0,71) = ")"
  charlength(1,71) = 5
  charlength(0,72) = "_"
  charlength(1,72) = 7
  charlength(0,73) = "+"
  charlength(1,73) = 9
  charlength(0,74) = ";"
  charlength(1,74) = 5
  charlength(0,75) = ":"
  charlength(1,75) = 5
  charlength(0,76) = "'"
  charlength(1,76) = 3
  charlength(0,77) = Chr(34)
  charlength(1,77) = 5
  charlength(0,78) = "/"
  charlength(1,78) = 5
  charlength(0,79) = "."
  charlength(1,79) = 4
  charlength(0,80) = ","
  charlength(1,80) = 4
  charlength(0,81) = "\"
  charlength(1,81) = 5
  charlength(0,82) = " "
  charlength(1,82) = 5
  charlength(0,83) = "="
  charlength(1,83) = 9
  'Loop through each character in the input string
  For i=1 To Len(var)
   For row = 0 To UBound(charlength, 2) AND pixellength =< maxpixellength
    If Mid(var,i,1) = charlength(0,row) Then
     'If character is found sum it with the specified pixelwidth from the array
     pixellength = pixellength + charlength(1,row)
    End If
    'If the total pixelwidth of the string is smaller that the allowed pixelwidth count the number of characters that are allowed
    If pixellength =< maxpixellength Then
     charstill = i-3
    Else
    End If
   Next
  Next
  If pixellength > maxpixellength Then
   StringPixelLength = "<div title=" & Chr(34) & var & Chr(34) & ">" & Left(var, charstill) & "..</div>"
  Else
   StringPixelLength = var
  End If
End Function

Deze code werkt na wat testen prima! Alleen heb ik het idee dat het nog wel wat efficienter kan! Als ik namelijk nu 5 records ophaal uit de database is de parsetijd ongeveer 0,7 seconden

(inclusief de rest van de code natuurlijk), echter zonder deze functie parst hij de pagina veel sneller, namelijk in 0,01 seconden. Dat scheelt dus al behoorlijk!
Dus: iemand suggesties/verbeteringen?

[ Voor 55% gewijzigd door Urk op 01-03-2005 00:51 ]

dinsdag 1 maart 2005 01:13

Acties:

NMe

Quia Ego Sic Dico.

Misschien dat een dictionary object uitkomst biedt? Overigens is ASP 3.0 voor zover ik weet ietwat langzaam met strings, dus mogelijk ga je het niet al teveel sneller krijgen.

[ Voor 3% gewijzigd door NMe op 01-03-2005 01:13 ]

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

dinsdag 1 maart 2005 01:22

Acties:

Urk

Topicstarter

Ja, daar ben ik ook al bang voor, dit zijn pas 5 records, als het er 20 zijn en de functie word per record meer dan 1 keer opgevraagd duurt het helemaal jaren.
Ik zal nu eens kijken naar het Dictionary object in m'n grote ASP boek

Toch heb ik ook het idee dat mijn bovenstaande code veel efficienter en sneller kan...

dinsdag 1 maart 2005 01:33

Acties:

Hermarcel

Tja, een paar optimalisaties zie ik wel (let op: ik weet niets van asp):

1. Het vullen van de tabel eenmalig doen (global variable)
2. De tabel 256 (0-255) elementen lang maken en ipv zoeken naar het juiste element, de ascii-waarde van je karakter gebruiken als index in de tabel. De tabel kan dan ook ééndimensionaal worden (het karakter zelf hoeft er niet meer in).
3. Elk karakter wat je nog kwijt kunt in een nieuwe string zetten (toevoegen) en ophouden als je je maximale pixelbreedte hebt bereikt ipv de hele bronstring aflopen.

dinsdag 1 maart 2005 02:44

Acties:

Urk

Topicstarter

-NMe- schreef op dinsdag 01 maart 2005 @ 01:13:
Misschien dat een dictionary object uitkomst biedt? [...]

Deze tip was erg nuttig! $_/-\o_$
Heb de code aangepast en gebruik gemaakt van het Dictionary object en is nu als volgt:

ASP:

Function StringPixelLength(var, maxpixellength)
 pixellength = 0
 Set objDictionary = CreateObject("Scripting.Dictionary")
 objDictionary.Add "A", 8
 objDictionary.Add "B", 8
 objDictionary.Add "C", 9
 objDictionary.Add "D", 9
 objDictionary.Add "E", 7
 objDictionary.Add "F", 6
 objDictionary.Add "G", 9
 objDictionary.Add "H", 8
 objDictionary.Add "I", 5
 objDictionary.Add "J", 5
 objDictionary.Add "K", 8
 objDictionary.Add "L", 6
 objDictionary.Add "M", 9
 objDictionary.Add "N", 8
 objDictionary.Add "O", 9
 objDictionary.Add "P", 7
 objDictionary.Add "Q", 9
 objDictionary.Add "R", 8
 objDictionary.Add "S", 8
 objDictionary.Add "T", 7
 objDictionary.Add "U", 8
 objDictionary.Add "V", 8
 objDictionary.Add "W", 11
 objDictionary.Add "X", 8
 objDictionary.Add "Y", 7
 objDictionary.Add "Z", 8
 objDictionary.Add "a", 7
 objDictionary.Add "b", 7
 objDictionary.Add "c", 6
 objDictionary.Add "d", 7
 objDictionary.Add "e", 7
 objDictionary.Add "f", 4
 objDictionary.Add "g", 7
 objDictionary.Add "h", 7
 objDictionary.Add "i", 3
 objDictionary.Add "j", 4
 objDictionary.Add "k", 7
 objDictionary.Add "l", 3
 objDictionary.Add "m", 11
 objDictionary.Add "n", 7
 objDictionary.Add "o", 7
 objDictionary.Add "p", 7
 objDictionary.Add "q", 7
 objDictionary.Add "r", 5
 objDictionary.Add "s", 6
 objDictionary.Add "t", 4
 objDictionary.Add "u", 7
 objDictionary.Add "v", 7
 objDictionary.Add "w", 9
 objDictionary.Add "x", 7
 objDictionary.Add "y", 7
 objDictionary.Add "z", 6
 objDictionary.Add "0", 7
 objDictionary.Add "1", 7
 objDictionary.Add "2", 7
 objDictionary.Add "3", 7
 objDictionary.Add "4", 7
 objDictionary.Add "5", 7
 objDictionary.Add "6", 7
 objDictionary.Add "7", 7
 objDictionary.Add "8", 7
 objDictionary.Add "9", 7
 objDictionary.Add "~", 9
 objDictionary.Add "!", 4
 objDictionary.Add "@", 10
 objDictionary.Add "#", 9
 objDictionary.Add "$", 7
 objDictionary.Add "%", 12
 objDictionary.Add "^", 9
 objDictionary.Add "*", 7
 objDictionary.Add "(", 5
 objDictionary.Add ")", 5
 objDictionary.Add "_", 7
 objDictionary.Add "+", 9
 objDictionary.Add ";", 5
 objDictionary.Add ":", 5
 objDictionary.Add "'", 3
 objDictionary.Add Chr(34), 5
 objDictionary.Add "/", 5
 objDictionary.Add ".", 4
 objDictionary.Add ",", 4
 objDictionary.Add "\", 5
 objDictionary.Add " ", 5
 objDictionary.Add "=", 9
 'Loop through each character in the input string
 For i=1 To Len(var)
  'If character is found sum it with the specified pixelwidth from the array
  pixellength = pixellength + objDictionary.Item(Mid(var,i,1))
  'If the total pixelwidth of the string is smaller that the allowed pixelwidth count the number of characters that are allowed
  If pixellength =< maxpixellength Then
   charstill = i-2
  End If
 Next
 If pixellength > maxpixellength Then
  StringPixelLength = "<div title=" & Chr(34) & var & Chr(34) & ">" & Left(var, charstill) & "..</div>"
 Else
  StringPixelLength = var
 End If
End Function

De parsetijd met bovenstaande code (ook op basis van 5 records) is nu nog maar ~0,07 seconden!
Met de array methode was het op basis van 5 records ~0,7 seconden!
Dat scheelt dus ruim 0,6 seconden!

Hij kan nu nog iets sneller, dat ga ik morgen doen, namelijk de Dictionary declaratie 1 keer uitvoeren en het object na gebruik weer netjes opruimen.

[ Voor 16% gewijzigd door Urk op 01-03-2005 02:45 ]

dinsdag 1 maart 2005 10:26

Acties:

crisp

Devver

Pixelated

Urk schreef op maandag 28 februari 2005 @ 23:14:
[...]

Nee, daar wil ik geen gebruik van maken! Ik gebruik in de applicatie het Verdana font op 8pt.

pt? Da's eigenlijk meer iets voor print. Je kan er niet vanuit gaan dat een fontsize in pt in elke browser onder elk OS dezelfde grootte heeft. Een fontsize in pixels geeft je al meer garantie, hoewel in sommige gevallen fonts onder linux nog wel eens breder kunnen uitvallen...

Intentionally left blank

dinsdag 1 maart 2005 10:28

Acties:

DukeMan

Er is ook een css style welke ervoor zorgt dat de tekst een bepaalde breedte krijgt (bv 100px) wordt de tekst langer wordt deze afgepakt met bv ...
De frontpage van tweakers werkt daar ook mee (linkermenu). Misschien is dat wat? Als iemand namelijk grote lettertype heeft geselecteerd binnen windows ga je met die pixel breedte in een array ook fout.

dinsdag 1 maart 2005 10:53

Acties:

sopsop

[v] [;,,;] [v]

Zoals al aangegeven: vul je dictionary object buiten je functie. Als je dat ding meerdere malen nodig hebt kun je daar nog flink wat tijd mee winnen.

dinsdag 1 maart 2005 11:19

Acties:

crisp

Devver

Pixelated

NTGiant schreef op dinsdag 01 maart 2005 @ 10:28:
Er is ook een css style welke ervoor zorgt dat de tekst een bepaalde breedte krijgt (bv 100px) wordt de tekst langer wordt deze afgepakt met bv ...
De frontpage van tweakers werkt daar ook mee (linkermenu). Misschien is dat wat? Als iemand namelijk grote lettertype heeft geselecteerd binnen windows ga je met die pixel breedte in een array ook fout.

Not true; de frontpage gebruikt ook een functie die op basis van teken-breedte afkapt.
Ik kan me ook niet zo snel een CSS property voor de geest halen die dat zou doen, laat staan supported zou zijn door een van de meestgebruikte browsers (van dat bedrijf uit Redmond).

Intentionally left blank

dinsdag 1 maart 2005 11:45

Acties:

SuperRembo

crisp schreef op dinsdag 01 maart 2005 @ 11:19:
[...]

Not true; de frontpage gebruikt ook een functie die op basis van teken-breedte afkapt.
Ik kan me ook niet zo snel een CSS property voor de geest halen die dat zou doen, laat staan supported zou zijn door een van de meestgebruikte browsers (van dat bedrijf uit Redmond).

Het is juist een CSS property van versie 6 van de browser van dat bedrijf uit Redmond.

Cascading Stylesheet:

1	text-overflow: ellipsis;

Een erg handige feature. Jammer dat het pas in CSS3 echt beschikbaar komt.

| Toen / Nu

dinsdag 1 maart 2005 11:57

Acties:

crisp

Devver

Pixelated

SuperRembo schreef op dinsdag 01 maart 2005 @ 11:45:
[...]

Het is juist een CSS property van versie 6 van de browser van dat bedrijf uit Redmond.
Cascading Stylesheet:
1
text-overflow: ellipsis;
Een erg handige feature. Jammer dat het pas in CSS3 echt beschikbaar komt.

A nice, die kon ik inderdaad nog niet. Maar evengoed dus op dit moment nog niet echt bruikbaar

Intentionally left blank

dinsdag 1 maart 2005 12:40

Acties:

Urk

Topicstarter

SuperRembo schreef op dinsdag 01 maart 2005 @ 11:45:
[...]

Het is juist een CSS property van versie 6 van de browser van dat bedrijf uit Redmond.
Cascading Stylesheet:
1
text-overflow: ellipsis;
Een erg handige feature. Jammer dat het pas in CSS3 echt beschikbaar komt.

Oef, gelukkig! Ik was al bang dat ik mijn functie voor niks had geschreven. Dus totdat CSS3 goed is ingeburgerd en goed word ondersteund het toch maar serverside doen.
Ik ga in ieder geval zoals ik al in mijn eerdere post al zei de dictionary declaratie buiten mijn functie zetten, en tevens eens kijken naar de font-size, dat ik dat beter in pixels zou kunnen doen, maare hoe kom ik erachter hoeveel pixels hetzelfde is als 8pt in Windows?

dinsdag 1 maart 2005 12:45

Acties:

crisp

Devver

Pixelated

Kijken en vergelijken:

verdana 8pt

verdana 10px

verdana 11px

verdana 12px

Intentionally left blank

dinsdag 1 maart 2005 12:57

Acties:

R4NCOR

eigenlijk gewoon Niels

Als optimalisatie is het wellicht een idee om de strings die je al door deze functie gehaald hebt te cachen? In een file of in een field in je table..