{rating} · PAD tags

Syntax

{rating 4.5}
{rating $score, max=5, size=20, icon='heart', label='text'}

Parameters

score: The score, a number, clamped to 0 ... max.

Options

max: The number of icons, a whole number from 1 to 20, default 5.
size: The height in pixels, default 20.
icon: star (default) or heart.
label: The accessible name, default 4.5 out of 5.

Description

{rating} shows a score as a row of stars - or hearts - in inline SVG (tags/_lib/rating.php). The whole icons up to the score are filled, the rest empty, and a part of one is filled as far as the score goes: 3.75 fills three stars and three quarters of the fourth.

The part is a nested <svg> as wide as the part - no clipPath, so no id that two ratings on one page could share - measured over the drawn icon, so 0.5 is exactly half. The whole is role="img", with the score in words as its aria-label and <title>: 4.5 out of 5, or label.

The colours are --pad-rating-star, -heart and -empty on .pad-rating, with light-dark() defaults written once per page; the fill attributes carry the light ones for a reader without the style. A score that is no number, a max that is no whole number from 1 to 20 or an unknown icon is an error under the strict check. The tag only shows a score; to collect votes see {poll}.

Examples

Scores in a table

Each product's average as stars, a part of a star filled as far as the score goes.

Templateexamples/rating/1-reviews.pad

<table>
  {products}
  <tr><td>{$product}</td><td>{rating $score, size=16}</td><td>{$score}</td></tr>
  {/products}
</table>

PHPexamples/rating/1-reviews.php

<?php

  $products = [
    [ 'product' => 'Walnut desk lamp', 'score' => 4.7 ],
    [ 'product' => 'Linen armchair',   'score' => 4.2 ],
    [ 'product' => 'Oak side table',   'score' => 3.5 ],
    [ 'product' => 'Ceramic vase',     'score' => 5   ] ];

?>

Resultopen alone

Walnut desk lamp		4.7
Linen armchair		4.2
Oak side table		3.5
Ceramic vase		5

Hearts, another max, a label

icon=heart, max=10 and a label= read out instead of the score.

Templateexamples/rating/2-hearts.pad

<p>{rating 3.75, icon='heart', size=24}</p>
<p>{rating 7.3, max=10, size=18}</p>
<p>{rating 9, max=10, size=18, label='Nine of ten critics recommend it'}</p>