pshihn / math-ml Goto Github PK
View Code? Open in Web Editor NEWMathML implementation using custom elements
License: MIT License
math-ml's People
Contributors
Stargazers
Watchers
math-ml's Issues
Upgrade to released lit-element
We changed the package name from @polymer/lit-element to just lit-element.
Hidden math-ml does not recalculate width
When I try to use the math-ml component in a tooltip that starts as hidden the component calculates the wrong width (maybe the width of math-frac?), I'm trying to find a way to externally trigger a re-render, no luck so far but might be possible. Regardless it would be good to somehow watch for display state of a parents and re-render/calculate width when needed automatically.
See animation and matching example code. The end result in the two tooltips are different because one of them starts with display: none.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
.tooltip {
position: absolute;
top: 5vw;
left: 5vw;
}
.tooltip:last-of-type {
left: auto;
right: 5vw;
}
.tooltip__container {
max-width: calc(85vw / 2);
background: #fff;
border: 1px solid #000;
padding: 1rem;
border-radius: 0.5rem;
box-sizing: border-box;
overflow: auto;
}
.mathml-container {
overflow: auto;
}
</style>
<h1>Static position</h1>
<div class="mathml-container">
<math-ml display="block">
<math-frac>
<math-n>1</math-n>
<math-row>
<math-n>1</math-n>
<math-o>+</math-o>
<math-sup>
<math-i>e</math-i>
<math-row>
<math-o>-</math-o>
<math-row>
<math-o>(</math-o>
<math-n>1.713</math-n>
<math-i>E</math-i>
<math-o>+</math-o>
<math-n>0.847</math-n>
<math-i>A</math-i>
<math-o>+</math-o>
<math-n>0.607</math-n>
<math-i>R</math-i>
<math-o>+</math-o>
<math-n>1.417</math-n>
<math-i>V</math-i>
<math-o>+</math-o>
<math-n>2.058</math-n>
<math-i>S</math-i>
<math-o>+</math-o>
<math-n>1.208</math-n>
<math-i>H</math-i>
<math-o>+</math-o>
<math-n>0.089</math-n>
<math-i>T</math-i>
<math-o>-</math-o>
<math-n>4.766</math-n>
<math-o>)</math-o>
</math-row>
</math-row>
</math-sup>
</math-row>
</math-frac>
</math-ml>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="tooltip" style="display: none;">
<div class="tooltip__container">
<h1>Open on click</h1>
<div class="mathml-container">
<math-ml display="block">
<math-frac>
<math-n>1</math-n>
<math-row>
<math-n>1</math-n>
<math-o>+</math-o>
<math-sup>
<math-i>e</math-i>
<math-row>
<math-o>-</math-o>
<math-row>
<math-o>(</math-o>
<math-n>1.713</math-n>
<math-i>E</math-i>
<math-o>+</math-o>
<math-n>0.847</math-n>
<math-i>A</math-i>
<math-o>+</math-o>
<math-n>0.607</math-n>
<math-i>R</math-i>
<math-o>+</math-o>
<math-n>1.417</math-n>
<math-i>V</math-i>
<math-o>+</math-o>
<math-n>2.058</math-n>
<math-i>S</math-i>
<math-o>+</math-o>
<math-n>1.208</math-n>
<math-i>H</math-i>
<math-o>+</math-o>
<math-n>0.089</math-n>
<math-i>T</math-i>
<math-o>-</math-o>
<math-n>4.766</math-n>
<math-o>)</math-o>
</math-row>
</math-row>
</math-sup>
</math-row>
</math-frac>
</math-ml>
</div>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<button>Open tooltip</button>
<script>
const button = document.querySelector('button');
const tooltip = document.querySelector('.tooltip');
button.addEventListener('click', () => {
tooltip.style.display = 'block';
});
</script>
<div class="tooltip">
<div class="tooltip__container">
<h1>Always visible</h1>
<div class="mathml-container">
<math-ml display="block">
<math-frac>
<math-n>1</math-n>
<math-row>
<math-n>1</math-n>
<math-o>+</math-o>
<math-sup>
<math-i>e</math-i>
<math-row>
<math-o>-</math-o>
<math-row>
<math-o>(</math-o>
<math-n>1.713</math-n>
<math-i>E</math-i>
<math-o>+</math-o>
<math-n>0.847</math-n>
<math-i>A</math-i>
<math-o>+</math-o>
<math-n>0.607</math-n>
<math-i>R</math-i>
<math-o>+</math-o>
<math-n>1.417</math-n>
<math-i>V</math-i>
<math-o>+</math-o>
<math-n>2.058</math-n>
<math-i>S</math-i>
<math-o>+</math-o>
<math-n>1.208</math-n>
<math-i>H</math-i>
<math-o>+</math-o>
<math-n>0.089</math-n>
<math-i>T</math-i>
<math-o>-</math-o>
<math-n>4.766</math-n>
<math-o>)</math-o>
</math-row>
</math-row>
</math-sup>
</math-row>
</math-frac>
</math-ml>
</div>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<script src="https://unpkg.com/mathml-elements@latest/dist/bundled/mathml.min.js"></script>
</body>
</html>
Use a different element prefix rather than m-
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.