from absl import flags
import itertools
import mistune # markdown => ast
+from xml.dom import minidom
from pathlib import Path
import re
import sys
from typing import Callable, Iterable, List, Mapping, Set, Union
+MAX_IMAGE_SIZE_KB = 800
+
+
def _topic_target_to_path(_: Set[str], target: str) -> str:
# TODO sanity check if this is the only valid update
return Path(target.replace("/topic/", "topics/")) / "topic.textproto"
def main(_):
+ return_code = 0
+
knowledge_dir = Path(__file__).parent.parent.parent / "cc-by-sa" / "knowledge"
assert knowledge_dir.is_dir(), f"No dir {knowledge_dir}"
continue
unambiguous_names[name] = str(entries[0].relative_to(knowledge_dir).parent)
- return_code = 0
for md_file in md_files:
ast = _markdown_ast(md_file)
for link in _ast_iter(ast, lambda v: v.get("type", None) == "link"):
print(result, target, "=>", target_path)
print(" in", md_file.relative_to(knowledge_dir))
+ image_files = list(knowledge_dir.glob("**/images/*"))
+ for image_file in image_files:
+ if image_file.name == "thumbnail.svg":
+ root = minidom.parseString(image_file.read_text()).documentElement
+ if root.tagName != "svg":
+ print("Root element must be <svg>:", image_file.relative_to(knowledge_dir))
+ return_code = 1
+ has_view_box = "viewBox" in root.attributes
+ has_width_and_height = "width" in root.attributes and "height" in root.attributes
+ if not has_view_box and not has_width_and_height:
+ print("Must specify viewBox and/or width+height on <svg>:", image_file.relative_to(knowledge_dir))
+ return_code = 1
+ if image_file.suffix != ".svg" and image_file.stat().st_size > MAX_IMAGE_SIZE_KB * 1024:
+ print("File exceeds max size of %s KB:" % MAX_IMAGE_SIZE_KB, image_file.relative_to(knowledge_dir))
+ return_code = 1
+
sys.exit(return_code)
<figure>
+images/4_4a.gif
+
+</figure>
+
+<figure>
+
</figure>
Finally, for other special interactive effects, keep in mind that `:hover` isn’t limited to just hyperlinks. For example, you can wrap arbitrary elements in their own `span` elements and use that for triggering hover effects. You can also tweak the timing of a transition to make it faster or slower:
+<figure>
+
+images/4_6.gif
+
+<figcaption>Multiplexed hover effects with more expressive variations, on a letter-by-letter basis.</figcaption>
+
Interactivity is a virtually infinite space for experience design, and variable fonts offer that much more room for exploration. For more ideas on using variable fonts, see the [other articles listed under the topic of variable fonts](https://fonts.google.com/knowledge/topics/variable_fonts).
<figure>
-
+images/3_1.gif
</figure>
<figcaption>Static fonts with a layout breakpoint: A single breakpoint changes padding, font sizes, and line-height.</figcaption>
<figure>
-
+images/3_2.gif
</figure>
<figcaption>Static fonts with intrinsic layout: The widths of the fonts remain fixed, but padding, font sizes, and line-heights change more smoothly with relative units.</figcaption>
<figure>
-
+images/3_3.gif
</figure>
<figcaption>Breakpoint for static fonts with intrinsic layout: Now the font widths also change, but only at a single breakpoint.</figcaption>
<figure>
-
+images/3_4.gif
</figure>
<figcaption>Gradual variable font changes with intrinsic layout: Everything changes smoothly thanks to relative units and the fine-tuning flexibility of variable fonts.</figcaption>
<figure>
-
+images/3_5.svg
</figure>
<figcaption>Avoid extremely narrow or wide font variants for paragraph text, as they can harm readability when typesetting anything more than a few words at a time.</figcaption>
<figure>
-
+images/3_8.gif
</figure>
<figcaption>Variable fonts allow for extenders that shrink or grow as space allows to prevent glyphs from colliding between lines.</figcaption>
projects / thirdparty / google / fonts.git / commitdiff
