SASS Mixin typography issue while implementing multi language - javascript

I am working on a react website which use sass for managing styling. So in the website I have implemented typography for english language through sass mixins.
There are different headings and bodies in the typography like heading1, heading2 , body1, body2 etc . Format of each element in typography is like
#mixin body1{
font-size:10px,
font-weight: 700,
letter-spacing: 1px,
line-height:1
}
#mixin body2{
font-size:5px,
font-weight: 400,
letter-spacing: 1px,
line-height:1
}
And then I include this body in my component css like :
.primaryButton .text{
#include body1;
}
.secondaryButton .text{
#include body2;
}
so button is single component is react , we are just changing parent class based on variation props and so its styling .
Now the issue is that I have to implement typography for different languages like about 50 languages and I an not sure what generic approach will be best to implement .
Note :
We didn't use generic classes instead of mixin for typography because we have variation and theme for each component and for each variation and theme same element may have different font size and other properties so for different variation we load different typography elements based on component parent class.
Also I don't want to go in each file and then overwrite english typography based on parent class for each language as project size is too big for that and also 50 languages is also too many for that approach. And in future language can increase .

you can use like this
Placeholders
%body1{
font-size:10px;
font-weight: 700;
letter-spacing: 1px;
line-height:1;
}
%body2{
font-size:5px;
font-weight: 400;
letter-spacing: 1px;
line-height:1;
}
%body3{
font-size:5px;
font-weight: 400;
letter-spacing: 1px;
line-height:1;
}
Configs
$langsConfig: (
"en": (body2),
"fr": (body1, body2),
"cn": (body2, body3),
"bn": (body1, body2, body3),
);
css generator
#each $lang, $placeholderList in $langsConfig {
.#{$lang} {
.primaryButton {
.text {
#each $placeholder in $placeholderList {
#extend %#{$placeholder}
}
}
}
}
}
Output
.bn .primaryButton .text, .fr .primaryButton .text {
font-size: 15px;
font-weight: 700;
letter-spacing: 1px;
line-height: 1;
color: red;
}
.bn .primaryButton .text, .cn .primaryButton .text, .fr .primaryButton .text, .en .primaryButton .text {
font-size: 20px;
font-weight: 400;
letter-spacing: 1px;
line-height: 1;
color: green;
}
.bn .primaryButton .text, .cn .primaryButton .text {
font-size: 25px;
font-weight: 400;
letter-spacing: 1px;
line-height: 1;
color: yellow;
}
React implementation
export default function App() {
const lang = "en";
return (
<div className={`${lang}`}>
<div className="primaryButton">
<h1 className="text">Hello CodeSandbox</h1>
<h2 className="text">Start editing to see some magic happen!</h2>
</div>
</div>
);
}
Explanation:
Placeholder: Instead of mixing use placeholder.
Config: Language name and related mixing list
Generator: it will make a loop with configs and create the css is dynamic ways
NOTE: if you want to use component based scss. Then create a scss function and pass the variables in css generator.
Here is the Sandbox link
Let me know if it helps. It could be more dynamic if i could know the implementation on react side.

Related

Unable to overwrite react-h5-audio-player scss variables

I've just included react-h5-audio-player into my project and following the README page to customise the styles by overwriting the SCSS variables responsible for the colours.
However it seems like my styles just get ignored. Do you have any idea what could be going wrong here? Thank you very much.
This is the codesandbox where I've reproduced the problem: https://codesandbox.io/s/react-and-scss-forked-yeu0q?file=/src/index.js
As you can see I've included the style.css (which contains the overwritten variables) in 3 places -- before importing audioplayer's js, before importing audioplayer's css and after both of these just in case to see if any of these works. I also randomly added !default and !important to the variables hoping that at least some of the syntax would work, but the styles are just keep being ignored.
I will also include the code to this post if someone prefers seeing it here rather in codesandbox:
style.css:
html,
body {
background-color: papayawhip;
font-family: sans-serif;
h1 {
color: tomato;
}
}
$rhap_theme-color: #ff0000; // Color of all buttons and volume/progress indicators
$rhap_background-color: #ff0000 !important; // Color of the player background
$rhap_bar-color: #ff0000 !default; // Color of volume and progress bar
$rhap_time-color: #0000ff !important !default; // Font color of current time and duration
$rhap_font-family: inherit !important; // Font family of current time and duration
index.js:
import React from "react";
import { render } from "react-dom";
import "./styles.scss";
import AudioPlayer from "react-h5-audio-player";
import "./styles.scss";
import "react-h5-audio-player/src/styles.scss";
import "./styles.scss";
const App = () => (
<div>
<h1>Hello</h1>
<AudioPlayer src="http://example.com/audio.mp3" />
</div>
);
render(<App />, document.getElementById("app"));
For another approach you can use this example:
.rhap_container {
background: #f7f7f9;
}
.rhap_controls-section {
margin-bottom: 15px;
}
.rhap_progress-section {
height: 20px;
padding-bottom: 20px;
}
.rhap_main-controls-button {
width: 80px !important;
height: 80px !important;
}
.rhap_main-controls-button {
width: 56px;
height: 56px;
display: block;
}
.rhap_main-controls-button svg {
color: #ff5555;
width: 100%;
height: 100%;
}
.rhap_progress-filled,
.rhap_progress-indicator {
background-color: #ff5555 !important;
}
.rhap_button-clear.rhap_volume-button {
color: #ff5555 !important;
}
.rhap_volume-bar, .rhap_volume-indicator {
background-color: red;
}

use styled-components to share styles between components/elements

I am using styled-components along with Gatsby. I used styled-components to style the Link component provided by Gatsby for my home page.
const HomePageLink = styled(Link)`
display: inline-block;
font-size: ${fontSizes.xxlarge};
text-decoration: none;
box-shadow: none;
:link,
:visited {
color: ${colors.slate};
}
:hover,
:active {
color: ${colors.red};
}
`
However I realize that I also need to style a plain html <a /> tag using the exactly same style. I wonder is there a way to make the style component above adapt to <a /> tags without duplicating the code like this
const HomePageAnchorTag = styled.a`
display: inline-block;
font-size: ${fontSizes.xxlarge};
text-decoration: none;
box-shadow: none;
:link,
:visited {
color: ${colors.slate};
}
:hover,
:active {
color: ${colors.red};
}
`
Yes, use css API which allows you to construct reusable CSS blocks.
A helper function to generate CSS from a template literal with interpolations.
import styled, { css } from 'styled-components';
const reusableCSS = css`
display: inline-block;
font-size: ${fontSizes.xxlarge};
text-decoration: none;
box-shadow: none;
:link,
:visited {
color: ${colors.slate};
}
:hover,
:active {
color: ${colors.red};
}
`;
const HomePageAnchorTag = styled.a`
${reusableCSS}
`;
const HomePageLink = styled(Link)`
${reusableCSS}
`;
Usually, you will notice a mixins.js file that contains exports of reusable css block, for example:
// mixins.js
const flexCenter = css`...`
export default { flexCenter };
// usage inside styled components.
${mixins.flexCenter}

How to set padding of Gatsby Link Component to 0px with styled-components

I have made some style changes to the Gatsby Link component using styled-components. However for some reason, when i try to apply a padding of 0px, it still leaves a tiny space (few px) above/below the text (between text and top/bottom border). I used gatsby-default-starter in a codesandbox for the initial build.
HTML/CSS Env (codepen.io):
https://codepen.io/marti2221/pen/mNVJWZ
Gatsby Env (codesandbox):
https://codesandbox.io/s/gatsby-paddinglink-spacing-gedtq
I have tried applying padding via styled-components in a Gatsby environment, as well as a normal html/css environment. When padding is set to 0px on the "a" tag in css/html environment, there is no space around the text, as expected. However when i attempt to add the same padding to the gatsby Link component or even a regular a tag, in a gatsby environment, there is a tiny space between the text and my border. This leads to a larger padding on top/bottom for my BtnLink than expected. I could adjust my padding accordingly, but i would like to know the root cause of this issue.
const StyledLink = styled(Link)`
display: inline-block;
font-family: sans-serif;
border-radius: 25px;
padding: 0px;
text-decoration: none;
border: 2px solid green;
`
const StyledA = styled.a`
display: inline-block;
font-family: sans-serif;
border-radius: 25px;
padding: 0px;
text-decoration: none;
border: 2px solid green;
`
const BtnLink = props => (
<StyledLink {...props}>{props.children}</StyledLink>
)
const IndexPage = () => (
<Layout>
<BtnLink to="page-2">Request Quote</BtnLink>
<StyledA href="page-2">Request Quotes</StyledA>
<Link to="page-2">Link</Link>
</Layout>
)
My desired result is a gatsby Link component that can be styled the same as a regular link element (ie. 0px padding). My result is link text with some spacing around it in the Gatsby environment. When tested with regular HTML/CSS, results are as expected (no spacing when padding is set to 0px)
You've already made a styled(Link) styledComponent, and saved it to the const StyledLink.
const StyledLink = styled(Link)`
display: inline-block;
font-family: sans-serif;
border-radius: 25px;
padding: 0px;
text-decoration: none;
border: 2px solid green;
However, this won't have any affect on a regular gatsby Link component. You still need to render this new StyledLink styledComponent instead of a gatsby Link component if you want to see that styled variation on your page.
const IndexPage = () => (
<Layout>
<BtnLink to="page-2">Request Quote</BtnLink>
<StyledA href="page-2">Request Quotes</StyledA>
<StyledLink to="page-2">Link</StyledLink>
</Layout>
)

PrismJS no line breaks

Not sure if anyone has come across this. I'm using PrismJS syntax highlighter to highlight code. Application is written in Reactjs and what I'm trying to do is inside a WYSIWYG editor I'm wrapping user selected text with pre + code when user wants to insert code block. PrismJS seems to tokenize elements correctly as you would expect:
But as you can probably see from the image above, everything is put into a single line. Rather then nice code block:
I'm not sure what's wrong, using css from prismjs site:
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
#media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #dd4a68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
Here is outputted html:
EDIT:
If adding word-wrap: pre-wrap this is the outcome:
I had a similar issue when initializing the element manually. I stumbled upon this discussion, which had a fix that worked for me: https://github.com/PrismJS/prism/issues/1764
HTML - Load script with flag data-manual:
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js" data-manual></script>
JS - Add the following hook:
Prism.hooks.add("before-highlight", function (env) {
env.code = env.element.innerText;
});
Prism.highlightElement(code);
Working example:
https://codepen.io/Ukmasmu/pen/xxZLwxG?editors=1010
Try to update the CSS file with:
white-space: pre-wrap
https://github.com/PrismJS/prism/issues/1237
In case this is helpful for anyone else, I have a textarea that updates a code block as you type, and this worked for me:
<textarea onkeyup="this.onchange();" onchange="document.getElementById('query-highlighted').textContent = this.value; Prism.highlightAll();"></textarea>
<pre><code class="language-sql" id="query-highlighted"></code></pre>
Namely, I used .textContent = instead of .innerText = (the latter didn't preserve the line breaks as expected).
I was aided by Sever van Snugg's answer and the issue he linked.
1. Activate normalize whitespace plugin
I suggest you activate normalize whitespace plugin and set the break-lines property instead of manipulating prism.css file to using white-space: pre-wrap like this:
Prism.plugins.NormalizeWhitespace.setDefaults({
'remove-trailing': true,
'remove-indent': true,
'left-trim': true,
'right-trim': true,
'break-lines': 60, //max number of characters in each line before break
});
I'm using the above approach in my blog, and it works like a charm. You can adjust the break-lines value according to your preferences of course.
2. Insert a line break tag <br> to break a line at will
Now that you set the break-line property after a certain maximum number of characters, you probably want to break some lines at will for cleaner code. To do so you need to insert a <br> tag where you want to have a break line.
NOTE: if you're using an html parser to parse dynamic content with prism
If you're using a parser to parse you dynamically generated html code as a string (from a database for example) and prims is not parsing your <br> tags you'll have to use before-sanity-check prism hook like this:
Prism.hooks.add('before-sanity-check', function (env) {
env.element.innerHTML = env.element.innerHTML.replace(/<br>/g, '\n');
env.code = env.element.textContent;
});
before highlighting, what the above code does is replacing <br> tags with \n since prism can't parse <br> as a line break.
Similar to the answer by Sever van Snugg, I use the following solution where the forEach loop highlights all the code nodes according to the style rules of the Prism CSS stylesheet used (because I have several code tags on a single page). I locate these scripts in the bottom of my HTML body:
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/prism.min.js" data-manual></script>
<script>
Prism.hooks.add("before-highlight", function (env) {
env.code = env.element.innerText;
});
code = document.getElementsByTagName('code');
Array.from(code).forEach(el => { Prism.highlightElement(el) });
</script>
I tried to mixed Markdown and Prismjs the trick is to replace '\n' with '\r\n' to keep breaklines.
from bs4 import BeautifulSoup
...
code_tag = soup.new_tag('code class="lang-%s"' % lang)
code_tag.string = code.string.replace('\n','\r\n')
code.replaceWith(code_tag)

How to change font for the CodeMirror editor

I am trying to change font-family and font-size of my CodeMirror editor. I tried changing it by setting the according CSS attributes but it does not seem to work for me:
.codemirror-textarea {
font-family: Arial, monospace;
font-size: 16px;
}
Do I have to import something in order to achieve this or might I have to edit the libraries CSS file directly? What am I doing wrong?
Try setting the CSS on:
.CodeMirror {
font-family: Arial, monospace;
font-size: 16px;
}
This selects the element that contains all the formatted code.
Just to follow-up on the accepted answer, the version of CodeMirror I'm using (5.55.0 at the time of posting) requires a wildcard:
.CodeMirror * {
/* ^
*/
font-family: Arial, monospace;
font-size: 16px;
}
Or add an extension
const customTheme = EditorView.theme({
'&': {
font:"'JetBrains Mono', monospace",
}
})
const startState = EditorState.create({
doc: page.text,
extensions: [
customTheme,
// ...
]
})
Or, like this if you want to do it from JavaScript:
editor.getWrapperElement().style["font-size"] = size+"px";
editor.refresh();

Categories