GithubHelp home page GithubHelp logo

ischurov / qqmbr Goto Github PK

View Code? Open in Web Editor NEW
44.0 5.0 10.0 354 KB

Mathematical layout for web and paper

Home Page: http://mathbook.info/qqmathpreview

License: MIT License

Python 77.39% HTML 21.59% Dockerfile 1.01%
layout-engine equations latex python

qqmbr's Introduction

qqmbr

Mathematical layout for web and paper

qqmbr is a publishing engine for mathematical texts that aims on different media: web, mobile and paper.

Highlights

  • Clean syntax, based on indentml markup. It's a mixture of Python-style indent-based blocks and LaTeX-style commands beginning with backslash, see code samples below.
  • Excellent equation support on web and mobile, thanks to MathJax.
  • All what you need to structure your text: different levels of headers, environments (theorem, lemma and so on).
  • References by labels.
  • Preview of equations and definitions on hover (a.k.a. snippets, see example here, look for «Задача Коши»)).
  • Interactive quizes, (see example here).
  • Programmatically generated images embedding (matplotlib and plotly).

View in action

You can look at my Lecture Notes on ODE sources (see e.g. this qqmbr source and its HTML render, in Russian) or at the code sample below.

You can also play with a limited subset of qqmbr features in a live demo.

Inspiration

qqmbr was inspired by various projects and conceptions:

  • TeX and LaTeX for math and backslashes.
  • Python for the importance of indents (and qqmbr is written in Python!);
  • YAML for indent-based markup language;
  • DocOnce for one source to any media approach and some ideas on realization;
  • S-expressions for simplicity (why they have attributes in XML?).

TODO

The following features are on the to-do list:

  • QqLaTeXFormatter that converts qqmbr source code to LaTeX.
  • more layout features:
    • more math environments (gather, multline and so on);
    • admonitions (boxes for warning, notice, question, etc.), like in DocOnce;

You are welcome to participate with pull requests and issue-reporting.

Code sample

This is an example of qqmbr markup. See the live demo.

\chapter Euler's formula
\section Complex numbers \label sec:comlex

One can introduce \em{complex numbers} by considering so-called \em{imaginary unit} $i$, such that:
\equation \label eq:i
    i^2 = -1.
\definition
    \emph{Complex number} is a number of a form $x+iy$, where $x, y \in \mathbb R$.

\section Exponent of complex number \label sec:exp
\theorem \label thm:1
    Let $x$ be real number. Then
    \equation \label eq:main
        e^{ix} = \cos x+i\sin x.
\proof
    Let us recall series for exponent, sine and cosine:
    \align
        \item \label eq:series-exp
            e^z &= 1 + z + \frac{z^2}{2} + \frac{z^3}{3!} + \ldots = \sum_{k=0}^\infty \frac{z^k}{k!}
        \item \label eq:series-sin
            \sin z &= z - \frac{z^3}{3!} + \frac{z^5}{5!} - \frac{z^7}{7!} + \ldots
        \item \label eq:series-cos
            \cos z &= 1 - \frac{z^2}{2} +\frac{z^4}{4!} - \frac{z^6}{6!} + \ldots
    It follows from \ref{eq:i} that
    \eq
        i^k=\begin{cases}
            1 & \text{for } k = 4m\\\\
            i & \text{for } k = 4m+1\\\\
            -1 & \text{for } k = 4m+2\\\\
            -i & \text{for } k = 4m+3
            \end{cases}
    Let us put $z=ix$ into \ref{eq:series-exp}. For even $k$, $(ix)^k$ is real and for odd $k$ it is imaginary. Moreover, the sign alternates when one pass to the next term. It follows immediately that the real part of \ref{eq:series-exp} is equal to \ref{eq:series-sin} and the imaginary part is equal to \ref{eq:series-cos} with substitution $z=ix$.

    This finished the proof of \ref[Euler's formula\nonumber][thm:1].

\chapter Corollary

It follows from \ref[Theorem][thm:1] from \ref[Section][sec:exp] that
\eq
    \sin x = \frac{e^{ix}-e^{-ix}}{2i}.
Therefore,
\align
    \item \nonumber
        \sin 2x &= \frac{e^{2ix}-e^{-2ix}}{2i} = \frac{1}{2i}((e^{ix})^2-(e^{-ix})^2)=
    \item \nonumber
        &\frac{1}{2i}(e^{ix}-e^{-ix})(e^{ix}+e^{-ix})=2\sin x \cos x.

\question
    Express $\cos x$ in terms of exponents. (Click on pencil to check the correct answer.)
    \quiz
        \choice
            $(e^{ix}+e^{-ix})/(2i)$
            \comment
                No, this is complex number!
        \choice \correct
            $(e^{ix}+e^{-ix})/2$
            \comment
                Yes! That's right!
        \choice
            $(e^{ix}-e^{-ix}))/(2)$
            \comment
                No, that's $-i\sin x$.

\exercise
    Express $\cos 2x$ in terms of $\sin x$ and $\cos x$.

qqmbr's People

Contributors

dorofeefff avatar ischurov avatar nicolas-ivanov avatar npmcdn-to-unpkg-bot avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

qqmbr's Issues

Highlight parts of images

It should be possible to highlight a part of an image on hover over special kind of a reference. Something like this:

Let's consider \imref[fig12][point-x][point $x$].

Then on hover on text point $x$, the corresponding point should be highlighted on figure fig12.

Not clear what to do if fig12 is currently not visible. Probably, on mobile we should open it in a modal. Not sure about desktop.

Fix block tags inside special inline tags

The following tests raise Exception

doc = r"""\blocktag Some \inlinetag[Hello \blocktag test]"""
parser = QqParser(allowed_tags={'inlinetag', 'blocktag'})
tree = parser.parse(doc)

and

doc = r"""Some \inlinetag[Hello \blocktag test
\blocktag another test]"""
parser = QqParser(allowed_tags={'inlinetag', 'blocktag'})
tree = parser.parse(doc)

Blocks #2 .

How to use?

This project, that powers ode book, is amazing. Can you please add more info on the README page on how one can render a web page from a *.qq file?

Better equation preview on mobile

Now equation preview (on click/hover over the reference) broke the layout completely on mobile.

IMG_7284

That's due to the fact that equation previews are obtained from the original layout and are usually too wide.

Better TOC and chapter navigation

Current book TOC and chapter navigation is a bit clumsy and easily discoverable. Probably, we have to put TOC on screen permanently (instead of this chapter TOC that is currently on the right?), and add left-right buttons like on gitbook?

Mobile-friendly уравнения не отображаются на iPad

Если зайти с iPad на calculus.mathbook.info и пролистать до Примера 3, то формулу для множества B мы не увидим:

IMG_5330

Но если перевернуть планшет горизонтально, то нужная формула появится:

IMG_5331 (2)

Почему так происходит:

На странице в этом месте расположено два уравнения: long-eq и splitted-eq.

Если ширина экрана <= 768px, то на long-eq вешается свойство display: none.
Если ширина экрана >= 768px, то это свойство вешается на splitted-eq.

@media screen and (min-width: 768px) {
.splitted-eq {
display: none;
}
}
@media print {
.splitted-eq {
display: none;
}
}
@media screen and (max-width: 768px) {
.long-eq {
display: none;
}
}

И так совпало, что у айпадов ширина экрана ровно 768px.
То есть display: none вешается на обе версии уравнения и пользователю не показывается ничего.

Possible fix

    @media screen and (max-width: 768px) {
        .long-eq {
            display: none;
        }
    }

    @media not screen and (max-width: 768px) { 
        .splitted-eq {
            display: none;
        }
    }

Отмечу, что следующее медиавыражение тогда должно оказаться ненужным:

@media print {
.splitted-eq {
display: none;
}
}

Можете также вдохновиться этим stackoverflow.com/questions/41449476/media-queries-running-weird-because-of-non-integer-width

Preview images on click on the reference

It is probably better to open a modal preview of the image on click on its reference rather than scroll the page to that image. After preview is opened, there should be a way to scroll there (to see it in context).

Punctuation detach from the equation

Sometimes when we have a MathJax equation followed by the punctuation near the end of the line, the punctuation is detached and moved to the next line, like it is shown on the screenshot.

Screenshot 2022-08-21 at 15 36 49

It can be fixed by shifting punctuation into the MathJax equation, e.g. writing like $R,$, but probably some better solution exists?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.