{"id":13717243,"url":"https://github.com/parsegon/math-css","last_synced_at":"2025-05-07T07:30:38.522Z","repository":{"id":85362816,"uuid":"45989426","full_name":"parsegon/math-css","owner":"parsegon","description":"Easy way to represent math by a few lines of HTML via CSS. ","archived":false,"fork":false,"pushed_at":"2017-08-15T17:27:24.000Z","size":1146,"stargazers_count":136,"open_issues_count":1,"forks_count":14,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-08-04T00:13:12.189Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/parsegon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-11-11T15:19:13.000Z","updated_at":"2024-07-03T15:54:03.000Z","dependencies_parsed_at":"2023-04-01T05:49:52.513Z","dependency_job_id":null,"html_url":"https://github.com/parsegon/math-css","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parsegon%2Fmath-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parsegon%2Fmath-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parsegon%2Fmath-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parsegon%2Fmath-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/parsegon","download_url":"https://codeload.github.com/parsegon/math-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224573347,"owners_count":17333802,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T00:01:19.777Z","updated_at":"2024-11-14T05:31:10.168Z","avatar_url":"https://github.com/parsegon.png","language":"CSS","readme":"# MathCSS\n\nA verbose, responsive, and easy way to represent basic math and calculus by a few lines of HTML without the need for a heavier JavaScript library. Built exclusively in CSS using a block-chain technique.  Sister library to: https://github.com/mathexl/chemistry-css\n\n\n\n![Render Example](/example/render7.png)\n\n**New in 2.5.0**\n* Added support for Matrixes\n* Added support for display in white\n\n**What's MathCSS good for?**\n* Quick depictions of integrals, summations, products, and alike.\n* Fast loading time.  MathCSS uses no JS.  None!\n* Scalable, responsive design.  MathCSS is built like a **c**hoo-**c**hoo-**s** train.\n* Special math symbols without looking up the unicode.\n\n\n**Support soon to be added for**:\n* Multi-bounds\n\n\n## Usage\n\n### Getting Started\n\nFirst, add the CSS file to your page:\n\n```HTML\n\u003clink href=\"path/to/math.css\" rel=\"stylesheet\"\u003e\n```\n\nAnd you're ready to go! Documentation is easy as provided below. Simply, add an `equation` attribute to begin as follows (you can\nuse the `mathbox` alias as well):\n\n```HTML\n\u003cdiv equation\u003e\n   \u003c!-- Your equation will go here --\u003e\n\u003c/div\u003e\n```\n\nIf you want the display to be entirely in white, add the class `white` to the\n`\u003cdiv\u003e` tag.  So:\n\n```HTML\n\u003cdiv equation class=\"white\"\u003e\n\u003c!-- Your equation will go here --\u003e\n\u003c/div\u003e\n```\n\n### Integrals, Products, Summations\n\n#### The goal of MathCSS is so that your HTML reads like math. You can easily add `integral`, `doubleintegral`, `tripleintegral`, `product`, `summation` like such:\n\n```HTML\n\u003cdiv equation\u003e\n    \u003cdiv integral\u003e\n\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nTo specify bounds and input, simply use `upperbound`, `lowerbound`, and `of` attributes:\n\n```HTML\n\u003cdiv integral\u003e\n    \u003cdiv upperbound\u003e\n        5x\n    \u003c/div\u003e\n    \u003cdiv lowerbound\u003e\n        39x\n    \u003c/div\u003e\n    \u003cdiv of\u003e\n        35x + 45\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n`upperbound`, `lowerbound`, and `of` will only display correctly when inside `integral`, `doubleintegral`, `tripleintegral`, `product`, or `summation`.  \n\nSince `upperbound` and `lowerbound` attributes are absolute, the order in which you declare them doesn't matter.\n\n\n### Fractions, Derivatives (a special fraction), Partial Derivatives\n\n#### MathCSS has built-in support for `fraction`, `derivative` (short fraction), and `partial derivative`.\n\n```HTML\n\u003cdiv equation\u003e\n    \u003cdiv fraction\u003e\n\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nTo specify top and bottom, simply use `top` and `bottom` attributes:\n\n```HTML\n\u003cdiv fraction\u003e\n    \u003cdiv top\u003e\n        5x\n    \u003c/div\u003e\n    \u003cdiv bottom\u003e\n        39x\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nWhile MathCSS cannot support infinite fraction's within each other, it can go down a scope of 2.  You can embed a subfraction in\na fraction, but not a subfraction in a subfraction in a subfraction due to sizing constraints. For instace, the following code will work:\n\n```HTML\n\u003cdiv fraction\u003e\n    \u003cdiv top\u003e\n\n        \u003cdiv fraction\u003e\n            \u003cdiv top\u003e\n                35y + 4x\n            \u003c/div\u003e\n            \u003cdiv bottom\u003e\n                12x + 4z\n            \u003c/div\u003e  \n        \u003c/div\u003e\n\n        + y\u003csup\u003e2\u003c/sup\u003e +\n\n        \u003cdiv fraction\u003e\n            \u003cdiv top\u003e\n                35x + 4y\n            \u003c/div\u003e\n            \u003cdiv bottom\u003e\n                12z + 4\n            \u003c/div\u003e  \n        \u003c/div\u003e\n\n    \u003c/div\u003e\n    \u003cdiv bottom\u003e\n\n        \u003cdiv fraction\u003e\n            \u003cdiv top\u003e\n                35x + 2x\n            \u003c/div\u003e\n            \u003cdiv bottom\u003e\n                11x + 4\n            \u003c/div\u003e  \n        \u003c/div\u003e\n\n        + 5 +\n\n        \u003cdiv fraction\u003e\n            \u003cdiv top\u003e\n                35x + 4x\n            \u003c/div\u003e\n            \u003cdiv bottom\u003e\n                12x + 4\n            \u003c/div\u003e  \n        \u003c/div\u003e\n\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nIf you ever need to enclose a fraction in a fraction in a fraction, it is optimal to use a de facto (x / y) notation - that helps with readibility anyway due the decreasing sizes of integer.\n\nSince derivatives are technically both a fraction and an operand, they behave like a fraction in MathCSS. For the term that is being derived, just follow the derivative with a `term` tag. For example:\n\n```HTML\n\u003cdiv derivative\u003e\n    \u003cdiv top\u003e\n        x\n    \u003c/div\u003e\n    \u003cdiv bottom\u003e\n        y\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv term\u003e\n    35x + 45\n\u003c/div\u003e\n```\n\nMathCSS also tries to allow users to never have to look up the unicode for common math symbols. Hence, there is a built in partial derivative function, just exclude the special d's.  And yup, `partial derivative` reads just like English, use two words, not one or hyphenated.\n\n```HTML\n\u003cdiv partial derivative\u003e\n    \u003cdiv top\u003e\n        x\n    \u003c/div\u003e\n    \u003cdiv bottom\u003e\n        y\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv term\u003e\n    35x + 45\n\u003c/div\u003e\n```\n\n\n### Limits\n\n#### Creating limits involves just three parts, the variable `variable`, what it is approaching `goingto`, and the term represented by `of`. The following code below would render the limit of x approaching infinity of thirty-five x squared plus twelve x plus nine.\n\n```HTML\n\u003cdiv limit\u003e\n    \u003cdiv variable\u003e\n        x\n    \u003c/div\u003e\n    \u003cdiv goingto\u003e\n        \u003chr infty\u003e\n    \u003c/div\u003e\n    \u003cdiv of\u003e\n        35x\u003csup\u003e2\u003c/sup\u003e + 12x + 9\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Square Roots and Roots\n\n#### You can add square roots easily using the `root` attribute.  You can also specify the degree of the root with `degree`.  Use `of` for the term. The `degree` tag is optional.\n\n```HTML\n\u003cdiv root\u003e\n    \u003cdiv of\u003e\n        35x + 45y\u003csup\u003e2\u003c/sup\u003e + 23\n    \u003c/div\u003e\n    \u003cdiv degree\u003e\n        4\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Vector Brackets\n#### You can add vector wide brackets using `vector` instead of `term`.\n\n```HTML\n\u003cdiv vector\u003e\n    4x, 3\n\u003c/div\u003e\n```\n\n### HR Magic!\n\n#### Using HTML's built in `\u003chr\u003e` tag, we can easily add common math characters into our equation without the messy closing tags.\n\nFor example, if you want to show the integral from the upperbound of infinity to the lower bound of 2 pi, of 35x + 45, simply:\n\n```HTML\n\u003cdiv integral\u003e\n    \u003cdiv upperbound\u003e\n        \u003chr infty\u003e\n    \u003c/div\u003e\n    \u003cdiv lowerbound\u003e\n        2\u003chr pi\u003e + 6\n    \u003c/div\u003e\n    \u003cdiv of\u003e\n        35x + 45\u003chr pi\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nThe above code renders:\n\n![Render Example](/example/render3.png)\n\n\nThe tags `\u003chr pi\u003e` and `\u003chr infty\u003e` will automatically show. The available subclasses range from greek commons, discrete math symbols, and common figures. See the full list below. Simply use `\u003chr [KEYWORD]\u003e` -- no `\u003c/hr\u003e` necessary.\n\n**Operand and Values**:\n\n`partial`, `pm`, `infty`, `approx`, `neq`, `leq`, `geq`\n\n**Discrete Math**:\n\n`forall`, `exists`, `nexists`, `in`, `notin`, `and`, `or`, `cap`, `cup`, `congruent`, `subsetleft`, `subsetright`, `notsubsetleft`, `notsubsetright`, `subsetorequaltoright`, `subsetorequaltoleft`, `notsubsetorequaltoleft`, `notsubsetorequaltoright`\n\n**Greek Letters**:\n\n`pi`, `alpha`, `beta`, `lambda`, `delta` (more coming soon)\n\n### Absolute Value\n\nTo add absolute value, you can either use the `u` tag or use `\u003cspan absolute\u003e` with whatever is being\nabsoluted.  For instance:\n\n``HTML\n\u003cu\u003e-5\u003c/u\u003e + \u003cspan absolute\u003e-5\u003c/span\u003e = 10 \n```\n\n### General Operands\n\nIf you need to add, subtract, multiply, or divide two terms in a sequence, use `add`, `subtract`, `multiply`, `divide`.\n\nNote that these attributes will only display functionally within the general equation tag and not within a integral for spacing reasons.\n\nFor example:\n\n```HTML\n\u003cdiv equation\u003e\n    \u003cdiv integral\u003e\n        \u003cdiv upperbound\u003e\n            5x\u003csup\u003e2\u003c/sup\u003e\n        \u003c/div\u003e\n        \u003cdiv lowerbound\u003e\n            39x\n        \u003c/div\u003e\n        \u003cdiv of\u003e\n            35x + 45\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003cdiv add\u003e\u003c/div\u003e\n\n    \u003cdiv doubleintegral\u003e\n        \u003cdiv upperbound\u003e\n            5y\n        \u003c/div\u003e\n        \u003cdiv lowerbound\u003e\n            3y\n        \u003c/div\u003e\n        \u003cdiv of\u003e\n            35y\u003csup\u003e78\u003c/sup\u003e + 45\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\n### Exponents\n\nIf you want to add exponents, use the standard HTML `\u003csup\u003e\u003c/sup\u003e` tags:\n\n```HTML\n\u003cdiv integral\u003e\n    \u003cdiv upperbound\u003e\n        5x\u003csup\u003e2\u003c/sup\u003e\n    \u003c/div\u003e\n    \u003cdiv lowerbound\u003e\n        39x\n    \u003c/div\u003e\n    \u003cdiv of\u003e\n        35x + 45\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Matrixes\n\nThe inherent complexity of matrixes makes them a bit different syntactically\nin Math.css.  Math.css supports matrixes up to the size of 8 rows and infinite (within reason)\ncols.  First, you need to declare the type of matrix along with the number of rows.  \nDue to the limits of CSS, the amount of rows needs to be statically declared unlike\nthe number of cols.\n\n```HTML\n\u003cdiv matrix two\u003e\n  \u003c!-- content here! --\u003e\n\u003c/div\u003e\n```  \n\nThis will create a matrix of two rows.  The key attributes `three`, `four`,\n`five`, `six`, `seven`, `eight` all work respectively.  \n\nDue to the need to dynamically size the width of entries for long entries,\nwe need to insert things into a matrix on a column to column basis.  \n\nTo make things easy, math.css ships with two different ways of inserting\ncolumns.  The first is the b-a method, which encloses a tags (entries) with\nb tags (cols).  For instance, if I wanted the matrix of two by two rows,\nwith the first row being 6 and 12, and the second row being 4 and 5, we get this:\n\n\n```HTML\n\u003cdiv matrix two\u003e\n  \u003cb\u003e\n    \u003ca\u003e6\u003c/a\u003e\n    \u003ca\u003e4\u003c/a\u003e\n  \u003c/b\u003e  \n  \u003cb\u003e\n    \u003ca\u003e12\u003c/a\u003e\n    \u003ca\u003e5\u003c/a\u003e\n  \u003c/b\u003e\n\u003c/div\u003e\n```  \n\nHowever, this can get tedious given the amalgam of tags necessary.  Therefore,\nyou can instead use the alternate `\u003chr\u003e` method where you separate each entry with\nan `\u003chr\u003e` tag. Therefore, nothing is enclosed.\n\n```HTML\n\u003cdiv matrix two\u003e\n  \u003cb\u003e\n    6\n    \u003chr\u003e\n    4\n  \u003c/b\u003e  \n  \u003cb\u003e\n    12\n    \u003chr\u003e\n    5\n  \u003c/b\u003e\n\u003c/div\u003e\n```\n\n### Choose\n\nIf you want to add probability constructs like n choose k, simply use the `choose` tag, similar to \nhow you would construct a fraction.  Using the tags `top` and `bottom` for each part of the choose. \n\n```HTML\n\u003cdiv choose\u003e\n    \u003cdiv top\u003e\n        4\n    \u003c/div\u003e\n    \u003cdiv bottom\u003e\n        3\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n## License\n\nMIT License: free to use and open source.\n\nWant to add something? Feel free to fork or email me at mathexl@gmail.com.  Or even send me a tweet to @mathewpregasen :).\n","funding_links":[],"categories":["Frameworks / Resources"],"sub_categories":["M"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparsegon%2Fmath-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fparsegon%2Fmath-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparsegon%2Fmath-css/lists"}