Hello is it possible to have different scale for inline equations and block equations?
I have scale at 150 % because of inline eq. - I need them big. But then equations that are in block are a way too large.
Can I set scalling individually for inline and block?
For $ \tech $ it would be bigger then for $$ \tech $$
MathJax.Hub.Config({
"HTML-CSS": {
scale: 150,
},
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
},
});
There is nothing built in for this, but you could use something like
<script type="text/x-mathjax-config">
MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {
var TEX = MathJax.InputJax.TeX;
var PREFILTER = TEX.prefilterMath;
TEX.Augment({
prefilterMath: function (math,displaymode,script) {
if (!displaymode) {math = "\\large{"+math+"}"}
return PREFILTER.call(TEX,math,displaymode,script);
}
});
});
</script>
to add \large in front of every in-line math expression (and set the scaling back to 100%).
If the in-line math isn't large enough, then then may be something in your CSS or your font settings that is causing that. For example, if you are having to use <code> around the math to prevent your mathematics from being tampered with by some markup engine, then the font associated with <code> elements will be the one that controls the size of the math (rather than the text that surrounds it). That could be controlled by the CSS for code blocks, but it can also be set in most browsers as a separate font. It seems that most browsers are configured with that font being smaller than the regular font (I don't really understand why) and so that could be causing your problem as well.
Related
I am wondering if it is possible to do a block transform that uses a createBlock function that can set a className on a block. I also wonder if a block transform that uses a createBlock function can target a block variation.
I am working on a WordPress shortcode block transform and have slowly figured out how to make it work (see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-transforms/#shortcode). The code so far will allow you to copy and paste into the WordPress editor (I think you have to use right click and paste match styles {let me know if that is also wrong}) and will create a group with 2 paragraphs inside it. The last thing I am trying to figure out is if I can apply a box shadow block style (that is already registered) to the group during the transform. Currently I am trying to do that with className and have tried style, styles, etc...) I have tried to look through source code and many documentation pages, but I am not finding if that is possible. I was trying to just do it with className and it doesn't appear to work.
const transforms = {
from: [
{
type: 'shortcode',
tag: ["shadow"],
priority: 1,
transform: ( attrs, shortcodeObj ) => {
return createBlock( 'core/group', { className: "is-style-box-shadow" }, [
createBlock( 'core/paragraph', { content: attrs.named.heading }),
createBlock( 'core/paragraph', { content: shortcodeObj.shortcode.content })
] );
}
}
],
};
And this is the shortcode to paste into the editor
[shadow heading="Heading Test"]
This content should be accessible in the transform
[/shadow]
Alternatively, another solution would be to transform to a block variation that already has the block style defined, but I am not finding if that is possible either. Any advice would be really helpful to trying to perfect copy and paste into WordPress.
Currently I'm trying to add an animation to a page of a few shooting stars flying across the screen. I want the star to appear and end at certain percentages of the available screen to make it responsive and visible on any device. However when I try to do this, my values seem to default to 0px rather than the percentage that I am passing into my tailwind.config.js from my React Component. The values work if I pass in pixels, but as I mentioned, I would rather do percentages so that it can work well on any screen.
Currently, I am passing in my desired percentage values using this method with an alteration to make it React compatible like this:
style={{"--startingX":props.startingX}}
I am currently using NextJS and TailwindCSS to attempt to make this.
Here are (what I believe are) the relevant files:
/components/shootingStar.js
export default function ShootingStar(props) {
return (
<div>
<div style={{"--percentage":props.startingX}} className="absolute animate-star">
<div className="transform absolute top-2/4 ..."></div>
<div className="absolute top-full left-2/4 ..."></div>
</div>
</div>
)
}
animation: 'star' is the animation in question, inside of keyframes I created my custom animation.
tailwind.config.js:
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
fontFamily: {
'Quicksand': ['Quicksand', ...defaultTheme.fontFamily.sans],
},
'animation': {
...
star : "star 3s linear infinite"
},
'keyframes': {
...
star: {
'0%' : {
transform : 'translateX(var(--percentage)) translateY(0px) rotate(235deg)',
'opacity': '50%'
},
'75%' : {
'opacity' : '100%'
},
'100%' : {
transform : 'translateX(350px) translateY(500px) rotate(235deg)',
'opacity' : '0%'
}
}
}
},
},
plugins: [],
}
index.js
return (
//This div is the parent div to the whole page which is why I included it.
<div className="bg-gradient-to-tl from-blue-900 to-black overflow-x-auto h-screen w-screen ">
<ShootingStar startingX={'25%'} startingY={'25%'} endingX={'500px'} endingY={'500px'}</ShootingStar>
{The remaining shooting stars would eventually get created here}
</div>
...
)
When the animation is at 0%, I would like my star component to start at a specified X% of my screen (for example if I pass in 25% to my percentage var, I would like it to start 1/4 of the way into the screen from the left hand side of the window.)
If this is possible, I plan to expand this for the starting Y value and the ending values of X & Y as well which is why I have those props passed in.
If I pass in 25% to my percentage var, my starting value is at the top left of the screen (or 0). and allows the animation to run. If I try to hardcode percentage values into my Keyframe animation, the animation does not occur since all of the values are technically defaulting to 0.
I am expecting the animation to start at 1/4 of the way in from the left hand side.
I feel as if I'm doing something slightly wrong that won't allow me to make this animation possible but I am not entirely sure what that would be.
I figured out why my animation was stuck in the top left after further research. Keyframe animations take the height and width specifications of the component that is being animated, and do not inherit their parent's height or width (as I initially thought they did). Because I had not specified a height or width for my component it could not move across the screen as I originally wanted it to.
For anyone who might run into this as I did make sure you are setting the height and width of your components to allow your animation to go through your component. Otherwise, if you want it to run through your entire viewport, use vh rather than % when setting your animation values.
Regardless, I decided to opt for viewport since it better fits my use case.
I'm having a little bit of trouble trying to show some font awesome icons. I have some text that is written in json through a rakefile, and i am trying to incorporate a font awesome icon within the text, but having troubles because the text is in json, I was wondering if someone could take a quick look at it and help me out. The icon is not appearing, however within the dev tools, there is extra blank space where it should be appearing.
I am using haml, with angular on the front end. I don't think I am needed to show the controller for this. I also, did sub out what i really have with deez nuts.
The area in my rakefile is so
{
"partial":"message",
"params":{
"primary": true,
"icon": "<i class='fa fa-odnoklassniki'></i>",
"body":" With Deez Nuts as your president, you can have the full assurance of knowing that your country will be awesome "
}
},
and the haml file that should render this is here
%div{ 'ng-if' => 'option.params.primary' && 'option.params.icon'}
%div{ 'ng-include' => "'/assets/ng/features/politicians/satire/presidents.html'" }
Your html is probably stripped by angular. Inspect the output to make sure. You can add this filter to your app to render trusted html:
.filter('trustedHtml', ['$sce', function($sce){
return function(text) {
return $sce.trustAsHtml(text);
};
}])
and than you can apply it to any data: {{foo | trustedHtml}}
Yes, I have been here: CSS Sprite not working
No, I don't get it. What does he mean by 'points'?:
"In other words:
For each ID value, apply 100 points
For each class value (or pseudo-class or attribute selector), apply 10 points
For each element reference, apply 1 point"
What are these 'points'? I read the articles and I get that there is order in specifying CSS codes, but I still don't understand. Right as this is I am only getting the very first sprite in the set. FYI-I used a sprite generator. (This one to be exact)
You can view the source code here. I would suggest zooming in on your browser to see everything properly.
Ricky: The img tag is occluding the background. I recommend changing it to a div. Also, you didn't include the NOS object in your code. Here's what I came up with:
<script>
var NOS = {
itemno: 0,
menuClasses: [
'img-blog',
'img-files',
'img-forums',
'img-login',
'img-logout',
'img-mail',
'img-news',
'img-profile',
'img-reg',
'img-settings',
'img-shop',
'img-status'
],
toggle: function() {
$('#menuimg').removeAttr('class').addClass(function() {
++NOS.itemno;
if (NOS.itemno > NOS.menuClasses.length - 1) {
NOS.itemno = 0;
}
return NOS.menuClasses[NOS.itemno];
});
}
}
</script>
Is there a more efficient way of declaring and using these (very similar/repetitive) CSS classes:
div.rounded20
{
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
div.rounded15
{
-webkit-border-radius:15px;
-moz-border-radius:15px;
}
Say maybe with something along the lines of:
div.rounded(#Y)
{
-webkit-border-radius:#Ypx;
-moz-border-radius:#Ypx;
}
And the actual class usage being
<div class="rounded(15)" ...>
Any suggestions are welcomed, including using jquery or an alternate styling method...
you should look at sass/compass solutions which are designed to do exactly that. They also have arithmetic operations and support for variables and colors.
i don't believe there's a way to do that with straight css, as it is static. however, there's definitely a way to do it with jquery. you can set a named function, say SetRoundedCorners(element, radius) and do something like this:
function SetRoundedCorners (element, radius) {
$(element).css("-webkit-border-radius:" + radius +";
-moz-border-radius:" + radius +";");
}
$("#myelement").click(function(){
SetRoundedCorners(this, someRadius);
});
haven't tested it, but something along those lines should work. good luck!
EDIT: There's also a jquery function you could use to round the corners:
$(document).ready(function(){
$("#box1").corner();
});
which can be found here: http://www.malsup.com/jquery/corner/
Maybe something like this...
HTML:
<div class="rounded 15"></div>
<div class="rounded 45"></div>
jQuery:
$("div.rounded").each
(
function()
{
// Calculate the radius as the number at the end of the class name.
var radius = $(this).attr("class").replace(/^.*?(\d+)$/, "$1");
// Set both CSS properties to the calculated radius.
$(this).css({"-webkit-border-radius": radius + "px", "-moz-border-radius": radius + "px"});
}
);
I use a CSS compiler... that basically generates your CSS files for you. The one I use is proprietary but it works very similar to this one (PHP)
By using a compiler you can define variables, loops, add/subtract/multiply etc. as well as (if you are hardcore) build dynamic color palletes by manipulating the RGB of your "known" colors.. e.g. if you want a color that is 10% lighter, 50% darker, or the inverse.