ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Correct meaning of 'start' and 'end' text align for LTR text

Browse Source
This commit is contained in:
Andreas Hocevar
2020-11-06 17:54:02 +01:00
parent 9c5e61ffb0
commit 7cc45c967b
4 changed files with 216 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
rendering/cases/rtl-text-align/main.js Normal file
View File

@@ -0,0 +1,192 @@
import CircleStyle from '../../../src/ol/style/Circle.js';
import Feature from '../../../src/ol/Feature.js';
import Fill from '../../../src/ol/style/Fill.js';
import Map from '../../../src/ol/Map.js';
import Point from '../../../src/ol/geom/Point.js';
import Stroke from '../../../src/ol/style/Stroke.js';
import Style from '../../../src/ol/style/Style.js';
import Text from '../../../src/ol/style/Text.js';
import VectorLayer from '../../../src/ol/layer/Vector.js';
import VectorSource from '../../../src/ol/source/Vector.js';
import View from '../../../src/ol/View.js';
const vectorSource = new VectorSource();
let feature;
// Latin - end (right)
feature = new Feature({
geometry: new Point([-10, 50]),
});
feature.setStyle(
new Style({
text: new Text({
text: 'Latin',
font: '24px Ubuntu',
textAlign: 'end',
fill: new Fill({
color: 'black',
}),
stroke: new Stroke({
color: 'white',
}),
}),
image: new CircleStyle({
radius: 10,
fill: new Fill({
color: 'cyan',
}),
}),
})
);
vectorSource.addFeature(feature);
// Hebrew - start (right)
feature = new Feature({
geometry: new Point([-10, 0]),
});
feature.setStyle(
new Style({
text: new Text({
text: 'עִברִית',
font: '24px Ubuntu',
textAlign: 'start',
fill: new Fill({
color: 'black',
}),
stroke: new Stroke({
color: 'white',
}),
}),
image: new CircleStyle({
radius: 10,
fill: new Fill({
color: 'cyan',
}),
}),
})
);
vectorSource.addFeature(feature);
// Arabic - start (right)
feature = new Feature({
geometry: new Point([-10, -50]),
});
feature.setStyle(
new Style({
text: new Text({
text: 'عربى',
font: '24px Ubuntu',
textAlign: 'start',
fill: new Fill({
color: 'black',
}),
stroke: new Stroke({
color: 'white',
}),
}),
image: new CircleStyle({
radius: 10,
fill: new Fill({
color: 'cyan',
}),
}),
})
);
vectorSource.addFeature(feature);
// Latin - start (left)
feature = new Feature({
geometry: new Point([10, 50]),
});
feature.setStyle(
new Style({
text: new Text({
text: 'Latin',
font: '24px Ubuntu',
textAlign: 'start',
fill: new Fill({
color: 'black',
}),
stroke: new Stroke({
color: 'white',
}),
}),
image: new CircleStyle({
radius: 10,
fill: new Fill({
color: 'cyan',
}),
}),
})
);
vectorSource.addFeature(feature);
// Hebrew - end (left)
feature = new Feature({
geometry: new Point([10, 0]),
});
feature.setStyle(
new Style({
text: new Text({
text: 'עִברִית',
font: '24px Ubuntu',
textAlign: 'end',
fill: new Fill({
color: 'black',
}),
stroke: new Stroke({
color: 'white',
}),
}),
image: new CircleStyle({
radius: 10,
fill: new Fill({
color: 'cyan',
}),
}),
})
);
vectorSource.addFeature(feature);
// Arabic - end (left)
feature = new Feature({
geometry: new Point([10, -50]),
});
feature.setStyle(
new Style({
text: new Text({
text: 'عربى',
font: '24px Ubuntu',
textAlign: 'end',
fill: new Fill({
color: 'black',
}),
stroke: new Stroke({
color: 'white',
}),
}),
image: new CircleStyle({
radius: 10,
fill: new Fill({
color: 'cyan',
}),
}),
})
);
vectorSource.addFeature(feature);
new Map({
pixelRatio: 1,
layers: [
new VectorLayer({
source: vectorSource,
}),
],
target: 'map',
view: new View({
center: [0, 0],
resolution: 1,
}),
});
render({tolerance: 0.01});