Skip to content

Instantly share code, notes, and snippets.

@mfdj

mfdj/display-list-item-types.php

Last active February 21, 2017 08:04
Show Gist options
  • Save mfdj/a67b7350e5b349442c738b46cd64564c to your computer and use it in GitHub Desktop.
Save mfdj/a67b7350e5b349442c738b46cd64564c to your computer and use it in GitHub Desktop.
Download ZIP
Compare available list-style-type options from: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
Raw
display-list-item-types.php
<?php
$tenItems = array_map(function ($n) {
return substr(md5("$n"), rand(0, 15), rand(5, 20));
}, range(0, 10));
$listTypes = [
'disc',
'circle',
'square',
'decimal',
'cjk-decimal',
'decimal-leading-zero',
'lower-roman',
'upper-roman',
'lower-greek',
'lower-alpha',
'lower-latin',
'upper-alpha',
'upper-latin',
'arabic-indic',
'armenian',
'bengali',
'cambodian',
'cjk-earthly-branch',
'cjk-heavenly-stem',
'cjk-ideographic',
'devanagari',
'ethiopic-numeric',
'georgian',
'gujarati',
'gurmukhi',
'hebrew',
'hiragana',
'hiragana-iroha',
'japanese-formal',
'japanese-informal',
'kannada',
'katakana',
'katakana-iroha',
'khmer',
'korean-hangul-formal',
'korean-hanja-formal',
'korean-hanja-informal',
'lao',
'lower-armenian',
'malayalam',
'mongolian',
'myanmar',
'oriya',
'persian',
'simp-chinese-formal',
'simp-chinese-informal',
'tamil',
'telugu',
'thai',
'tibetan',
'trad-chinese-formal',
'trad-chinese-informal',
'upper-armenian',
'disclosure-open',
'disclosure-closed',
'ethiopic-halehame-ti-er',
'ethiopic-halehame-ti-et',
'hangul',
'hangul-consonant',
'urdu',
];
$robotoSupported = [
'disc',
'circle',
'square',
'decimal',
'cjk-decimal',
'decimal-leading-zero',
'lower-roman',
'upper-roman',
'lower-greek',
'lower-alpha',
'lower-latin',
'upper-alpha',
'upper-latin',
'ethiopic-numeric',
'georgian',
'japanese-formal',
'japanese-informal',
'tamil',
'disclosure-open',
'disclosure-closed',
];
?>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" /></head>
<body>
<!-- <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,700" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
<!-- <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300&amp;subset=latin-ext" rel="stylesheet"> -->
<style>
body {
font-family: "Roboto Condensed", sans-serif;
color: #444;
margin: 2rem 1rem;
}
h1 {
padding-left: 2.4rem;
font-size: 20px;
text-transform: uppercase;
}
h3 {
padding-left: 2.4rem;
font-size: 16px;
/*text-transform: uppercase;*/
}
ol li {
font-size: 16px;
line-height: 19px;
padding: 0.1rem;
}
.types {
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
section {
flex: 0 0 10%;
margin: 0 2rem 0 0;
padding-bottom: 1px;
}
.note {
padding-left: 2.4rem;
color: salmon;
}
<?php foreach ($listTypes as $type): ?>
.list-type-<?= $type ?> {
list-style-type: <?= $type ?>;
<?php if (in_array($type, $robotoSupported)): ?>
font-family: "Roboto Condensed", sans-serif;
<?php else: ?>
font: menu;
color: salmon;
<?php endif ?>
}
<?php endforeach ?>
</style>
<h1>List Types</h1>
<p class="note">uses system ui-font</p>
<div class="types">
<?php foreach ($listTypes as $type): ?>
<section>
<h3><?= $type ?></h3>
<ol class="list-type-<?= $type ?>">
<?php foreach ($tenItems as $item): ?>
<li><?= $item ?></li>
<?php endforeach ?>
</ol>
</section>
<?php endforeach ?>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment