I'm using vuetify v.3 that is recently released
I have problem to use rtl support in Vuetify 3
as it said here
RTL (Right To Left) support is built in for all localizations that
ship with Vuetify. If a supported language is flagged as RTL, all
content directions are automatically switched
this is plugins/vuetify.ts
import { createVuetify } from 'vuetify'
import { fa } from 'vuetify/locale'
export default createVuetify({
locale: {
locale: 'fa',
fallback: 'fa',
messages: { fa },
},
})
As you see I've imported fa ( farsi ,persian ) from locale and it is a rtl locale But the app doesn't get rtl .
and as it said here , fa is supported locale
Supported languages Currently Vuetify provides translations in the
following languages:
af - Afrikaans (Afrikaans) ar - Arabic (اللغة العربية) az -
Azerbaijani (Azərbaycan) bg - Bulgarian (български) ca - Catalan
(català) ckb - Central Kurdish (کوردی) cs - Czech (čeština) da -
Danish (Dansk) de - German (Deutsch) el - Greek (Ελληνικά) en -
English es - Spanish (Español) et - Estonian (eesti) fa - Persian
(فارسی) fi - Finnish (suomi)
Also when inspect page I see that lang attribute for html tag is set to en
I think maybe maybe there is something wrong with my codes.
what is the problem and How can I fix this ?
Related
I have been using tailwindcss for my react project and would now like to use daisy-ui in addition. I installed it as instructed and added the plugin to my tailwind.config. After doing this some of the designs in the page look off. In particular the ones styled with border-neutral-500, bg-neutral-500 - for these colors I also no longer see the little color indicator in vscode.
I am not using a custom theme but when looking at it it seems daisyUI is specifying its own version of the neutral color. https://daisyui.com/theme-generator/ vs https://tailwindcss.com/docs/customizing-colors - is this the source of the problem? How can I avoid this?
I guess there is really conflict with utilities. DaisyUI extending theme colors with its own
You may reassign neutral color palette again with default Tailwind values like
const colors = require('tailwindcss/colors');
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {
colors: {
neutral: colors.neutral,
}
}
},
plugins: [
require("daisyui")
],
}
This way both Tailwind bg-neutral-500 and Daisy btn-neutral (for example) will work
I am working on a new project and I've used mui along with nextjs and i18n for localization. The thing is, I would like to add come styling in case the language changes from English (ltr) to Arabic (rtl) but I can't find a proper way to do it. I've tried to change the direction property inside the mui theme as following:
const theme = createTheme({
direction: i18n.dir(),
breakpoints: {
values: {
xs: 0,
sm: 700,
md: 1024,
lg: 1200,
xl: 1536,
},
},
but the value never changes in the theme although I've checked the dir() inside i18n and it did work. The other approach that I've tried is, using :dir/:lang selectors inside the stylesheet but it didn't work at all.
Has anyone got any suggestions on this issue?
Thanks.
You can apply the i18n localization to your app
use the useEffect hook from react inside the functional component as
const [locale, setLocale] = useState(i18n.language);
i18n.on("languageChanged", (lng) => setLocale(i18n.language));
const currentLangObj = languages.find((lang) => lang.code === locale);
useEffect(() => {
document.body.dir = currentLangObj.dir || "ltr";
}, [currentLangObj]);
Here we need to build an array of languages which will container the language code as well as the direction
then find the lang with same code which we have in our locale and set he document.body.dir to it or by default to ltr
for more info you can visit https://blog.logrocket.com/react-localization-with-i18next/
I am working on building small applications that will live in a website. The website that will host these applications may or may not be using a css framework. I Want to prefix all Bootstrap classes with my own unique prefix.
To avoid "ANY INSTANCE or CHANCE" of conflict I want to prefix all Bootstrap CSS classes with - let's say - "year19-" prefix. So, for example, all the col- classes would now be year19-col- and all the .btn classes would now become .year19-btn, .year19-btn-primary, etc...
I know if I use the sass theme, new classes, then we would get around some of that as we can create our own prefixes using the theming approach, but JS would still remain a source of conflict if two versions of the same framework live on the same page. There was a Github project for Bootstrap 3 with the namespacing feature where you could just add your prefix in the namespace variable then compile the entire code to a CSS and JS package. Bootstrap 4 doesn't seem to have that package yet.
Also, I don't want to wrap the project with a css class. That approach is fine for some things, but not the right approach. I wouldn't even call that namespace. That is just wrapping the classes.
year19-btn-primary {
then this would be whatever the code that already existed there before, not touched.}
I managed to get classes prefixed for Bootstrap 5.1.3. You'll need to make the following changes before compiling Bootstrap yourself. My full implementation is available here: https://github.com/Robpol86/sphinx-carousel/tree/85422a6d955024f5a39049c7c3a0271e1ee43ae4/bootstrap
package.json
"dependencies": {
"bootstrap": "5.1.3",
"postcss-prefix-selector": "1.15.0"
},
Here you'll want to add postcss-prefix-selector to make use of it in postcss.
postcss.config.js
'use strict'
const prefixer = require('postcss-prefix-selector')
const autoprefixer = require('autoprefixer')
const rtlcss = require('rtlcss')
module.exports = ctx => {
return {
map: ctx.file.dirname.includes('examples') ?
false :
{
inline: false,
annotation: true,
sourcesContent: true
},
plugins: [
prefixer({
prefix: 'scbs-', // ***REPLACE scbs- WITH YOUR PREFIX***
transform: function (prefix, selector) {
let newSelector = ''
for (let part of selector.split(/(?=[.])/g)) {
if (part.startsWith('.')) part = '.' + prefix + part.substring(1)
newSelector += part
}
return newSelector
},
}),
autoprefixer({
cascade: false
}),
ctx.env === 'RTL' ? rtlcss() : false,
]
}
}
This is where the CSS will be prefixed. I'm using postcss instead of just wrapping bootstrap.scss with a class/id selector so I can use the Bootstrap 5 carousel component on Bootstrap 4 webpages (which is my use case). This will replace https://github.com/twbs/bootstrap/blob/v5.1.3/build/postcss.config.js
rollup.config.js
// ...
const plugins = [
replace({ // ***COPY/PASTE FOR OTHER BOOTSTRAP COMPONENTS***
include: ['js/src/carousel.js'], // ***YOU MAY NEED TO REPLACE THIS PATH***
preventAssignment: true,
values: {
'CLASS_NAME_CAROUSEL': '"scbs-carousel"', // ***USE YOUR PREFIXES HERE***
'CLASS_NAME_ACTIVE': '"scbs-active"',
'CLASS_NAME_SLIDE': '"scbs-slide"',
'CLASS_NAME_END': '"scbs-carousel-item-end"',
'CLASS_NAME_START': '"scbs-carousel-item-start"',
'CLASS_NAME_NEXT': '"scbs-carousel-item-next"',
'CLASS_NAME_PREV': '"scbs-carousel-item-prev"',
'CLASS_NAME_POINTER_EVENT': '"scbs-pointer-event"',
'SELECTOR_ACTIVE': '".scbs-active"',
'SELECTOR_ACTIVE_ITEM': '".scbs-active.scbs-carousel-item"',
'SELECTOR_ITEM': '".scbs-carousel-item"',
'SELECTOR_ITEM_IMG': '".scbs-carousel-item img"',
'SELECTOR_NEXT_PREV': '".scbs-carousel-item-next, .scbs-carousel-item-prev"',
'SELECTOR_INDICATORS': '".scbs-carousel-indicators"',
}
}),
babel({
// Only transpile our source code
// ...
Lastly rollup replace plugin is used to add the prefixes in the compiled javascript file. I wasn't able to find a way to just prefix the consts so I had to resort to having the entire const replaced and hard-coded with the full class names. This means you'll need to do this for every Bootstrap component that you're including in your final build (for me I just need the carousel so it's not a big deal).
I'm building a website using Vue but I have 2 separate css files, 1 for normal ltr and one for rtl.
Now according to the URL xyz.com/en or xyz.com/ar I can serve the appropriate file, based on server-side logic. However, I want this to be done on the client via Vue Router.
So that the URLs can look like this xyz.com/#/en or xyz.com/#/ar
You could have language specific CSS inclusions <link href="..." /> from the respective components for EN and AR as shown below.
routes: [
{
path: '/en',
name: 'Welcome EN...',
component: WelcomeEN
},
{
path: '/ar',
name: 'Welcome AR...',
component: WelcomeAR
}
]
Do you think that would work for you ?
this is an example of conditional css loading inside a component
// change x to change color
const x = true;
if(x)
require("./assets/style.css");
else
require("./assets/stylegreen.css");
code snippet of conditional css loading in vue
Is there a standard mechanism for setting language-depending icons in Qt.
If not, would this work and would it be safe:
MyWidget->setIcon(QPixmap(dir.currentPath() + tr("/images/icon_en.png") ));
//icon_en should be translated according to corresponding image names
There is no standard mechanism for setting icon depending on the locale in Qt. Nevertheless, writing your own mechanism is very plain.
IMO, using tr in your code is redundant. This way is much more flexible:
// Get current system locale:
const QString LOCALE = QLocale::system().name(); // For example, result is "en_US"
// Extract language code from the previously obtained locale:
const QString LANG = LOCALE.split('_').at(0); // Result is "en"
// Path to our icons:
const QString PATH = QString(QApplication::applicationDirPath() + "/images");
// Build the path to the icon file:
const QString ICON = QString("%1/icon_%2.png").arg(PATH, LANG);
// Check if the icon for the current locale exists:
if (QFile::exists(ICON)) {
// Set this icon for our window:
setWindowIcon(QPixmap(ICON));
}
else {
// Otherwise fallback to the default icon:
setWindowIcon(QPixmap(PATH + "/icon_default.png"));
}
Generally, the technique you posted is correct. Just few remarks on your code:
Note that QDir::currentPath() does not return the executable directory; it returns the current working directory. Use QApplication::applicationDirPath() instead.
You may also want to use Qt Resource System instead of storing images along with your executable.
You can load an icon from a ressource file.
Then you can specify an alias for specific languages in the ressource file:
<qresource>
<file>cut.jpg</file>
</qresource>
<qresource lang="fr">
<file alias="cur.jpg">cut_fr.jpg</file>
<qresource>
This way when the app is turned to french automatically the alias icon is selected.