Comments (10)
@dilip640 Have you tried using fontPadding ?
Explanation and examples listed here : Article
from compose-multiplatform.
@dilip640 Have you tried using fontPadding ? Explanation and examples listed here : Article
@gsrathoreniks This blog is specific to Android. I'm having issue in iOS. Also includeFontPadding
is not available in compose-multiplatform.
from compose-multiplatform.
@dilip640 Try this one out, I used in kotlin multi-platform project only and it solved my issue.
Pass this style to the text.
Note :
It's not an issue/bug it's just that fonts have their own padding and stylings. Depending on platform's default they sometimes can look little out of balance as in this particular case.LineHeightStyle
can be used to applyalignments
andtrim
.
TextStyle(lineHeightStyle = LineHeightStyle(alignment = alignment, trim = trim))
from compose-multiplatform.
@gsrathoreniks I know there are ways to remove the extra padding. But in multiplatform case the default should be right on each platform.
from compose-multiplatform.
maybe it's picking the platform default
from compose-multiplatform.
Full reproducer:
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.LineHeightStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
@Composable
fun App() {
Text(
text = "Text",
modifier = Modifier
.background(Color.Yellow, shape = RoundedCornerShape(12.dp))
.padding(horizontal = 8.dp),
fontSize = 12.sp,
style = TextStyle.Default.copy(
lineHeight = 100.sp,
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None,
)
),
)
}
As a solution, override lineHeightStyle
:
style = LocalTextStyle.current.copy(
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.Both,
)
),
from compose-multiplatform.
@igordmn it's by design, see https://issuetracker.google.com/issues/321872412
Android/other platforms don't have a diff during my tests. Centering highly depends on font's data/metrics. Different platforms use different font by default.
To get equal positioning - use the same font (from resources for example)
Also see my explanation here: #3453 (comment)
from compose-multiplatform.
Centering highly depends on font's data/metrics
In this case, yes, there is no issue.
Solution is either to use the same font or override lineHeightStyle
.
Different default font on different systems is by design.
from compose-multiplatform.
Rechecked this particular sample with default system fonts:
Full code is:
@Composable
fun App() {
Row(Modifier.systemBarsPadding()) {
androidx.compose.foundation.text.BasicText(
text = "Declared",
modifier = Modifier
.background(Color.Yellow, shape = RoundedCornerShape(12.dp))
.padding(horizontal = 8.dp),
style = TextStyle(
color = Color.Black,
fontSize = 12.sp
),
)
androidx.compose.material3.Text(
text = "Declared",
modifier = Modifier
.background(Color.Yellow, shape = RoundedCornerShape(12.dp))
.padding(horizontal = 8.dp),
style = TextStyle(
color = Color.Black,
fontSize = 12.sp
),
)
}
}
Regarding specifying only fontSize
(without lineHeightStyle
and lineHeightStyle
) inside MaterialTheme
, I'd follow Google's recommendation from the issue mentioned above:
To support non-standard text sizes, we encourage users to follow the Material design system and use a different type scale rather than changing the font size directly. Alternatively, users can overwrite the line height like so:
style = LocalTextStyle.current.copy(lineHeight = TextUnit.Unspecified)
, or create a customTypography
entirely.
from compose-multiplatform.
Also includeFontPadding is not available in compose-multiplatform.
and should not! See my explanation here: #2477 (comment)
from compose-multiplatform.
Related Issues (20)
- Desktop. Native distribution. `intallationPath` doesn't work if `dirChooser` = false
- Reduce variety of Preview annotations HOT 3
- Being able to create a ComposePanel with vsync disabled
- Need to tap the touchpad thrice for double click action when using combined clickable. However, Button clicks are only required to clicked twice. HOT 2
- ImageVector is blurry when used with `Image()` + `Modifier.scale()` HOT 2
- [Compose Resources] commonMainResourceAccessors is not generated in multi-module architecture using Kotlin 2.0.0 HOT 4
- `Dialogs` are not rendered as expected when used inside a `ImageComposeScene`
- Unable to compile kotlinjs
- "No such file or directory" when using `Res.getUri()` HOT 5
- FocusRequester is not working on web both js(IR) and WASM the same as in JVM HOT 1
- Support getting resources by key
- Failed to use common source set to manage compose multi-language string resources HOT 2
- PointerInputChange onDrag events always emit ID of 0 on desktop HOT 3
- Default Proguard rules cause task failure when using Material 3 instead of 2
- Jetsnack images are not loading HOT 1
- syncPodComposeResourcesForIos: Cannot query the value of this provider because it has no value available.
- [Gradle] tryGetSkikoRuntimeIfNeeded() eagerly resolves KMP runtime configuration on task creation HOT 1
- [Compose Resources] `MissingResourceException` in Auto-Updater application with different folders HOT 1
- Cannot change preferredStatusBarStyle on ComposeUIViewController HOT 1
- Buuld release not working with kotlin 2 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from compose-multiplatform.