Comments (2)
OvidijusParsiunas
commented on May 27, 2024
Why this is happening:
Font is rendered differently across various browsers and operating systems. This makes it difficult to deliver consistent UX for your users as some may see the component text in a format that you expect but others may see it with undesirable padding/alignment/size which can be unattractive.
To fix this; the component uses Google web fonts which help enforce standardised font format for all browsers and operating systems. The downside of this is that the component needs to download them via the internet and this latency is the reason why you are seeing a font change. Bundling the web fonts into the component was considered, however this is a complex task that is not easy to achieve using the Lit Element framework (used to build this component) and ultimately may not be handled correctly by the parent app's bundler. This would also significantly increase the resulting component size. Hence, if the startup font change is a problem, please use the approach below.
How to prevent this:
ActiveTable uses Inter as the default font-family value - which in turn is visibly affected when Google web fonts are downloaded on page load. Changing this to anything else will prevent the component font from changing (if the parent app is not using its own custom web fonts). You can simply achieve this by setting the font-family property in tableStyle or any of the other style property in Active Table to a font that you desire.
from active-table.
OvidijusParsiunas
commented on May 27, 2024
Another approach that you can use is to preload the font style by adding the following <link> tags to your application's <head>:
<link rel="preload" href="https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2" as="style">
<link rel="stylesheet" href="https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2" as="style">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" as="style">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" as="style">
Each link has a preload attribute which prevents the browser from rendering its contents before the it has finished loading and a stylesheet attribute which adds the styling to the application.
https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2 is a hyperlink to a file that contains the immediate Inter font used in the https://fonts.googleapis.com/css2family=Inter:wght@400;600&display=swap file.
from active-table.
Related Issues (20)
- Is it possible to translate the table elements? HOT 2
- Searching select box HOT 1
- any interface to change ui label in another language HOT 3
- Cannot get basic example running HOT 12
- Using active-table in a Flask app HOT 3
- CSV import doesn't support escaped commas HOT 1
- JS table data not captured HOT 1
- Cannot find module error while compiling HOT 6
- how to sponsor HOT 2
- Embedding custom HTML inside table cells HOT 2
- Provide display options for columnType HOT 6
- not explaining the usage process HOT 4
- 'cell-update' event seems to return wrong details
- navigator is not defined when using with NextJs HOT 5
- Table becomes laggy when displaying a long table HOT 1
- ERROR: ResizeObserver loop completed with undelivered notifications.
- Restoring table with column types
- CSV export is missing formatting options to be useful
- Improvement Suggestion: Change Cursor Type for Non-Editable Select Cells
- Custom buttons
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from active-table.