What are XTRA, YOPQ, YTLC, etc. in CSS?
I'm reading a blog on Roboto Flex font which is a variable font, and I see mentions of
- Parametric Counter Width (XTRA in CSS)
- Parametric Thin Stroke (YOPQ in CSS)
- Parametric Lowercase Height (YTLC in CSS)
etc.
What are XTRA, YOPQ, YTL, etc. in CSS? What do they stand for? I have never seen these properties before.
Thanks!
2 answers
-
answered 2022-05-06 21:09
Alohci
They're
font-variation-settings
See Get started with variable fonts in CSS for an example of their use.They can be defined in and be specific to the individual font.
-
answered 2022-05-07 17:25
Peter Constable
These are custom variation axes used in the Roboto Flex font. The blog you pointed to describes what each controls in the font.
The variable font format is defined in the OpenType spec. A variable font has one or more axes of design variation, and each axis is identified with a four-letter tag. The OpenType spec allows for "registered" axes, which have conventional definitions that all implementers can recognize, or custom tags that are foundry-specific. Registered axis tags use lowercase letters; foundry-defined axes use uppercase letters.
So, XTRA, YOPQ, etc. are variation axis tags defined by Google. The reference to "in CSS" is that the font parameters can be specified in CSS using the axis tags in conjunction with
font-variation-settings
, as mentioned in the previous answer.
do you know?
how many words do you know
See also questions close to this topic
-
Creating Sticky Navbar with Drop Down Menu HTML
I am creating a HTML web page which contains a sticky navbar with drop down menu. However, when I created one, the dropdown menu does not works in the sticky navbar and so goes vise versa. below is the screenshot of both the result of the two codes.
*image with dropdown menu but without sticky navbar
*image with sticky navbar but without dropdown menu
below is the code for "image with dropdown menu but without sticky navbar"
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-awesome.min.css"> <style> body {margin:0;font-family:Arial} .topnav { overflow: hidden; background-color: #333; } .topnav a { list-style-type: none; float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; position: sticky; } .active { background-color: #04AA6D; color: white; } .topnav .icon { display: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .topnav a:hover, .dropdown:hover .dropbtn { background-color: #555; color: white; } .dropdown-content a:hover { background-color: #ddd; color: black; } .dropdown:hover .dropdown-content { display: block; } @media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } } </style> </head> <body> <div class="header"> <h2>Scroll Down</h2> <p>Scroll down to see the sticky effect.</p> </div> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <a href="#about">About</a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a> </div> <div style="padding-left:16px"> <h2>Responsive Topnav with Dropdown</h2> <p>Resize the browser window to see how it works.</p> <p>Hover over the dropdown button to open the dropdown menu.</p> </div> <h3>Sticky Navigation Bar Example</h3> <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p> <p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> </body> </html>
below is the code for "image with sticky navbar but without dropdown menu"
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-awesome.min.css"> <style> body { font-size: 20px; } body {margin:0;} ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: -webkit-sticky; /* Safari */ position: sticky; top: 0; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 16px 20px; text-decoration: none; } li a:hover { background-color: #111; } /*======================================================================*/ body { background-color:white; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #38444d; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: red; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #f1f1f1;} .dropdown:hover .dropdown-content { display: block; } footer { text-align: center; padding: 3px; background-color: DarkSalmon; color: white; } </style> </head> <body> <div class="header"> <h2>Scroll Down</h2> <p>Scroll down to see the sticky effect.</p> </div> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li class="dropdown"> <a href="javascript:void(1)" class="dropbtn">Dropdown</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> <h3>Sticky Navigation Bar Example</h3> <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p> <p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <footer> <p>Author: Hege Refsnes<br> <a href="mailto:hege@example.com">hege@example.com</a></p> </footer> </body> </html>
Please i need some help with this as i am new to html and css.
-
Javascript: Change element class if button has a certain value
<div class="main-div main-div2"> <!-- IF up to date, main-div3 --> <button id="update-btn" class="btn update-btn"> Up to date </button> </div>
I want to make it so if update-btn has a value of "Up to date", change the div class from "main-div main-div2" to "main-div main-div3". Otherwise, if it's any other value, change it to "main-div main-div2"
What kind of loop would be good for this Javascript function too if I want it to be checking constantly?
Thank you.
-
Boostrap vertical sizing with different style width and height
I am trying to set verticaly icon on profile photo card inside div to be in the middle in white box(div), but dont know why it doesnt works. When I use
style="width: 300px; height: 300px;
for div square I can center it on horizontaly, but not verticaly :/ Can someone explain me what I am doing wrong?Anyway is there any way how to resize bootstrap icons except display-1???
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <div class="container-sm offset-md"> <h1 class="p-4 m-4">Nastavení profilu</h1> <div class="row"> <div class="col"> <div class="card p-4 m-4"> Osobní údaje <input type="text" name="name" class="form-control" placeholder="Jméno"> <input type="text" name="surname" class="form-control" placeholder="Příjmení"> <input type="email" name="email" class="form-control" placeholder="E-Mail"> <input type="date" name="name" class="form-control"> </div> </div> <div class="col-4"> <div class="card p-4 m-4 bg-light"> Profilová fotografie <div class=" square text-center border display-1 m-3 bg-white mx-auto"> <i class="bi bi-person-fill align-middle justify-content-center text-secondary"></i> </div> <input type="file" id="customFile" name="file" hidden=""> <div class="text-center"> <button class="btn btn-success" for="customFile">Nahrát</button> <button type="button" class="btn btn-danger">Smazat</button> <p class="text-muted mt-3 mb-0">Poznámka: Minimální velikost 300px x 300px</p> </div> </div> </div> </div> <div class="row"> <div class="col"> <div class="card p-4 m-4"> Změna hesla </div> </div> <div class="col"> <div class="card p-4 m-4"> Zobrazit/skrýt podrobnosti </div> </div> </div> </div>
-
tkinter tab width incorrect
When creating text on a canvas using the
create_text
method the width of a tab is not what it should be, as indicated byfont.measure
.import tkinter as tk from tkinter.font import Font root = tk.Tk() canvas = tk.Canvas(root, width=300, height=300) canvas.pack() font = Font(family='Arial', size=12) s1 = "a\tb" s2 = "a c" print("Width:", s1, font.measure(s1)) # Width: a b 30 print("Width:", s2, font.measure(s2)) # Width: a c 33 canvas.create_text(10, 10, text=s1, font=font, anchor="nw") canvas.create_text(10, 50, text=s2, font=font, anchor="nw") root.mainloop()
The results of
font.measure
suggest that the line with spaces should be a little longer, but what it displays is:Showing that the width of the tab is significantly larger than the spaces. Using different fonts will result in differently sized tabs, but still inaccurate measurements. The measured width of the text without tabs is correct.
How can I get the correct tab width? Is this a bug?
-
Python 3.10.2 anti-aliased fonts not smoothing in Tkinter under SUSI Linux
I have a problem with font smoothing AKA anti-aliasing not working. I have provided a small Tkinter test code snippet that shows a grid of Tkinter labels that steps through all of the installed fonts using that font's type face below. When run the code under our current build of Python 3.10.2 Tkinter 8.6 running under SUSI Linux. I get a grid of font names but they are clearly not using anti-aliasing. Very jagged.
When I run the same code on my Mac the fonts are smooth as expected. I now believe that this is due to an installation problem for either Python itself and/or Tkinter. I have spent a lot of time searching the Net for any information regarding installation settings/flags for Python 3.10.2 installation that would turn on anti-aliasing because it is clearly not operating under our Linux build. Unfortunately I have to figure out the problem and guide my IT group on how to fix the build because I do not control the installations.
Any ideas/trick and/or where to look for answers for this problem would be greatly appreciated. FWIW anti-aliasing works for our Python 3.6.0 build under the same Linux environment so there is something specifically wrong with the 3.10.2 build and/or the Tkinter installation for same.
Note all of the existing Stack Overflow postings that come up on this topic address using anti-aliased fonts not how to get the feature to fundamentally work. Even though I don't think my code snippet is needed I've included below just in case.
import tkinter from tkinter import font root = tkinter.Tk() root.geometry('1500x1500') root.columnconfigure(0, minsize=25) root.columnconfigure(1, minsize=70) tkinter.Label(root, text='Lists:', anchor=tkinter.W).grid(row=0, column=0, sticky=tkinter.W) fams = font.families(root) for i in range(39): root.rowconfigure(i, minsize=14) col = 0 row = 1 for i, fam in enumerate(fams): label_id = tkinter.Label(root, anchor=tkinter.W, text=f'Sector {i}') print(f'({i}: {row}, {col})') label_id.grid(row=row, column=col ) label_name = tkinter.Label(root, anchor=tkinter.W, font=(fam, 14), text=fam) c2 = col + 1 print(f'({i}: {row}, {c2}) FAM: {fam}') label_name.grid(row=row, column=c2) row += 1 if row % 40 == 0: row = 1 col += 2 root.mainloop()
-
The biggest loaded element on my page is the font
I'm testing my page's performance through GTmetrix and I noticed that the biggest element loaded on my page is the font-family. Is there a way to lower this somehow? Here is how I load my font:
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap" rel="stylesheet">
-
How can I preload a web font?
I've been trying to preload my website fonts and lighthouse keeps telling me this "Lighthouse was unable to automatically check the
font-display
value for the origin https://www.financialoptions.com.ng.This is my code:
<link as='font' crossorigin='anonymous' href='/assets/Roboto-normal.woff2' rel='preload' type='font/woff2'/>
What's wrong with it?
I tried adding
'font-display'='swap'
and I got a similar error aboutfont-value
. -
Why is localhost a slow network according to Chrome?
I am on vacation and have a horribly slow Internet connection.
During the dev phase, I usually load Google fonts via an
@import
directly from the CDN. This time, in order to avoid the flickering of the screen during the native → downloaded fonts transition, I embedded the fonts in my application (Quasar Vue3 if it matters).In the Chrome console, I still see
[Intervention] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: http://localhost:8080/fonts/KFOlCnqEu92Fr1MmWUlfBBc-.woff
Since the traffic does not leave
localhost
, how can it be "slow"?