Everything is rendered properly in my app, except the superscript and subscript texts.
I tried using tagsStyles to apply custom styles in <sup> and <sub> tags, but I could only change their color or fontsize. I couldn't get them to mimic superscript or subscript properties. lineHeight, textAlignVertical, top all these don't seem to work. Am I using those styles inappropriately?
Any workarounds? Any other library alternative to solve the problem? Anything will do.
Unfortunately, the library you are using may not support superscript and subscript text rendering out of the box, or may have limited options for customizing their display.
One possible workaround is to use Unicode characters for superscript and subscript text instead of HTML tags. For example, you can use the Unicode characters U+207X for superscript and U+208X for subscript. You can then use the Text component in React Native to display the text with these Unicode characters and apply styles as needed.
Another option is to try using a different library for rendering HTML content in your React Native app. You can try this library:
https://github.com/react-native-webview/react-native-webview
import { WebView } from 'react-native-webview';
....
<WebView
originWhitelist={['*']}
source={{
html: `
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>Here is some <sup>superscript</sup> text and some <sub>subscript</sub> text</p>
</body>
</html>
`
}}
/>
Related
I am trying to use functions in dcsubscriber.js:
However, when running the website, the content of dcsubscriber.js is replaced completely by some odd html code:
Update:
I use Admin panel to add html code from Markdown editor
You can use react-helmet
Put your js file inside static folder and use them like this :
<Helmet>
<script crossorigin="anonymous" src="/test.js" />
</Helmet>
I am using browser component to display HTML text in my app. Everything was working fine before, but in recent build the font size displayed in browser component is very small.It works fine on simulator but on device it looks very small. Here is my test case and is tested on iPhone XS , iPhone 7 and iPad.
Form f= new Form();
f.setLayout(new BorderLayout());
BrowserComponent browser = new BrowserComponent();
Container cont = new Container();
cont.setLayout(new BorderLayout());
cont.addComponent(BorderLayout.CENTER, browser);
String data = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns=\"http://www.w3.org/1999/xhtml\"><head><title>Test</title><meta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\" /></head><body><p>Hello World</p></body></html>";
browser.setPage(data, "");
cont.setPreferredH(com.codename1.ui.Display.getInstance().getDisplayHeight()/2);
browser.setPreferredH(com.codename1.ui.Display.getInstance().getDisplayHeight()/2);
f.addComponent(BorderLayout.CENTER,browser);
f.show();
Let me know what is been changed and how I can increase the size of font .
Thanks
I add an info to the Shai's answer about the font size.
Try to add the following meta tags:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="MobileOptimized" content="width" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="cleartype" content="on" />
Hopefully these meta tags fixes the font sizes on real devices. In the CSSes used in web pages, I suggest to use the em as unit to specify the font sizes, because its mobile-device-friendly nature (independent from the dpi of the screen device).
Addendum: to don't confuse, while em is fine for CSSes used in web pages (inside a BrowserComponent), in the Codename One CSSes used to style Components it's better to use mm or pt as unit independent from dpi.
Apple started sending out warning emails to everyone who uses UIWebView so we toggled the switch to use WKWebView. This is something we wrote about a while back here: https://www.codenameone.com/blog/wkwebview.html
You generally shouldn't switch back but you should add a stylesheet to your HTML to explicitly determine the font size. That's the right way to do it on all occasions.
I am not sure this issue is related directly to brunch, but it's the first time I use this framework and first time I see something like this ...
I am trying out brunch/with-react skeleton and there is a little issue with my DOM elements.
I changed my body's background color as follow, in app/styles/application.css
body {
background-color: #cfcfcf
}
Here is the result
DOM rendering
I am using Chrome so I went ahead and inspected every elements.
I cannot find any element responsible for this behavior.
Your html pages says:
<link rel="stylesheet" type="text/css" href="/app.css">
But your css filename is application.css
I am trying to find out why my Lightbox is not showing 0.8 opacity and no close button or outer container for the image. I do get a black background and the image. I, to the best of my knowledge, followed the instructions. Here is a link to my page, http://www.crawfordcountyhistoricalsociety.org/Pages/Sale.html only the first item for sale is set for lightbox.
I am using Dreamweaver CS4 and have a template for the pages to keep the banner,background and footer the same.
Looks to me like you have the paths to your jQuery, lightbox js, img and css files incorrect. They're pointing to crawfordcountyhistoricalsociety.org/Pages/, while it looks like they're actually located at crawfordcountyhistoricalsociety.org/. Try changing your import lines in the page source from:
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
To:
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/lightbox-2.6.min.js"></script>
<link href="/css/lightbox.css" rel="stylesheet" />
(In other words add a leading slash to indicate they're at the root of your folder structure)
I've been fiddling with a partial trust XBAP - how can I change the icon shown in the IE-tab and the title (aside from changing the assembly-name in the project properties)?
I would also like to change what is shown in the Internet header (right now it shows the address of the XBAP.
I had a similar issue where I could not change the title in IE 10 (this was the first stack overflow answer that comes up when you Google "xbap title"). I found the solution here:
In code, set Application.Current.MainWindow.Title to the title you want to show. This worked for me, hopefully this will be helpful for the next guy.
Load your XBAP from a HTML page using an IFRAME. In the HTML page add a title and icon.
Something like this:
<html>
<head>
<title>This is my title</title>
<link rel="shortcut icon" href="http://wherever.com/icon.ico">
</head>
<body>
<iframe location="something.xbap"
style="width:100%; height:100%; border:0; overflow:auto" scrolling="no"></iframe>
</body>
</html>
This is simplified from code that I actually use, except due to some other requirements I'm giving the iframe an id and setting its location using JavaScript in the body's onload event. I assume the above will work just as well.