Giter Club home page Giter Club logo

katex's Introduction

Android Arsenal Stable

A KhanAcademy Katex based Library for Rendering math faster in various Android Devices. This a View which is created from extending webview. This view allows you to render latex in your android devices. It can load normal text, text with latex and latex alone. The only thing you have to make sure is your latex should be enclosed inside either $your latex formula$ or $$your latex formula$$. This will also allow you to beautify your formula text by setting color and text size.


Accepted Inputs

$x=\frac{1+y}{1+2z^2}$

or

 $$x=\frac{1+y}{1+2z^2}$$

or

 sum of ratios =4+3=7 $=\frac{4}{7}\times560=320$

or

 Data Included inside HTML TAGS
 
 <p>If <span class="latexEle" data-latex="x:35::48:60">$x:35::48:60$</span><span>  </span>, find the value of <span class="latexEle" data-latex="x">$x$</span><span>  </span>.</p>

Setup

Dependencies
{
  implementation 'in.hourglass.mathrender:katexmathview:1.0.3'
}

Attributes supported

 setTextColor          -> Allows you to beautify your latex with specific color of your choice
 setTextSize           -> Allows you to set text size of the latex displayed on screen
 setViewBackgroudColor -> set the background color of the view.
 setClickable  
   i.True     -> Setting this to true will allow KatexMathview to act as Textview and it will also intercept parent layout touchevent useful to register click 
   when this view is used with List,Recyclerview.
   ii.False   -> Setting this to false will make katexMathvview act as an webview with zoom in controls etc. 

Adding to your XML Layout

    <katex.hourglass.in.mathlib.MathView
      app:setTextColor="@color/primary"
      app:setTextSize="14sp"
      app:setClickable="true"
      app:setText="@string/single_formula"
      android:layout_gravity="center"
      android:layout_width="match_parent"
      android:layout_height="wrap_content" />

Adding at runtime

    MathView mathView = new MathView(getApplicationContext());
    mathView.setClickable(true);
    mathView.setTextSize(14);
    mathView.setTextColor(ContextCompat.getColor(getApplicationContext(),android.R.color.white));
    mathView.setDisplayText(getResources().getString(R.string.runtime_formula));
    mathView.setViewBackgroundColor(ContextCompat.getColor(getApplicationContext(),android.R.color.black));
    parent_layout.addView(mathView);

Demo

demo_katex_list_200 demo_katex_layout_200 demo_katex_runtime_200

Sample code is available under the app module, in this same repo

License

 The MIT License (MIT)

 Copyright (c) 2017 Lingaraj Sankaravelu

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:

 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.

 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.

katex's People

Contributors

brunorce avatar lingarajs avatar lingarajsankaravelu 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  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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

katex's Issues

Need to know how to make the Katex inline

Hello developer,
First of all thanks a lot for developing this for Android. My app has lot of katex code which is fetched from server. This app helps me to show them quickly without depending on the server to decode and convert it to image.
I have a request though, can I show the katex equations and notations inline while the string is in $.....$ format?
Please let me know how to do that. Thanks again.

Getting text from formula

Hello, how can I get text from MathView formula? I can't find necessary method, which can help me. I'm about analogue of getText().toString() for TextView

WebView errors

Hi again,

this Webview is having a lot of errors, simply by launching it. Even with try-out code from either "Adding to your XML Layout" or "Adding at runtime". Just adding this into app causes:

W/art: Attempt to remove non-JNI local reference, dumping thread
W/chromium: [WARNING:resource_bundle.cc(285)] locale_file_path.empty()
E/libEGL: validate_display:255 error 3008 (EGL_BAD_DISPLAY)
E/libEGL: validate_display:255 error 3008 (EGL_BAD_DISPLAY)
E/BluetoothAdapter: Bluetooth binder is null
E/DataReductionProxySettingListener: No DRP key due to exception:java.lang.ClassNotFoundException: com.android.webview.chromium.Drp
W/art: Attempt to remove non-JNI local reference, dumping thread
W/AwContents: onDetachedFromWindow called when already detached. Ignoring
D/KhanAcademyKatexView: Hex Color:#000000
W/chromium: [WARNING:data_reduction_proxy_config.cc(423)] SPDY proxy OFF at startup


        [ 12-21 21:26:51.490  3641: 3708 D/         ]
        HostConnection::get() New Host Connection established 0x9c7e0f90, tid 3708
W/BindingManager: Cannot call determinedVisibility() - never saw a connection for the pid: 3641
E/emuglGLESv2_enc: device/generic/goldfish-    opengl/system/GLESv2_enc/GL2Encoder.cpp:s_glVertexAttribPointer:290 GL error 0x501

Any ideas?
Thanks

Math Expression rendering Issue using HTML

Hello,

I am rendering math expression using the HTML content. The math expression is not rendering properly. I have verified the math xpression in https://katex.org/ and it's showing properly in this website.

However, when I use the expression with the html content, it's messed up. Here is the math expression,

x = \begin{cases} a &\text{if } b \ c &\text{if } d \end{cases}

Attached the screenshot on how it's rendering,
mathview

Below is the image for html content I have used:
htmlmath

Here is the correct mathview rendered in http:katex.org/
CorrectMAthView

Awaiting your response for this problem. I have to render the math expression only as HTML content. Please reply soon.

failed to parse matrix expressions

"KaTeX auto-render: Failed to parse M = \matrix{~ & x & y \cr A & 1 & 0 \cr B & 0 & 1 \cr} with ", source: file:///android_asset/katex/contrib/auto-render.min.js

<img /> tag not working

I'm trying to show an image in MathView, but it is not getting rendered.

Content passed in setDisplayText() method -

<img src="http://some/publicly/available/image.png" />

Version - 1.0.3

Gradle : could not find library

Could not find in.hourglass.mathrender:katexmathview:1.0.3. Required by: project :app Search in build.gradle files
Gradle is unable to find the library and I am not able to use this.

Font Size issue in android

Error Log:

E/AndroidProtocolHandler: Unable to open asset URL: file:///android_asset/themes/style.css

how can i set coustom font in katex view

I am using this library in my application I need to use another font so can I use that other font?
if can I customize font then let me know any document or some method for that.

Thanks & Regards
Mehul Tank

HorizontalScrollView

I noticed that there is a vertical scrollview already implemented in this MathView. Is horizontal scrolling possible too?
I played around with tons of parameters but I couldn't figure out how to achieve horizontal scrolling. Unfortunately, putting the MathView in a HorizontalScrollView didn't seem to work neither.
I can see a horizontal scrollbar if I press the plus or minus sign that shows up during vertical scrolling, but the scrollbar and the text don't move.

Any working examples or advice appreciated.

Add mathview examples

Contains sample code on how to use mathview in 1

  1. Recyclerview and in layout .
  2. Adding mathview at runtime.

Vertical/Horizontal Scrolling, Zoom etc not working

Hello,
This development is really helpful and its awesome so far.
But it needs some horizontal,vertical scrolling and zooming control as webviews.
My settings: mathView.setClickable(false);
I tried:
mathView.getSettings().setSupportZoom(true); mathView.getSettings().setBuiltInZoomControls(true); mathView.setHorizontalScrollBarEnabled(true); mathView.setVerticalScrollBarEnabled(true);

None of them seems working.
However if I add MathView as achild of Nested Scrolling view only vertical scrolling work. But I need webview like scrolling and zooming support.
If you can help me I will be highly obliged.
Thank you.

Loading latex equations

Is there a way to make the view render latex equations faster when loading content from a local database?Also any way to get the height of the loaded content,OnPagefinished() does not work with the view?

Disable Zoomin controls

Description

  • Is there a way to disable these zoom in controls that usually appear on web views, they are kind of irritating
    Screenshot_20220414_171032_com KH69 passmath debug

Expression support

Hi,

At first - nice work, I really like your mathview.
However, I would like to know which expressions does it support. I tried several examples from katex and nearly one third was invalid.
Some, such as Delimiters worked fine, but Accents were one big error. Especially over-, under- expressions.

Is it a bug or it just supports only a part of KaTeX?
Thanks

Pinch to zoom and scroll not working for MathView

I am using your mathview to display long content with formula. The content gets displayed correctly, but i am not being able to scroll the webview. I've tried adding the view at rumtime and also by xml, but scrolling and pinch and zoom is not working.

mWebView.setClickable(false); mWebView.setTextSize(16); mWebView.setTextColor(ContextCompat.getColor(getApplicationContext(),android.R.color.black)); mWebView.setViewBackgroundColor(ContextCompat.getColor(getApplicationContext(),android.R.color.white)); mWebView.getSettings().setLoadsImagesAutomatically(true); mWebView.setVerticalScrollBarEnabled(true); mWebView.getSettings().setSupportZoom(true); mWebView.getSettings().setBuiltInZoomControls(true); parentLayout.addView(mWebView);

I have also tried these attributes through xml, but scroll and zoom dosen't work.
Pls can you tell me whether it's an issue in your library or a problem in my implementation.

Also, i have checked your library code, and it shows, while calling the MathView constructor the below function gets called. But these attributes can also be overwritten when i explicitly call them, like what i did in the above code, right?
private void configurationSettingWebView() { getSettings().setJavaScriptEnabled(true); getSettings().setAllowFileAccess(true); getSettings().setDisplayZoomControls(false); getSettings().setBuiltInZoomControls(false); getSettings().setSupportZoom(false); getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE); }

Please can you help me a bit, as to where i'm going wrong?

loadData() gets called multiple times

you can modify setDisplayText to avoid unnecessary reloads.

setDisplayText(String text, int size, int color) { this.text_size = size; this.text_color = color; this.display_text = formula_text; loadData(); }

Katex degree sign

Hello, At first nice work!

I am using Katex MathView in my andorid application and have some issues with despaying the degree sign, however all the other stuff and sumbold are incredibly working!

I have a function which takes as input the actual math foprmula as a string and surround it with '$$' so I don't have to do it for each formula superately. However, when it come to degree is not working for some reason, but on the katex editor works fine (https://khan.github.io/KaTeX/)

The syntax that I am using is the following:

String formula;
private String addSign(String formula) {
        String prefixSuffix = "$$";
        return prefixSuffix + option + prefixSuffix;
    }
formula = addSign("50\degree");

The output is -> $$50\degree$$ instead of 50°

Does it work with Kotlin code?

I have an app written in Kotlin and I would like to incorporate Katex into it. However, some reason adding the dependency is not enough. Could you please help me if there are additional settings needed to make it work.

Thanks

Lines in MathView.java that are not used

The variables start and end get declared in private String getOfflineKatexConfig() (in line 132). Did the developers forget to add them to String offline_config?

String start = "<html><head><meta http-equiv='Content-Type' content='text/html' charset='UTF-8' /><style> body {"+
        " white-space: nowrap;}</style></head><body>";

    String end = "</body></html>";

Katex fails to parse table commands

Let me begin by appreciating your effort on this library. Its one of the best MathView library for android. Thank you.
But i observed that the library does not render table even with HTML tags. I am also using these commands below to create latex table
\begin{tabular}{|l|c|c|c|c|c|c|c|}
\hline
Marks & 2 & 3 & 4 & 5 & 6 & 7 & 8 \ \hline
No. of Students & 4 & 2 & 5 & 2 & 4 & 1 & 3 \ \hline
\end{tabular}

Please help.

frac divider not rendering however above works?

Hi. This was working perfect. But since last few days the \frac does not rendering the divider but \above 1pt works. Any suggestion how it got messed up? I have removed all my css but still. I tried searching but no one seems to have such issue before. Its working perfect in the katex website tho. I have tried removing all my css files from the document but still having same issue.
This is the math I am trying to render
\begin{aligned}&=\frac{1}{2\cosec^260\degree(cos^260\degree-3\cos60\degree+2)}\\&=\frac{1}{2\times\frac43\times(\frac14-\frac32+2)}\\&=\frac{1}{2\times\frac43\times(\frac14+\frac12)}\\&={1 \above 1pt 2}\end{aligned}
Screenshot_2020-05-03-12-08-21

Equation not rendering properly. In case of long equations. How to move equation to the next line if i don't want to use horizontal scrolling. Also latex syntax => /cancel not working

long equation like => f(x)=\frac d{dx}{(100+4x)}^{\textstyle\frac12}=\frac12{(100+4x)}^{\textstyle\frac12-1}\;\cdot\frac d{dx}(100+4x)

My Mathview width is "match_parent" and on smaller screens its starting horizontal scrolling
but i want remaining part of this equation in new line instead of horizontal scrolling.

Also

equation : \angle12;=;\mathrm\pi23;=;12;+;\cancel{34}

This equation is working fine online but not working with this lib MathView

Patches on WebView

Not all of my MathView texts contain Latex (most do). This is the screenshot of one passage which does not have any Latex tags and it is being rendered like this. What could a possible fix be?
image

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.