Styling with Law Widgets

Adding styles to the document content.

PreviousExpression detail page NextAdding interactivity

Last updated 1 year ago

Styling with Law Widgets

Adding styles to the document content.

In this section

Installing the Law Widgets web components library
Using Law Widgets to add styles to document content
Customising styles with CSS

Law Widgets

Akoma Ntoso HTML documents don't look very good without styling. Laws.Africa's is a collection of web components that make it simple to style the HTML provided by the Laws.Africa Content API.

Using Law Widgets is easy:

Add a reference to the Law Widgets javascript.
Use the law widgets in your HTML.

We'll use the widget to apply appropriate styles to the expression HTML in expression_detail.html.

expression_detail.html

<html>
<head>
  <title>{{ expression.title }}</title>
  <!-- add the law widgets javascript -->
  <script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@lawsafrica/law-widgets@latest/dist/lawwidgets/lawwidgets.esm.js"
  ></script>
</head>
<body>
  <a href="{% url 'home' %}">Home</a>
  
  <h1>{{ expression.title }}</h1>
  
  <!-- use la-akoma-ntoso law widget to apply styles -->
  <la-akoma-ntoso frbr-expression-uri="{{ expression.frbr_uri }}">
    {{ expression.content|safe }}
  </la-akoma-ntoso>
</body>

If you refresh your expression page in your browser, you should now have a well-styled document.

The frbr-expression-uri attribute

We included the frbr-expression-uri attribute on the <la-akoma-ntoso> element. If you inspect the <la-akoma-ntoso> element in your browser's inspector, you'll see that new attributes have been added automatically:

<la-akoma-ntoso
  frbr-expression-uri="/akn/za-cpt/act/by-law/2014/control-undertakings-liquor/eng@2014-12-12"
  frbr-country="za"
  frbr-type="act"
  frbr-subtype="by-law"
  frbr-date="2014"
  frbr-number="control-undertakings-liquor"
  frbr-expression-date="2014-12-12"
  frbr-language="eng"
>...</la-akoma-ntoso>

These additional attributes are derived from the Expression FRBR URI. They allows Law Widgets (and you) to customise the applied styles depending on a country's legal tradition.

For example, in Namibia's legal tradition editorial comments are green and bold. This styling is applied based on CSS selectors that work on the FRBR attributes added above.

Customising styles

You can easily apply your own CSS styles to the Akoma Ntoso HTML using regular CSS selectors.

For example, we can add a red border to all sections, except for Kenya (country code KE) where we can add a green border:

la-akoma-ntoso .akn-section {
  border: 1px solid red;
}
la-akoma-ntoso[frbr-country=ke] .akn-section {
  border-color: green;
}

You can use different attribute-based CSS selectors to change styling for different document types, countries, localities and languages.