I'm working on a site which is in Arabic (default text direction is "right to left") and I'm using "Noto Naskh Arabic" font for arabic text and Latin-Modern for latin text which I'm definig by the following css code:
*[dir="ltr"] {
font-size: 20px !important;
font-family:"Latin-Modern";
}
Users may need to enter mathematical equations and I'm using 'Mathjax' for this purpose, the problem is that:
Fractions are displayed without the horizontal line
Equations are displayed with different sizes between arabic and latin paragraph as when I write
some text in english here $\int f(x)dx $
I have come to a slution to the first problem using css
span:lang(ar).MathJax {
direction: ltr !important;
font-family:"Latin-Modern";
}
For the second problem, I need to know if there is a way to automatically specify scale separately for equation which are embedded in Arabic paragraph end those embedded in English paragraph.
It seems like the main issue is that you have to scale in the first place. I'm guessing you did that because MathJax is rendering too large in RTL contexts.
It looks like MathJax is having issues detecting the correct ex-height of the surrounding font. That can be caused by various problems, from fonts not having a correct ex-height to bad CSS interactions; from a quick test it's not the fonts.
As a workaround you can disable font matching in the MathJax configuration
MathJax.Hub.Config({
"HTML-CSS": {matchFontHeight: false},
SVG: {matchFontHeight: false},
CommonHTML: {matchFontHeight: false}
});
You should then also disable the scaling you applied.
Related
I'm loading a .ttf file via CSS and definition of font-face.
However, in the game the text renders blurry.
This is what I tried first (the font name is truetypetest):
this.sampleText = this.scene.add.text(0, 0, 'Almost clear text', { fontFamily: 'truetypetest' });
This actually renders almost clearly:
Almost clear text
There is still some sort of lighter 'shadow' if you look carefully. Setting the resolution arbitrarily high via the below gives what I want:
this.sampleText = this.scene.add.text(0, 0, 'Clear text', { fontFamily: 'truetypetest' }).setResolution(10);
This renders clearly:
Clear text
However, I don't want to be setting resolution this way as it's expensive memory-wise.
Furthermore, if I avoid setting the resolution AND specify a specific fontSize, via:
this.sampleText = this.scene.add.text(0, 0, 'Blurry text', { fontFamily: 'truetypetest', fontSize: '20px' });
This renders as blurry text:
Blurry text
I should mention that I'm rendering the text inside a container (GameObjects.Container). Also, and I suspect this is the key problem - I'm zooming the canvas using:
scale: {
parent: 'game-canvas',
zoom: 2,
autoCenter: Phaser.Scale.CENTER_BOTH,
}
I can't avoid using the zoom at this stage as the art is based off of this requirement. I've also tried using Bitmap font with no luck.
So my question is how do I use my custom font in my game that can render clear text for a wide range of different fontSize?
Thanks!
UPDATE
I've tried all of the following but with no luck:
Used Bitmap Fonts (including adding png font-sheets for different sizes
Tried rex WebFont Loader plugin: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/webfontloader/#test-string (loads font but still blurry)
Used a normal font like Roboto from the Google Font API. So the problem is not isolated to my particular font style (pixel-style font)
Tried following the method described here: https://phaser.io/examples/v3/view/game-objects/text/custom-webfont (CSS injection and custom webfont loading)
Tried multiples of font sizes
Tried autoRound=true
I find it difficult to believe what I'm trying to do is not possible. Its only text being rendered within a container. I would have thought there's a way of ensuring a single font can be used across a general range of sizes within the game? Failing that, I wouldn't mind using a more exhaustive strategy (multiple different font files at different sizes) if that is needed. There MUST be a way of rendering crisp text within a game? :(
I have this vuetify code:
<div class="mb-6">
<h1 class="text-h4">
{{title}}
</h1>
<p class="subtitle-1 font-weight-thin" v-if="subtitle">{{subtitle}}</p>
</div>
Which produces a title and subtitle that are not aligned vertically, as visible there:
The left-space between the title M is wider that the subtitle one.
Any idea why? I reckon this is the first time I have such an issue, hence I believe this is a Vuetify typography issue.
I tried playing with the letter-spacing CSS property without success: it changes the space between the letters but not in front.
I also tried playing with margin-block-start CSS property, but it doesn't change anything.
Thanks for the help
It's not a vuetify or letter-spacing issue. This comes from font you are using. Vuetify uses Google’s Roboto font by default.
There's a playground at Google fonts with Roboto font. You may notice that the problem you mentioned is present here as well. By example, there's some space in Regular 400 #64px:
Let's test your code using a different font. By example, I'll use CSS font-family: serif !important; that fallbacks to Times New Roman at Windows platforms:
Looks fine, no spacings.
So one solution to fix your problem is to change the font. I believe that there are fonts that are more suitable for websites than Times and that do not have such a problem.
According to Vuetify docs, you can change a font for the whole project with one line in src/sass/variables.scss file. Keep in mind that this cause project to build much longer:
$body-font-family: 'Work Sans', serif;
Possibly you don't want to change a font. So you can change the whole string's position this way:
.text-h4::first-letter {
margin-left: -0.04em;
}
In this case, the unselected lines will align a little, but there will be problems with selection:
Maybe this SO question will also help you. And there's a playground at CodePen where you can test some solutions.
I often embed webfont (#font-face) in sites that I develop and I have never encountered a major problem until today.
In fact, I feel there is a big issue with the line-height, I'm not extremely good at English so I'll try to illustrate it with pictures. I already contact the support from fontshop.com (where the font was bought) but they do not seem to understand / solve the problem.
What we had before with standard desktop font (= rendering is good for us):
What we had with the font-face (no change in CSS stylesheet):
Here is the CSS:
#content h1 {
background:#000000;
color:#FFFFFF;
font-family:"DINPro-Bold","Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
font-size:35px;
line-height:30px;
padding:10px;
text-transform:uppercase;
}
Usually font websites will have ways to configure the webfont package when you download it. I buy all my fonts from myfonts.com and under the advanced settings there are options for line-height adjustments. Try downloading the font using native line-height adjustments if this option is available. If not, try uploading the font to fontsquirrel's online font generator and upload the new version.
That's not the same font. The shape of the O and the curvature of the arm on the R give it away, which means the fallback fonts are being used, likely due to #font-face not loading properly. Different fonts will have different default spacing, as stated already, which would also lead you to believe it's a line-height issue.
Try making your fallback fonts something totally obvious, like:
font-family:"DINPro-Bold",serif;
This worked for me:
Generate the webfont at Font Squirrel. After uploading the fonts select 'Expert', scroll down and check the checkbox 'X-height Matching'. This resizes the height to match the x-height.
If you have problem with line-height of your webfont (especially if font suppose to be big in your project) try this: close your font in div or other block element and set "overflow" to "hidden". Div will have exact height of your font so any additional space will be cut off.
Try adding "position: relative; top: 5px;" to the "h1" tag
Try position: relative; paddint-top: 5px; padding-bottom: 0px;
Line height according to wikipedia
In typography, leading (rhymes with heading) refers to the amount of
added vertical spacing between lines of type.
This can be achieved like this...
.class{
line-height: 1em;
}
But if you are referring to the height of the letters then this is not something that can be adjusted. It is part of the font you have chosen to use.
I generated a PDF file using wkhtmltopdf from a html page. The html page uses tables which have 1 pixel borders. If I open the PDF with Acrobat or Foxit they randomly miss to draw vertical borders, but they appear if I zoom in. So I guess it's some kind of rounding error, because the lines are too thin?
If I print the PDF it looks good.
And I just realized, it only happens if I set a background-color.
How can I fix this?
Here's a sample PDF. The border separating the characters "a" and "b" disappears depending on the zoom factor. I generated this file like this:
echo "
<html><body>
<span style="border: 1px solid black; background-color:red;">a</span>
<span style="background-color:red">b</span>
</body></html>"
| wkhtmltopdf.exe - test.pdf
Your line is not missing, it is just too small to render on the screen.
This is because PDFs are rendered according to their page size, not according to how large the features on the page are. Everything on the page is scaled up or down to make it fit into the PDF page, and so your line is being scaled down and thus disappearing: 1 / 3 = 0.333 = no line.
To fix this you have the following options:
Reduce the page size on wkhtml2pdf using: --page-size A4
Reduce the width & height of the page exactly using: --page-width 9in --page-height 6in
Make your line thicker.
Option 3 is probably preferable in this case. It's not a very elegant fix, but you don't have many options to play with. If you were writing the PDF on low-level then things could be done, but since you're using wkhtml2pdf then you are limited to what it allows you to set.
I had similar problem with borders of a table. What helped me was use of pt instead of px in my css.
See W3C:
But in general you would use a different set of units for display on screen than for printing on paper.
I'm assuming that you want thin line, or else you wouldn't have set the width to 1px.
The key to having thin, hairline borders displayed in PDFs made with wkhtmltopdf is to use SVG backgrounds like so:
.hairline-border {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><rect x='0' y='0' width='100%' height='100%' stroke='black' fill='white' stroke-opacity='1' /></svg>");
}
For a hairline separator (think <hr>), I use:
.hairline {
height: 0.5mm;
width: 100%;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0mm' y1='0mm' x2='300mm' y2='0mm' style='stroke:black; stroke-width:0.25mm;' /></svg>");
}
and I use them like so:
<div class="hairline-border"></div>
And it's rendered correctly in Firefox and Safari/Chrome, and wkhtmltopdf at least keeps the line width as it is.
There's been some discussion that a base64 transform of the SVG would warrant greater compatibility on IE. Frankly, I couldn't care less if IE is happy or not but see Inline SVG in CSS, if you must.
I have quite large text (font size 28) I'm trying to align vertically in a fixed-height container.
I'm doing this by eye and just setting a margin-top so that it gets to the right spot. However, when in Firefox, I need a margin-top of 20px, in Safari I need like 15px (else it's too far down). I saw that the discrepancy was because in Safari the text element is taller than in Firefox and includes a slight amount of whitespace on top that doesn't show up in Firefox (in Firefox, the top of the text element is exactly when the text starts).
I've tried all kinda of display combinations with line-heights and perhaps adding a width/height for the text and whatnot. Nothing works.
What can I do to make this consistent? I'd hate to use JS but it seems like the only option...
For cross-browser CSS normalization I'd recommend a reset - YUI3 has a good one, Twitter Bootstrap is another good one. It basically sets paddings and margins to 0 so all browsers will behave and only adhere to YOUR css rules and not their own default rules.
For vertically aligning text to containers, if it's a single line of text, use the line-height property, and set it to equal the height of the container.
For example:
CSS:
div {
height:300px;
width: 400px;
line-height: 300px;
font-size:28px;
background-color:#F0F0F0;
}
HTML:
<div>
Some vertically centered text
</div>
Example: http://jsfiddle.net/Djvv7/
You need to apply a css reset. Good practice to use one on all projects. The most famous I know of is: http://meyerweb.com/eric/tools/css/reset/