I have some tables to display amounts of money in dollars, currency symbol position. The thing is that I want to show different representations of currency based on the language selection, French or English. So, I want to be able to substitute html content without rewriting the entire content or having different files. For instance:
$50 English
50$ French
In a simplified HTML version, I can have values like that
<div>50</div>
<div>150</div>
<div>250</div>
Then, I will end up to needing two different views for either English or French. I am aware that there are many libraries or string substitution techniques to handle such a scenario, but I need here to do it from a single html view.
You can use the lang selector to do so. Below is a snippet of what you are looking for. You can set the lang to be en, fr, or any other prefixes to represent the language selection. After that, you can use the quotes property to determine strings to be appended or prepended to q tags. For the Frensh language, you will need to append $, while for the English language, you will need to prepend $.
<!DOCTYPE html>
<html>
<head>
<style>
:lang(fr) .money{
quotes: "" "$";
}
:lang(en) .money{
quotes: "$" "";
}
</style>
</head>
<body>
<div lang= "en">
<div><q class="money">50</q></div>
<div><q class="money">150</q></div>
<div><q class="money">250</q></div>
</div>
<div lang= "fr">
<div><q class="money">50</q></div>
<div><q class="money">150</q></div>
<div><q class="money">250</q></div>
</div>
</body>
</html>