diff --git a/README.md b/README.md index 3fd2ec9..ef3f19a 100644 --- a/README.md +++ b/README.md @@ -2,4 +2,8 @@ A CSS playground for F-mods (font metric overrides). This tool will help you find the right fallback for your font and tweak it in order to get the best possible results. +[Try it out](https://antoniocosentino.github.io/what-the-fout/) + ![WTF demo](/public/demo.gif) + +The tool was inspired by [this article]() on improved font fallbacks. diff --git a/src/app/components/Interface.tsx b/src/app/components/Interface.tsx index ef4e9d5..0fc09fd 100644 --- a/src/app/components/Interface.tsx +++ b/src/app/components/Interface.tsx @@ -1,6 +1,6 @@ "use client"; import { useEffect, useState } from "react"; -import { GoogleFonts, StandardFonts } from "../types"; +import { CopyStates, GoogleFonts, StandardFonts } from "../types"; import { getDummyText } from "../utils/getDummyText"; import { Helmet } from "react-helmet"; import { useOutsideClick } from "../customHooks/useOutsideClick"; @@ -60,6 +60,9 @@ export const Interface = (props: InterfaceProps) => { const [overlapBalance, setOverlapBalance] = useState(50); const [useDifferentColor, setUseDifferentColor] = useState(true); + const [leftCopyState, setLeftCopyState] = useState("IDLE"); + const [rightCopyState, setRightCopyState] = useState("IDLE"); + const iterableFontWeights = FONT_WEIGHTS.entries(); const fontWeightsArray = Array.from(iterableFontWeights); @@ -77,6 +80,30 @@ export const Interface = (props: InterfaceProps) => { setIsInEditMode(false); }; + const manageCodeCLick = (e: React.MouseEvent) => { + const element = e.target as HTMLTextAreaElement; + + element.select(); + element.setSelectionRange(0, 99999); + navigator.clipboard.writeText(element.value); + + const whichCodeBox = element.dataset.copyBox; + + if (whichCodeBox === "left") { + setLeftCopyState("COPIED"); + setTimeout(() => { + setLeftCopyState("IDLE"); + }, 4000); + } + + if (whichCodeBox === "right") { + setRightCopyState("COPIED"); + setTimeout(() => { + setRightCopyState("IDLE"); + }, 4000); + } + }; + const ref = useOutsideClick(handleClickOutside); // putting the cursor in the textarea when clicking @@ -436,32 +463,52 @@ export const Interface = (props: InterfaceProps) => {

- FONT FACE DECLARATION + {leftCopyState === "COPIED" + ? "Copied to clipboard!" + : "FONT FACE DECLARATION"}

-
-              font-family: "fallback for ${fontName}";
  src: local(${fallbackFontName});
  size-adjust: ${sizeAdjust}%;
  ascent-override: ${ascentOverride}%;
  descent-override: ${descentOverride}%;
  line-gap-override: ${lineGapOverride}%;
}`, - }} - /> -
+ +