Currently I am building a website with nuxt-js. For the back-end of site I am using strapi headless CMS. In article pages of the site I get data (text of articles) from rich text capability of strapi database. So I don't need to define html tags to load the content correctly. The main language of the site is Persian, but there are some English words between sentences. For better design and showing content I used two font-family in my website. The font1 variable in my CSS file is referenced to a Persian font-family and the font2 is referenced to an English font-family. When I use this code in my CSS file:
#app {
font-family: var(--font1), var(--font2);
}
I get this result in the browser page:
As you could see the number 5 in the text is rendered in Persian language (correct format), but the number 8 in laravel-8 word also is rendered in Persian (wrong format). If I change the code to this one:
#app {
font-family: var(--font2), var(--font1);
}
I get the reverse result:
As you could notice none of the above results are correct. If I used html tags in my pages, I could wrap that words in for example span tags and define custom CSS for them. But in my case I don't use html tags and they are rendered automatically by strapi. So how could I fix this issue in my website? Is there any CSS property or any other trick that could solve this problem?
With the help of #nuxtjs/markdownit package, I finally found this solution. After adding that package according to its documentation, we must add html: true in its configuration as the code below:
nuxt.config.js file:
markdownit: {
preset: 'default',
linkify: true,
breaks: true,
injected: true,
html: true,
},
So the texts that we insert in strapi rich-text data could have html tags like span inside. So I can wrap my English words to a span tag with the class of englishText like the text below:
strapi rich text:
در میان ویژگیهایی که در CSS برای تعریف کردن 5 استایل استفاده میشوند، شاید یکی از جذابترین و البته گستردهترین آنها <span class="englishText">laravel-8</span> باشد.
Then when we use this.$md.render(this.text); in our nuxt app (suppose that this.text is the data that contains rich-text from strapi) and use that text in our template part, If we define the englishText class in our CSS as the code below:
span.englishText {
/* font2 is the English font and font1 is the Persian font */
font-family: var(--font2), var(--font1);
}
We could get the correct result as this one:
Related
I'm using reactjs, and I used i18next to change the language of my website, Now I need to assign different fonts to the different languages.
I'm defining the font in a css file.
How can I update that font depending on the language used ?
I am not very familiar with i18next, but you can simply change the className of the div containing the text based on the language you are using.
//.jsx file
<div className = {i18.language}>
//some text goes here
</div>
//css file
.en{
font-size:16px
}
.fr{
font-size:12px
}
//etc.
I have an email html and I would like to use font Poppins to display text in my email.
However, It's not working.
I searched and found some solutions, but it's still not working.
https://css-tricks.com/kinda-can-use-custom-fonts-html-emails/
https://mailbakery.com/blog/fonts-html-emails-limitations-solutions-industry-standards/
https://litmus.com/blog/the-ultimate-guide-to-web-fonts
Thanks for reading.
Add a Google Font to Your Template
Search for your Google font here: https://fonts.google.com.
Next, click on the font and click the Select This Font button on the
upper right.
After selecting the font, click on the Family Selected window that is
minimized at the bottom of your browser.
Make sure you're in the Embed tab, then navigate to #Import
Visit here: https://help.klaviyo.com/hc/article_attachments/115000293152/2017-05-02_14-33-08.png for example image.
Here, you will see the import URL for the font. Copy this URL. In
this example, the URL is:
https://fonts.googleapis.com/css?family=Roboto.
In your Klaviyo template, find and edit the first text block in your
email. Click on the Source button to view the raw HTML.
Then, add the following HTML. This includes the font's import URL and specifies which HTML elements will use that font:
<style type="text/css">
#import url('INSERT_FONT_URL');
p, h1, h2, h3 {
font-family: 'INSERT_FONT_NAME', 'INSERT_A_FALLBACK_FONT';
}
</style>
When you save the block, you'll see the new fonts being used.
In the Look & Feel section of a survey, under Advanced, you can Add custom css.
I'd like to access my embedded data in my custom css.
For example, I would like to do this:
.Skin {
font-family: ${e://Field/fontFamily};
}
The above code doesn't work. The embedded data variable fontFamily isn't inserted into the custom css.
I am able to access embedded data in the Header and Footer elements. However, these elements do not allow me to specify styles for the rest of the document (qualtrics seem to strip any elements you add to that section).
I have a Share Point 2013 web site and a blog in it. Since my posts will include a lot of special text content, I need to add more styles that I will use on all posts. Typically all styles appear in the top ribbon bar when creating a new post.
How to add the new style in Share Point Designer 2013?
What do I need to do?
What you are looking for are custom styles for the SharePoint RichText editor. The nice thing is that all you have to do is add some custom CSS and SharePoint will magically render new text styles. you can also do this with SharePoint Designer if you have a custom master page or if you just specify the alternate CSS somewhere.
The "magic" CSS is something like the following:
.ms-rteStyle-MySpecialStyle {
-ms-name: "My special style";
font-style: bold;
color: red;
}
h2.ms-rteElement-SpecialHeading{
-ms-name: "Special Heading";
font-style: bold;
color: green;
}
The difference between the two is the rteElement vs. rteStyles, but the difference becomes clear once you look at your screenshot: Page Elements and Text Styles. The difference is that you style particular elements with one, e.g. H1, H2, SPAN, and you style text passages with the other - SharePoint actually adds a span tag around the text and assigns it your style.
Enough of the words, a couple of complete blog articles to help you get started:
How to add custom styles to the ribbon in SharePoint 2013
Add new stlyes to Rich Text Editor ribbon in SP2013 Online
Do you know how to custom styles for RichHtmlEditor in SharePoint 2013?
Please try this code for custom heading and text
h2.ms-rteStyle-customHeading
{-ms-name:"custom heading";
color:gray; }
.ms-rteElement-customTest
-ms-name:"customize text";
{color:black; }
Some modern browsers convert links like
Site
into
Site (http://somesite.com)
as part of the generated PDF.
Is there a way to omit the links from the generated PDF version by pure CSS?
Which CSS classes in the print.css must be defined in order to suppress the link URLs?
Here is an example for the way to manipulate the styling of <a href=...> tags inside a CSS file to make it appear as you dislike it:
#media print {
##....
a[href]:after {
content:" ("attr(href)")";
color:#868686;
background-color:inherit;
font-style:italic;
size:90%;
}
##....
}
To override this setting (and make it appear more to your liking), you may need to use a (user) print.css which contains the following (as part of its total content):
a[href]:after {
content:"" !important;
}
Your question is not very clear about the scope of your requirement:
Should it be valid just for a website you control and for the users visiting it?
Should it apply to any web page you visit?
If you want the first, you put the reference to your print.css into the HTML header section the usual way and host the file on your web server
If you want the second, you should google for "user stylesheets" to find links like the following:
Accessibility Features of CSS: User override of styles
Tap the power of Mozilla's user style sheets
How to write a user stylesheet for Safari