I am using Geoserver to make a map using SLD. I have a problem with trying to portray symbols with graphic fills: extra whitespace is added around the symbols, which makes my map unreadable. Here is an example:
I have this tiling using both QGIS, and the OpenLayers map preview from Geoserver. This effect is less present at really high zoom levels, which are of little interest to me:
The code I used for the SLD is the following:
<FeatureTypeStyle>
<Rule>
<PolygonSymbolizer uom="http://www.opengeospatial.org/se/units/metre">
<Fill>
<GraphicFill>
<Graphic>
<ExternalGraphic>
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" xlink:href="SVG/mySVG.svg"/>
<Format>image/svg+xml</Format>
</ExternalGraphic>
<Size>500</Size>
</Graphic>
</GraphicFill>
<VendorOption name="graphic-margin">-20</VendorOption>
</Fill>
</PolygonSymbolizer>
</Rule>
</FeatureTypeStyle>
The code is quite simple, and quite similar to the code from Geoserver documentation. Note that I tried to use the "graphic-margin" vendor option to reduce the tiling, to no avail. Whatever value I put into this option, nothing changes.
How can I get rid of the whitespace?
Related
I've started playing with TiKZJax, a system for converting TikZ images to svg, and embedding them in html pages.
I do like this tool a lot, but I'm having some troubles with mathematical formulas (LaTeX) in TikZJax nodes. The problem is that some basic mathematical symbols do not render correctly.
Here you can see a webpage with two MWEs.
The first one is derived from an image I was preparing, where I first noticed the issue.
The negative y axis labels have a "times" sign instead of the expected minus.
The two texts roughly at (3,3) and (6,6) are two "experiments". One should be $-2$ and the other has a bunch of random symbols $\hbar \pi \times \otimes \sum$. The third and the fourth won't render correctly.
The second MWE is the same you can find in the TikZJax demo here, but with $-\y$ in place of $\y$. Again, the minus sign won't render correctly.
The compilation log I see from the console does not complain about anything.
I tried inspecting the "times" symbol that appears in place of the minus sign. I am no expert at all, but from what I understand, this should correspond to the £ symbol in the font family cmsy10:
<text alignment-baseline="baseline" y="61.57359313964842" x="-51.62625122070311" style="font-family: cmsy10; font-size: 12;">£</text>.
I looked for a table of cmsy10 fonts and I found one in this TeX StackExchange thread.
It seems to me that the minus sign is two cells to the right from the times sign. I am not sure how to read the "coordinates" in the table. Anyway from this site £ corresponds to 163, and 161 corresponds to an inverted exclamation mark "¡".
I created an html file with the svg code for (a version of) the first MWE, and changed the pound symbols into inverted exclamation marks. This produces the expected minus signs.
Could it be that the author of TikZJaX got the mapping of some math symbols wrong?
Or am I getting it all wrong?
In the latter case, can something be done to get the correct minus signs (and other symbols)?
Thanks a lot for your help
Francesco
PS By the way, I noticed that the TikZJaX demo here does not actually map the fonts to the correct font family. I think this is because something goes wrong with the link to the css file in the header of the webpage. I'm guessing this because I get a similar rendering if I comment out the link to the css file, which contains a list of font families.
I am using XSL FO list block to show bullet points. Is it possible to change list-style-type to show square (or other shape)? In HTML, it is <ul style="list-style-type:square;">
Code:
<fo:list-block>
<fo:list-item>
<fo:list-item-label>
<fo:block>*</fo:block>
</fo:list-item-label>
<fo:list-item-body>
<fo:block>Volvo</fo:block>
</fo:list-item-body>
</fo:list-item>
<fo:list-item>
<fo:list-item-label>
<fo:block>*</fo:block>
</fo:list-item-label>
<fo:list-item-body>
<fo:block>Saab</fo:block>
</fo:list-item-body>
</fo:list-item>
</fo:list-block>
Put the character that you want in place of the *:
<fo:list-item-label>
<fo:block color="blue" font-weight="bold" font-size="1.3em">✪</fo:block>
</fo:list-item-label>
This looks like a lot of work compared to <ul style="list-style-type:square;">, but:
You typically only need to do this once, since you are generating the XSL-FO using XSLT
You have complete control over the content, size, weight, colour, alignment (see relative-align: https://www.w3.org/TR/xsl11/#relative-align), and position of the list item label (and, as above, you typically only need to set that up once)
If you want to, you could change, e.g., the colour of the bullet for each list item by using position() in your XSLT
When you look at numbering list items, you'll see that xsl:number makes it easy to generate hierarchical numbers to use in list item labels. (If you were using AH Formatter, you'd also be able to use a bunch of predefined counter styles: https://www.antennahouse.com/product/ahf66/ahf-ext.html#axf.counter-style.)
I've tried the answers on 4 other S.O. questions but my image is still not showing up.
I'm learning to code by going through Dash at General Assembly. However I'm building this project using Sublime 3.
body{
background-image: url("Southern California Sunset.jpg");
My html file and images are saved in the same folder.
Where I obtained the background image:
Southern California Sunset.jpg
Your CSS syntax for background image is correct:
background-image: url("Southern California Sunset.jpg");
You can replace each space with %20 which is the HTML URL encoding equivalent. But in a modern web browser this may not be necessary. You can also use camel case (that is, capitalization of the first letter of every word) without spaces or another naming convention to eliminate the spaces.
As long as the syntax is correct and the file is in the right place, the code should work properly.
You do, however, have a small (unrelated) syntax error in your code; this:
<input type="email"; placeholder"Your email"/>
should be:
<input type="email" placeholder"Your email" />
HTML is generally pretty forgiving of syntax errors. Still, it is best to avoid them.
Try replacing the spaces in the filename with %20:
background-image: url("Southern%20California%20Sunset.jpg");
In general, avoid spaces in file names. Much easier.
Like he said you should avoid using spaces when saving an image. I use the 'camel humps' method for all my coding. So instead of using spaces you capitalize the all the words.
So instead of 'my example image text.jpg', it would be MyExampleImageText.jpg.
You must have a picture size under 1 MB or 500 KB. This worked.
body {
background-image: url(yourfile.jpeg);
}
I use audivers application to convert PDFs and Images to MusicXML.
It give me some result. An for example this element after OMR:
<credit-words font-family="serif" font-size="23" default-x="407" default-y="1489">
Polonaise in F major
</credit-words>
contain attribute default-x and default-y. Problem is that it is not in pixels. What unit it is and how I can convert it on pixels?
Identifying exactly where on the page a musical element occurs can be extremely difficult in musicxml. The layout.py module of my music21 python toolkit (shameless plug) can do it up to the measure level -- getting the note/credit level will not be too hard after that. The code is LGPL so you could use that to hack together a parser in another language.
See http://web.mit.edu/music21/doc/moduleReference/moduleLayout.html#music21.layout.divideByPages
Most MusicXML graphical units, including default-x and default-y, are in tenths of a staff space. There's more documentation in the MusicXML DTDs and XSD, for instance at http://www.musicxml.com/for-developers/musicxml-dtd/common-elements/.
I am looking for character which could replace image icon, for example like ✘ (xmark) and ✔ (tick), maybe some symbol to "draft" or "new message"?
EDIT:
Fav: ❤
Draft: ✍
Message: ✉
To find useful symbols, I have two great resources:
http://shapecatcher.com
Allows you to draw a shape, which it then searches for similarly shaped unicode symbols.
https://www.fileformat.info/info/unicode/block/index.htm
Lists unicode by the character blocks (using an embedded unicode font to maximize compatibility for display) and has a "display a certain block with images" functionality that allows you to review symbol blocks.
Both are quite useful though I often end up using shapecatcher these days just because it's a fun break just to be able to draw the shape that you want and have the site pull it up for you. At least, sometimes it will put it up.
Misc. Symbols Blocks
http://shapecatcher.com/unicode/block/Miscellaneous_Symbols_And_Pictographs is also a great category of unicode symbols, though as with all unicode, you may have to test compatibility.
https://www.fileformat.info/info/unicode/block/miscellaneous_symbols/images.htm is the block of the miscellaneous symbols, for comparison.
⌚ U+0231A WATCH
⌛ U+0231B HOURGLASS
♟ U+265F SOLID CHESS PAWN
⚷ U+26B7 CHIRON
★ U+2605 SOLID STAR
✓ U+2713 CHECK MARK
☑ U+2611 SQUARE CHECKBOX
✕ U+2715 MULTIPLICATION X
☒ U+2612 SQUARE X-ED BOX
⚠ U+26A0 WARNING SIGN
Are also good symbols to add to the list.
Edit: In 2019 I would now recommend using a robust icon pack, either in svg form or font-file form, the presentation of unicode is often less controllable for web developers.
stackoverflow.com used to use "●" (U+25CF BLACK CIRCLE) for badges.
There are tons of useful characters in Unicode:
✆ U+2706 TELEPHONE LOCATION SIGN
✉ U+2709 ENVELOPE
☎ U+260E BLACK TELEPHONE and ☏ U+260F WHITE TELEPHONE
✎ U+270E LOWER RIGHT PENCIL
⌛ U+231B HOURGLASS
⌨ U+2328 KEYBOARD
←
↑
→
↓
↔
↕
↖
↗
↘
↙
just to name a few...
Why not just peruse the whole list?
I've used the block-arrows:
U+25b2 ▲, U+25ba ►, U+25bc ▼, U+25c4 ◄
Look at http://unicode.org/charts#symbols for some ideas. I'm not sure what would work for "draft" or "new message" but there is a lot to choose from there.
Some symbols might not be supported by the font selected into the browser page. Even if they are, a lot of them look really bad at small sizes. You're better off using an image if you can.
http://unicode-table.com/ is great too but for some unicodes designed for web design icons, i recommend : http://kudakurage.com/ligature_symbols/.
Twitter Bootstrap uses × (×) for close buttons.
I would suggest using custom font like https://github.com/FortAwesome/Font-Awesome
You can also have svg/png version https://github.com/encharm/Font-Awesome-SVG-PNG
There are also other svg icons
https://github.com/iconic/open-iconic
https://github.com/outpunk/evil-icons
Pure css icons https://github.com/saeedalipoor/icono
For Material Design you have static svg icons https://google.github.io/material-design-icons/ and animated:
http://tympanus.net/Development/AnimatedSVGIcons/
http://tympanus.net/Development/IconHoverEffects/
http://tympanus.net/Development/AnimatedCheckboxes/
https://alexk111.github.io/SVG-Morpheus/
I am surprised no one has posted Unicode emojis yet:
Range U+1F600 - U+1F64F
Just some from the list:
😁 :U+1F601: GRINNING FACE WITH SMILING EYES 😁
😂 :U+1F602: FACE WITH TEARS OF JOY 😂
😃 :U+1F603: SMILING FACE WITH OPEN MOUTH 😃
😄 :U+1F604: SMILING FACE WITH OPEN MOUTH AND SMILING EYES 😄
😅 :U+1F605: SMILING FACE WITH OPEN MOUTH AND COLD SWEAT 😅
😆 :U+1F606: SMILING FACE WITH OPEN MOUTH AND TIGHTLY-CLOSED EYES 😆
😷 :U+1F637: FACE WITH MEDICAL MASK 😷
Also have a look at this list of cool icons from Supplemental list
☣ : U+2623: BIOHAZARD SIGN ☣
☢ : U+2622: RADIOACTIVE SIGN ☢
I've used the magnifying glass icon as the body of an anchor to link to a cool interactive page for some data analysis that allowed a user to pair arbitrary data selections much like this example.
🔎
Being a link the default underline appearance somewhat obscured the unicode glyph but that effect was negligible for our internal tool but might be suboptimal for something public facing.