Sivard.nl
Van idee naar online oplossing
Sivard.nl
Van idee naar online oplossing
Sivard.nl
Van idee naar online oplossing
Sivard.nl
Van idee naar online oplossing

Stijltips van geldbedragen op je website

Dit artikel is een verzameling van allerlei handige programmeertips over hoe je snel en netjes geldbedragen op een website kunt tonen.

Problemen die je als programmeur vaak tegenkomt:

  • het tonen van het correcte formaat van geldbedragen. Hoe krijg je altijd hetzelfde formaat te zien.
  • bedragen die niet rechts zijn uitgelijnd waardoor de bedragen er slordig uitzien op de website.
  • het valuta teken wordt niet goed weergegeven omdat er een verkeerde encoding is gebruikt.

Formaat van geldbedrag

Wil je het bedrag in PHP formateren gebruik de functie “number_format“. Zie http://php.net/manual/en/function.number-format.php. Bijvoorbeeld wil je het geldbedrag altijd met 2 cijfers achter de komma tonen dat ziet het er zo uit:

number_format($price, 2, ',', '')

Wil je het bedrag in javascript formateren gebruik dan de functie “Intl.NumberFormat“. Zie https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat. Een bedrag in Nederland ziet er dan zo uit:

var number = 123456.789;  // request a currency format  console.log(new Intl.NumberFormat('nl-NL', {style: 'currency', currency: 'EUR'}).format(number));

Het euro teken

Vaak zit het euro teken verborgen op je toetsenbord of komt het slecht uit te zien op je scherm. Mogelijke combinaties om een euro teken te laten zien:

  • De combinatie <CTRL><ALT> 4 op je toetsenbord
  • &euro;
  • &#8364;
  • &#x20AC;

Meer hierover zie http://www.w3schools.com/charsets/ref_utf_currency.asp.

Stijltips

Tot slot wil het bedrag stijling in CSS met een bedrag rechts uitgelijnd en het valuta teken ervoor dan kan dit bijvoorbeeld als volgt:

bedrag 1123,45
bedrag 246,23
table.geldtabel td.geld{      text-align: right;      position: relative;  }  table.geldtabel td.geld:before{      content:'€';      margin-right: 5px;      position: absolute;      left:5px;  }

 

Geplaatst in Blog, Cascading style sheets, Development, javascript, PHP