Comments (4)
I can see how you might do this with CSS grid or Flexbox and making the Chords have a width of zero, but that doesn't work well where you have sections of chords only as they overlap.
from chordsheetjs.
@paulrobertpine There are some solutions, using flexbox is one of them. Another, simple solution is to use:
.lyrics:after {
content: '\200b';
}
Here is a post that mentions several solutions: https://stackoverflow.com/questions/3416454/how-to-make-an-empty-div-take-space.
Please let me know if this is helpful.
from chordsheetjs.
Thanks, it didn't work but I appreciate the tip! I'll update this once I find a good solution. If you're aware of another example of a site using the HtmlDivFormatter() markup please let me know.
from chordsheetjs.
yep, flexbox! sorry to bug you about this.
from chordsheetjs.
Related Issues (20)
- Support for browser without regex lookbehind HOT 2
- SetCapo doesn't render chords properly HOT 2
- song.transpose not allowing to transpose to different keys with same distance HOT 2
- How to detect the current key? HOT 4
- ChordSheetJS with ChordProject HOT 3
- Contributing: error with yarn test (Windows) HOT 2
- Is it wrong to use Transpose in a song that modulates within a song? HOT 1
- Tab support for ChordPro parsing: PeggySyntaxError: Expected "#", "%", "[", "\\", "]", "{", "|", or "}" but "3" found. HOT 2
- Angular : error build HOT 3
- Add support for parsing minus sign (-) HOT 2
- Font handling : Add support for Non-Monospace fonts for converting to ChordPro HOT 10
- support of chordpro v6? HOT 4
- [Duplicate #955] Non-Monospace fonts support HOT 2
- Support for markup (Pango Markup Language)
- Support for annotations
- Support for delegates
- Add missing meta tags
- Support for conditional directives
- Usage in Angular 16 app results in: Cannot find module 'chord_sheet/item' or its corresponding type declarations. HOT 3
- UltimateGuitarParser to ChordProFormatter generates wrong output HOT 3
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.
from chordsheetjs.